Configuración del paquete web CLI angular

1. El módulo del paquete web
2. Pasos para obtener la configuración del paquete web CLI angular

Angular CLI es una interfaz de línea de comandos que puede generar proyectos Angular, agregar dependencias y ejecutar compilaciones de desarrollo y producción. Proporciona todas las herramientas necesarias para transformar una idea en una aplicación completa.

La CLI de Angular proporciona comandos para crear el proyecto, agregar y ejecutar pruebas, generar componentes, servicios, tuberías, módulos de andamiaje, características, etc. También proporciona un archivo de configuración de paquete web.

El módulo del paquete web

Webpack es un paquete de módulos que maneja módulos con dependencias y genera activos estáticos que representan esos módulos. Podemos usarlo junto con otras herramientas como Babel o TypeScript para admitir diferentes tipos de sintaxis de JavaScript.

Webpack no es solo para ensamblar archivos fuente; también puede ejecutar varias actividades adicionales debido a su capacidad de manejo de muchos complementos. Los cargadores de módulos Webpack pueden interpretar varios formatos de archivo.

Este módulo permite que los archivos Angular TypeScript, por ejemplo, utilicen la línea de importación para importar archivos CSS. Webpack a menudo se oculta detrás de la herramienta de línea de comandos Angular.

Sin embargo, al desarrollar una aplicación Angular, es posible que deba modificar la configuración del paquete web. Las versiones anteriores de Angular le permitían expulsar la configuración del paquete web y modificarla directamente.

Pero el acceso a la configuración base se bloqueó en Angular 8. Aún así, podemos ampliar la configuración del paquete web agregando nuevos cargadores o variables de configuración.

La CLI de Angular también incluye un servidor de desarrollo que compila la aplicación en cada cambio y la vuelve a cargar en el navegador con cada nuevo cambio. Esto lo convierte en una herramienta eficaz para crear aplicaciones rápidamente sin tener que preocuparse por configurar el paquete web por separado.

Pasos para obtener la configuración del paquete web CLI angular

Se deben realizar los siguientes pasos para usar Angular CLI con webpack:

1. Instale NodeJS y npm en su sistema.
2. Si está utilizando una versión anterior de Node.js, instale 4 o superior y actualice su versión npm a 5 o superior antes de instalar Angular CLI. También puede usar nvm para este propósito.
3. Instale Angular globalmente con npm install -g @angular/CLI.
4. Cree un proyecto Angular usando ng new PROJECTNAME.
5. Agregue los siguientes scripts en package.json: "ng": "ng", "start": "ng serve", "build": "ng build".
6. Agregue webpack como dependencia en package.json.

Ejemplo (App.component.ts):

import { Component, Inject } from "@angular/core";
import { APP_VERSION } from '../webpack/app-version';
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(
    @Inject(APP_VERSION) public appVersion: string
  ) {
  }
}

Ejemplo (App.module.ts):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { APP_VERSION } from '../webpack/app-version';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [{
    provide: APP_VERSION,
    useValue: '12345678'// AppVersion
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }

Haga clic aquí para ver la demostración en vivo del código mencionado anteriormente.