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 鈥楥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 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