ng-content

ng-content

Integrar Scripts y CSS de terceros en Angular

Photo by Conscious Design on Unsplash

Integrar Scripts y CSS de terceros en Angular

Cómo añadir CSS y JavaScript externos en la aplicación Angular

Dany Paredes's photo
Dany Paredes
·Oct 22, 2022·

5 min read

Subscribe to our newsletter and never miss any upcoming articles

Play this article

Table of contents

  • El escenario
  • El escenario
  • Primeros pasos
  • El Angular.json
  • Conclusión

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);

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. It works but comes with a price to pay:

  • orden de ejecución y mantenimiento.
  • You add files manually, but the Angular CLI also adds files and css.
  • What happens if you have more scripts like tracking stuff?
  • What happens to keep the problem isolated in his bundle?

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 (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.

``json "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.

``javascript
   "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

``bash

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

![injected.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665755429750/pdz7E2aAa.png align="left")


## 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.

```json
"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:

``bash 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.

bundle-files.png

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

 
Share this