Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Comandos de Angular para correr tu proyecto

3/22
Recursos

El comando聽ng serve se usa聽para levantar un servidor de desarrollo en nuestro entorno local y probar nuestra aplicaci贸n. Puedes complementar este comando con algunas opciones y variantes:

Lanzar servidor y abrir el navegador por defecto autom谩ticamente:

ng serve -o

Angular utiliza por defecto el puerto 4200. Si quieres utilizar otro, podemos hacer:

ng serve --port=3500

TIP: Puedes detener el servidor de prueba con 鈥楥TRL + C鈥

Finalmente, si quieres analizar la versi贸n de Angular y la versi贸n de todas las dependencias instaladas, puedes hacer:

ng version

Aporte creado por: Kevin Fiorentino.

Aportes 30

Preguntas 16

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Crear proyecto: ng new my-project
Lanzar servidor de desarrollo: ng serve
Lanzar servidor de desarrollo y que abra el navegador autom谩ticamente:ng serve -o
Lanzar el servidor en un puerto especifico: ng serve -o --port=3500

Si lanzamos el comando ng version desde la carpeta del proyecto podremos obtener mayor detalle de las tecnolog[ias utilizadas.

Un comando que me ha sido 煤til es

ng serve --host 0.0.0.0

Debido a que me ha tocado trabajar desde m谩quinas virtuales.

RESUMEN

  • HABILITAR SERVIDOR PARA CORRER PROYECTO Y ABRIR NAVEGADOR
    -> ng serve -o

  • MATAR PROCESO DEL SERVIDOR LOCAL
    -> CNTRL + C

  • DEFINIR PUERTO EN EL QUE CORRERA TU PROYECTO
    -> ng serve -o --port=3500

  • VER LAS DEPENDENCIAS QUE USA TU PROYECTO Y SUS VERSIONES
    -> ng version (dentro de la carpeta del proyecto)

Tambi茅n cuando tienes un entorno extra, a parte de dev y prod. En mi caso, tengo un entorno que llam茅 stag

ng serve --configuration=stag

ng version dentro del proyeto

Angular CLI: 12.2.7
Node: 14.17.6
Package Manager: npm 6.14.15
OS: linux x64

Angular: 12.2.7
鈥 animations, cli, common, compiler, compiler-cli, core, forms
鈥 platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1202.7
@angular-devkit/build-angular 12.2.7
@angular-devkit/core 12.2.7
@angular-devkit/schematics 12.2.7
@schematics/angular 12.2.7
rxjs 6.6.7
typescript 4.3.5

Me gusto la forma en que inicio el curso, hasta ahora Nicol谩s me parece un excelente profesor.

Aca podemos ver que la version actual que tengo es la 15.x.x

ng new <nombre del proyecto>: Crea un nuevo proyecto de Angular.
ng serve: Inicia un servidor de desarrollo y ejecuta la aplicaci贸n de Angular en un navegador.
ng build: Compila la aplicaci贸n de Angular para producci贸n.
ng test: Ejecuta las pruebas unitarias de la aplicaci贸n de Angular.
ng lint: Ejecuta el linter de la aplicaci贸n de Angular para detectar problemas de estilo y buenas pr谩cticas.
ng generate <tipo> <nombre>: Genera un componente, servicio u otro tipo de elemento en la aplicaci贸n de Angular.
ng add <paquete>: Instala un paquete y realiza las configuraciones necesarias para usarlo en la aplicaci贸n de Angular.
ng update: Actualiza los paquetes de la aplicaci贸n de Angular a las 煤ltimas versiones disponibles.

Matar un proceso del servidor que estamos utilizando: Ctrl + C.
cambiar de puerto: ng serve -o --port=3500.

Nota:
Cuando hacemos ng version dentro un proyecto, este nos regresara la informaci贸n referente al proyecto, como: versi贸n de angular del proyecto y dependencias. Si lo consultas de manera global regresa la informaci贸n referente a la versi贸n de tu equipo.

Tambi茅n sirve ejecutar
npm start

Excelente curso

Comandos b谩sicos de angular

  • ng-serve el cual permite realizar live loading puedes
    • agregar la flag -o para autom谩ticamente lanzar el navegador
    • agregar la flag --port= para indicarle en que puerto queremos que este
  • Cuando hacemos un ng-version nos puede dar las dependencias del proyecto

que triste pasar de Next.js a Angular, bajon moral 馃槶

Comandos de Angular para correr tu proyecto


El comando ng serve es uno de los m谩s utilizados en Angular CLI y se utiliza para iniciar un servidor de desarrollo local para probar la aplicaci贸n en el navegador.

Este comando compila la aplicaci贸n y la ejecuta en un servidor local en un puerto predeterminado (normalmente el puerto 4200), lo que te permite ver y probar la aplicaci贸n en el navegador.

Una de las ventajas de utilizar ng serve es que, mientras haces cambios en tu c贸digo, Angular CLI autom谩ticamente recompila y actualiza la aplicaci贸n en el navegador, lo que te permite ver los cambios en tiempo real sin necesidad de reiniciar el servidor.

Adem谩s, ng serve tambi茅n incluye una serie de opciones que te permiten personalizar la configuraci贸n del servidor de desarrollo.

Por ejemplo, puedes especificar un puerto diferente para el servidor usando la opci贸n --port, o habilitar la opci贸n --host 0.0.0.0 para permitir la conexi贸n desde otras computadoras en la misma red.

ng serve -o --port=3500
ng serve --host 0.0.0.0

Tambi茅n podemos ver la versi贸n del proyecto y sus dependencias desde el archivo packake.json 馃槃

tengo este error

ng serve --host 192.168.103.16:4200, si no te funciona con localhost, tu ip la obtienes con ipconfig

Lo mejor siempre es echarse una revisada por la doc, a ver que m谩s se puede hacer

El instructor tiene una manera de explicar excelente鈥odo lo hace muy f谩cil de entender.

que buena explicacion

Usen -O para que abran su proyecto en Firefox actomaticamente 馃槈

Tengo a Firefox como mi navegador favorito. Angular + el viejo zorro, perfecta combinaci贸n!

Comandos de Angular para correr tu proyecto

En esta clase veremos otros comandos:

  • Me levanta un servidor en nodejs en modo de desarrollo. Abreviado es: ng s
    ng serve

  • ng serve -o automaticamente me abre la aplicacion en el navegador con la url http 馃槙/localhost:4200
    ng serve -o

  • Cambia el puerto a otro que nosotros deseemos. Ejemplo: ng serve --port=3500 -o
    ng serve --port=[numero-puerto]

NOTA: Al ser un proyecto que se ejecuta mediante un packgae.json, podemos usar tambien el comando: npm start para levanatar el servidor. No tengo muy claro que es mejor si ng serve o npm start

Cuando hacemos ng version por fuera de un proyecto, me retorna la version global de angular y sus dependencias.

Si hacemos ng serve dentro de un proyecto, nos da un poco mas de detalle como por ejemplo ver que las versiones especificas del proyecto y en que versiones esta construido.

En caso de que tengan problemas al dia de hoy 2022, corriendo desde el cmd de windows, pueden correrlo dentro del visual studio code con el poiwershell

ng version dentro de la carpeta del proyecto de muesta la informacion de las versiones de dependencias que tengamos en nuestro proyecto

importante asignar el puerto con "ng serve -o --port='puerto'

猸愶笍猸愶笍猸愶笍猸愶笍猸愶笍

# MyPoryectJC

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.10.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-poryectJC": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "sass"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-poryectJC",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "sass",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.sass"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "my-poryectJC:build:production"
            },
            "development": {
              "browserTarget": "my-poryectJC:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "my-poryectJC:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "sass",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.sass"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "my-poryectJC"
}

comando utilizado iniciales:
ng nww my-store
ng serve
para abrir directamente en el navegador:
ng serve -o
con un nuevo puerto:
ng serve -o --port=3400