Header Ads Widget

Ticker

6/recent/ticker-posts

Utilice la CLI de Angular 10 para inicializar y servir nuevos proyectos angulares

 En este tutorial rápido, veremos cómo usar Angular CLI v10, al momento de escribir este artículo, para generar un proyecto y servirlo localmente usando un servidor de desarrollo de recarga en vivo.

Paso 1: Verificación de la versión de CLI angular

Después de instalar Angular 10 CLI, puede ejecutar muchos comandos. Comencemos por verificar la versión de la CLI instalada:

$ ng version

Debería obtener un resultado similar:

Angular CLI: 10.0.0-rc.2
Node: 10.16.3
OS: win32 ia32
Angular: <error>
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1000.0-rc.2 (cli-only)
@angular-devkit/build-angular   <error>
@angular-devkit/core            10.0.0-rc.2 (cli-only)
@angular-devkit/schematics      10.0.0-rc.2 (cli-only)
@schematics/angular             10.0.0-rc.2 (cli-only)
@schematics/update              0.1000.0-rc.2 (cli-only)
rxjs                            6.5.3 (cli-only)
typescript                      3.6

Paso 2: Visualización de la ayuda de la CLI de Angular 10

Un segundo comando que podría necesitar ejecutar es el comando de ayuda :

$ ng help

Para obtener una ayuda de uso completa.

Tutorial de Angular 7 - ayuda de CLI

Ayuda de Angular CLI Usage ~ ng

La CLI proporciona los siguientes comandos:

  • add: Agrega soporte para una biblioteca externa a su proyecto.
  • build (b): Compila una aplicación Angular en un directorio de salida con el nombre dist/de la ruta de salida dada. Debe ejecutarse desde un directorio de espacio de trabajo.
  • config: Recupera o establece valores de configuración angular.
  • doc (d): Abre la documentación oficial de Angular (angular.io) en un navegador y busca una palabra clave determinada.
  • e2e (e): Compila y sirve una aplicación angular, luego ejecuta pruebas de un extremo a otro usando Transportador.
  • generate (g): Genera y / o modifica archivos basados ​​en un esquema.
  • help: Enumera los comandos disponibles y sus descripciones breves.
  • lint (l): Ejecuta herramientas de linting en el código de la aplicación Angular en una carpeta de proyecto determinada.
  • new (n): Crea un nuevo espacio de trabajo y una aplicación angular inicial.
  • run: Ejecuta un objetivo personalizado definido en su proyecto.
  • serve (s): Compila y sirve su aplicación, reconstruyéndola según los cambios de archivo.
  • test (t): Ejecuta pruebas unitarias en un proyecto.
  • update: Actualiza su aplicación y sus dependencias. Ver https://update.angular.io/
  • version (v): Salida de la versión CLI angular.
  • xi18n: Extrae los mensajes i18n del código fuente.

Paso 3: generación de un nuevo proyecto de Angular 10

Puede usar Angular CLI para generar rápidamente su proyecto Angular 10 ejecutando el siguiente comando en su terminal:

$ ng new frontend

frontend es el nombre del proyecto. Obviamente, puede elegir cualquier nombre válido para su proyecto. Dado que crearemos una aplicación de pila completa, estoy usando frontend como nombre para la aplicación de front-end.

Como se mencionó anteriormente, la CLI le preguntará si _ ¿Desea agregar enrutamiento angular? Puede responder con y (Sí) o No, que es la opción predeterminada. También le preguntará sobre el formato de la hoja de estilo que desea utilizar (como CSS). Elija sus opciones y presione Enterpara continuar.

Estructura del proyecto Angular 8

Después de esto; tendrá su proyecto creado con una estructura de directorio y un montón de configuraciones y archivos de código. Principalmente en formatos TypeScript y JSON. Veamos el rol de cada archivo:

  • /e2e/: Esta carpeta contiene pruebas de un extremo a otro (simulando el comportamiento del usuario) del sitio web.
  • /node_modules/: Todas las bibliotecas de terceros se instalan en esta carpeta mediante npm install.
  • /src/: Contiene el código fuente de la aplicación. La mayor parte del trabajo se realizará aquí.

    • /app/: Contiene módulos y componentes.
    • /assets/: Contiene activos estáticos como imágenes, iconos y estilos, etc.
    • /environments/: Contiene archivos de configuración específicos del entorno (producción y desarrollo).
    • browserslist: Necesario por autoprefixer para compatibilidad con CSS.
    • favicon.ico: El favicon.
    • index.html: El archivo HTML principal.
    • karma.conf.js: El archivo de configuración de Karma (una herramienta de prueba)
    • main.ts: El archivo de inicio principal desde el que se arranca AppModule .
    • polyfills.ts: Polyfills necesarios para Angular.
    • styles.css: El archivo de hoja de estilo global para el proyecto.
    • test.ts: Este es un archivo de configuración para Karma
    • tsconfig.*.json: Los archivos de configuración de TypeScript.
  • angular.json: Contiene las configuraciones para CLI

  • package.json: Contiene información básica del proyecto (nombre, descripción y dependencias, etc.)

  • README.md: Un archivo de Markdown que contiene una descripción del proyecto.

  • tsconfig.json: El archivo de configuración de TypeScript.

  • tslint.json: El archivo de configuración de TSlint (una herramienta de análisis estático)

Paso 4: servicio de su proyecto con un servidor de desarrollo

Angular CLI proporciona una cadena de herramientas completa para desarrollar aplicaciones de front-end en su máquina local. Como tal, no necesita instalar un servidor local para servir su proyecto; simplemente, puede usar el ng servedesde su terminal para servir su proyecto localmente. Primero navegue dentro de la carpeta de su proyecto y ejecute los siguientes comandos:

$ cd frontend
$ ng serve

Ahora puede navegar a la [http://localhost:4200/](http://localhost:4200/)dirección para comenzar a jugar con su aplicación de front-end. La página se volverá a cargar automáticamente si cambia cualquier archivo de origen.

También puede utilizar una dirección de host y un puerto diferente al puerto y host HTTP predeterminados proporcionando nuevas opciones. Por ejemplo:

$ ng serve --host 0.0.0.0 --port 8080

Paso 5: generación de artefactos angulares: componentes, directivas, tuberías, servicios y módulos

Para impulsar su productividad, Angular CLI proporciona un generatecomando para generar rápidamente construcciones angulares básicas como componentes, directivas, tuberías, servicios y módulos:

$ ng generate component account-list

account-list es el nombre del componente. También puede utilizar simplemente g en lugar de generar la CLI angular añadirá automáticamente referencia a componentsdirectivespipesen el app.module.ts.

Si desea agregar su componente, directiva o tubería a otro módulo, que no sea el módulo de aplicación principal, es decir, por app.module.tsejemplo, a un módulo de funciones, simplemente puede prefijar el nombre del componente con el nombre del módulo y una barra inclinada, como una ruta. .

$ ng g component account-module/account-list

account-module es el nombre de un módulo existente.

Publicar un comentario

0 Comentarios