En Angular, tenemos algunas formas de añadir librerías, por ejemplo, usando los esquemas de Angular o usando las librerías de Angular, que exportan módulos para añadir a la app.module. Pero, ¿qué ocurre cuando tenemos una librería.js o ui.css estándar y necesitamos añadirla para usarla en Angular?

Si tu quieres más artículos como esté, recuerda que puedes visitar mi blog.

Angular.json es un archivo con toda la configuración de nuestro proyecto Angular, y además nos ayuda a trabajar con librerías de terceros con archivos JavaScript y CSS estándar para fusionarlos en el bundle final o diferirlos en un único archivo.

En lugar de añadir manualmente los archivos CSS y Javascript en el index.html, el CLI de Angular lo hace por nosotros, creando un archivo bundle para CSS y javascript e inyectándolo en el index.html automáticamente.

Nota: Este ejemplo utiliza @angular/core v12.2.0

El escenario

Estamos construyendo una aplicación Angular, pero queremos utilizar un componente web externo, button-upload con dos archivos, button-upload.css y button-upload.js.

Para simplificar, los archivos están en el directorio external/, pero deberían estar en node_modules.

El botón-upload.css

.fancy-uploader {
  background-color: rojo;
  color: whitesmoke;
  borde: 1px solid gray;
}

button-upload.js

class ButtonUpload extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
    <div class="fancy-uploader">
      <label for="avatar">Image Uploader:</label>
      <input type="file"
           id="avatar" name="avatar"
           accept="image/png, image/jpeg">
    </div>
    `;
  }

}

window.customElements.define("button-upload", ButtonUpload);

En Angular, tenemos algunas formas de añadir librerías, por ejemplo, usando los esquemas de Angular o usando las librerías de Angular, que exportan módulos para añadir a la app.module.Pero, ¿qué ocurre cuando tenemos una librería.js o ui.css estándar y necesitamos añadirla para usarla en Angular?

Angular.json es un archivo con toda la configuración de nuestro proyecto Angular, y además nos ayuda a trabajar con librerías de terceros con archivos JavaScript y CSS estándar para fusionarlos en el bundle final o diferirlos en un único archivo.

En lugar de añadir manualmente los archivos CSS y Javascript en el index.html, el CLI de Angular lo hace por nosotros, creando un archivo bundle para CSS y javascript e inyectándolo en el index.html automáticamente.

Nota: Este ejemplo utiliza @angular/core v12.2.0

El escenario

Estamos construyendo una aplicación Angular pero queremos utilizar un componente web externo, button-upload con dos archivos, ' button-upload.cssybutton-upload.js`.

Para simplificar, los archivos están en el directorio external/, pero deberían estar en node_modules.

El botón-upload.css

.fancy-uploader {
  background-color: rojo;
  color: whitesmoke;
  borde: 1px solid gray;
}

button-upload.js

class ButtonUpload extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
    <div class="fancy-uploader">
      <label for="avatar">Image Uploader:</label>
      <input type="file"
           id="avatar" name="avatar"
           accept="image/png, image/jpeg">
    </div>
    `;
  }

}

window.customElements.define("button-upload", ButtonUpload);

Primeros pasos

La primera aproximación fácil y rápida es importar el javascript y el CSS en el index.html. Funciona, pero tiene un precio:

• orden de ejecución y mantenimiento.
• Añades archivos manualmente, pero el CLI de Angular también añade archivos y css.
• ¿Qué pasa si tienes más scripts como los de seguimiento?
• ¿Qué ocurre para mantener el problema aislado en su fardo?

El Angular.json resolver todos ellos, proporcionando un único lugar para el mantenimiento de los archivos CSS y Javascript, con la opción de carga ansiosa, la agrupación, y la inyección opcional en el index.html

Vamos a dar una visión general de angular.json.

El Angular.json

El CLI de Angular utiliza angular.json para ayudarnos con la administración y configurar los proyectos para construir, servir, probar y localizar.

nos centramos en cómo añadir el css y los scripts de terceros. Aprende más en los [Angular docs] oficiales (https://angular.io/guide/workspace-config).

Angular.json configurar cada aplicación o biblioteca en el nodo del proyecto. Trabajamos en la sección architect> build > options centrándonos en styles y scripts para añadir nuestros estilos y CSS.

"arquitecto": {
	    "build":{
		    "options":{
 				"styles":[],
                "scripts":[]
    		}
	}
}

Bundle Files

El Angular.json toma los estilos y scripts declarados en esta sección para el final script.js y styles.css y los inyecta en el index.html

Añadir el archivo button-upload.css en el array de estilos y el button-upload.js en el script.

   "styles": [
              "external/button-upload/button-upload.css"
            ],
   "scripts": [
              "external/button-upload/button-upload.js"
   ]

Recuerda añadir CUSTOM_ELEMENTS_SCHEMA en el @NgModule para utilizar elementos personalizados. Leer más

Ejecuta el ng build para fusionar todos los archivos css en el archivo script y los estilos en el styles.css

> ng build
✔ Generación del paquete de la aplicación del navegador completa.
✔ Copia de activos completa.
✔ Generación de html de índice completa.

Archivos Chunk iniciales | Nombres | Tamaño
main.437835c56f488f70355e.js | main | 101.96 kB
polyfills.fc6cfcbe5c3a0e94edad.js | polyfills | 33.11 kB
runtime.df8927e5b1e564860c37.js | runtime | 1.03 kB
scripts.5cf64c63898afa29a094.js | scripts | 370 bytes
styles.de2e542873613fb23f4a.css | styles | 73 bytes

Además, inyecta estos archivos en el index.html

Bundles separados

Todo funciona, pero a veces queremos separar nuestro código de los archivos globales CSS y JavaScript en un archivo bundle.

El script permite añadir archivos con una configuración de objetos con las siguientes opciones:

input: la ruta del archivo (CSS o JS),
inject: se establece en true para añadir por defecto en el archivo index.
bundleName: cambiar el nombre del archivo bundle.

"styles": [
      "src/styles.css",
      {
          "input": "external/button-upload/button-upload.css",
            "inject": true,
            "bundleName": "upload-button-css"
      }
     ],
"scripts": [
             {
                "input": "external/button-upload/button-upload.js",
                "inject": true,
                "bundleName": "upload-button-js"
              }

]

Las versiones antiguas como la ocho utilizan lazy en lugar de inject.

La construcción crea un nuevo archivo para cada objeto con un nombre de paquete:

PS C:\NUsers\dany.paredes\Desktop\labs\Naprender-ng-script> ng build
✔ Generación del bundle de la aplicación del navegador completada.
✔ Copia de activos completa.
✔ Generación de html de índice completa.

Archivos Chunk iniciales | Nombres | Tamaño
main.437835c56f488f70355e.js | main | 101.96 kB
polyfills.fc6cfcbe5c3a0e94edad.js | polyfills | 33.11 kB
runtime.df8927e5b1e564860c37.js | runtime | 1.03 kB
upload-button-js.5cf64c63898afa29a094.js | upload-button-js | 370 bytes
upload-button-css.de2e542873613fb23f4a.css | upload-button-css | 73 bytes
styles.31d6cfe0d16ae931b73c.css | styles | 0 bytes

La opción inject inyecta los paquetes upload-button-css y upload-button-js en el index.html.

Conclusión

Hemos aprendido como trabajar con archivos JavaScript y CSS externos en los globales styles.css y script.js y los dividimos en archivos bundle.

El código fuente Github

Si tu quieres más artículos como esté, recuerda que puedes visitar mi blog.