Comandos de Angular para correr tu proyecto

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

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

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.

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.

✅

En tus scripts puedes colocar la siguiente configuración

 "scripts": {
    "dev": "ng serve -o --port=3500"
},

De esta manera solo tendrías que hacer

npm run dev

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…todo 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