Comandos de Angular para correr tu proyecto

3/21
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 ‘CTRL + 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 14

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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.

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

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)

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

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

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.

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