Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de elementos angulares 10/9 por ejemplo: creación de componentes web

 En este tutorial de Angular 10 por ejemplo, aprenderemos cómo construir componentes web y elementos personalizados con Angular 10/9 y usarlos en todas partes usando la última versión de Angular y Angular CLI 10.

¿Qué son los elementos angulares?

El paquete Angular Elements ( @angular/elements) le permite crear elementos personalizados nativos y crear componentes web con Angular.

El @angular/elementspaquete proporciona una createCustomElement()API que se puede utilizar para transformar componentes angulares en elementos personalizados nativos.

Nota : Este tutorial también es válido para las versiones Angular 8 y Angular 9.

Puede encontrar un tutorial largo y detallado para componentes web con Angular en el artículo Custom Elements & Shadow DOM with Angular .

¿Qué es un componente web o un elemento personalizado?

Un elemento personalizado proporciona una forma de crear componentes web, es decir, nuevos elementos DOM que se comportan como elementos HTML estándar.

Según Custom Elements v1: componentes web reutilizables

Con los Elementos personalizados , los desarrolladores web pueden crear nuevas etiquetas HTML , reforzar las etiquetas HTML existentes o ampliar los componentes que otros desarrolladores han creado. La API es la base de los componentes web . Trae una forma basada en estándares web para crear componentes reutilizables usando nada más que Vanilla JS / HTML / CSS. El resultado es menos código, código modular y más reutilización en nuestras aplicaciones.

Instalación de Angular 10 CLI

Dirígete a tu terminal y ejecuta el siguiente comando para instalar Angular CLI 10 globalmente:

npm i -g @angular/cli

Esto instalará la última versión y es posible que deba agregar sudo dependiendo de su configuración de npm.

Creación de un nuevo proyecto de ejemplo de Angular 10

Regrese a su terminal y ejecute el siguiente comando para crear un nuevo proyecto de Angular 10 usando la CLI de Angular :

$ ng new angular-10-webcomponents-demo --prefix custom

Simplemente usamos el ng newcomando habitual y puede usar todos los demás parámetros para agregar enrutamiento o Sass, etc. Pero también tenga en cuenta el prefijo personalizado : esto es necesario para los elementos personalizados.

Se le preguntará si desea configurar el enrutamiento en su proyecto y qué formato de hoja de estilo le gustaría usar. Elija las respuestas adecuadas para su proyecto.

Adición del paquete Angular Elements 10

Para poder crear componentes web, necesitamos instalar el paquete Angular Elements v10. Simplemente puede usar el ng addcomando para instalar el paquete:

$ angular-10-webcomponents-demo
$ ng add @angular/elements

Este comando agrega el document-register-element.jspolyfill requerido para los navegadores web que aún no admiten elementos personalizados y el @angular/elementspaquete.

Creación de un componente de Angular 10 de ejemplo

Un componente angular es un concepto angular que es diferente de un componente web, así que veamos cómo podemos crear un componente y transformarlo en un componente web usando la createCustomElement()función de @angular/elements.

Primero, generemos un nuevo componente angular usando la CLI de Angular:

$ ng g component analytics-counter --inline-style --inline-template -v Native

Este comando crea una nueva analytics-countercarpeta y genera los siguientes archivos y luego actualiza el src/app/app.module.tsarchivo:

  • analytics-counter.component.html
  • analytics-counter.component.css
  • analytics-counter.component.ts
  • analytics-counter.component.spec.ts

El uso ViewEncapsulation.Nativeencapsula los estilos CSS, la plantilla y el código en el mismo archivo.

Agregar el componente a Main NgModule

Necesitamos seguir algunos pasos para transformar el componente Angular en un componente web. Abra y app.module.tsluego agregue los siguientes cambios:

Primero importe Injectordesde el @angular/corepaquete y createCustomElementdesde el @angular/elementspaquete:

import  { Injector} from '@angular/core';
import  { createCustomElement } from '@angular/elements';

A continuación, necesitamos instruir a Angular para que compile el componente agregándolo a la entryComponentsmatriz del módulo principal:

...
entryComponents :  [
   AnalyticsCounterComponent
]

Ahora está listo para transformar el componente en un componente web llamando al createCustomElement()método desde el ngDoBootstrap()método:

export class AppModule {
  constructor(private injector : Injector){}
  ngDoBootstrap(){
      const el = createCustomElement(AnalyticsCounterComponent, {injector : this.injector});
  customElements.define('analytics-counter',el);
  }
  }

Estamos iniciando nuestro Componente Angular como un elemento personalizado en el ngDoBootstrap()método.

El createCustomElementmétodo toma dos parámetros:

  • El primer parámetro es el componente angular que se utilizará para crear el elemento personalizado.
  • El segundo parámetro es un objeto de configuración que tiene una propiedad de inyector establecida en la Injectorinstancia actual .
  • Usando la createCustomElementAPI podemos transformar un componente Angular 6 en un elemento personalizado.

Definimos un elemento personalizado utilizando la API estándar del navegador. customElements.define()

_createCustomElement_Crea una clase que encapsula la funcionalidad del componente proporcionado y usa la información de configuración para proporcionar más contexto a la clase. Toma las entradas y salidas de la fábrica de componentes para convertirlas en la API de elementos personalizados adecuada y agregar enlaces a los cambios de entrada.

Este es el contenido del src/app/app.module.tsarchivo:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { AnalyticsCounterComponent } from './analyticscounter/analyticscounter.component';

@NgModule({
declarations: [AnalyticsCounterComponent],
imports: [BrowserModule],
entryComponents: [AnalyticsCounterComponent]
})
export class AppModule {

constructor(private injector: Injector) {
    const analyticsCounter = createCustomElement(AnalyticsCounterComponent, { injector });
    customElements.define('analytics-counter', analyticsCounter);
}
ngDoBootstrap() {}
} 

Construyendo el Proyecto Angular 10 para Producción

Como cualquier proyecto Angular normal. Puede usar el siguiente comando para generar una compilación de producción:

$ ng build --prod --output-hashing none

En la distcarpeta, encontrará varios archivos generados. Idealmente, debemos tener solo un archivo para usar el componente web, pero desafortunadamente la CLI de Angular no proporciona una forma de producir en el archivo por ahora.

Simplemente podemos crear un script de compilación para producir solo un archivo JS a partir de los múltiples archivos generados por la CLI de Angular.

Cree un concatenate.jsarchivo en la carpeta raíz de su proyecto y luego agregue el siguiente contenido:

const fs = require('fs-extra');
const concat = require('concat');
(async function build() {
const files = [
'./dist/<PROJECT_NAME>/runtime.js',
'./dist/<PROJECT_NAME>/polyfills.js',
'./dist/<PROJECT_NAME>/scripts.js',
'./dist/<PROJECT_NAME>/main.js',
]
await fs.ensureDir('elements')
await concat(files, 'elements/analytics-counter.js');
await fs.copyFile('./dist/angular-elements/styles.css', 'elements/styles.css')
await fs.copy('./dist/angular-elements/assets/', 'elements/assets/' )
})()
  • Crea una nueva subcarpeta de elementos dentro de la carpeta del proyecto.
  • Los archivos JS runtime.jspolyfills.jsscripts.jsmain.jsse concatenan en un nuevo archivo analytics-counter.jsdentro de la carpeta de elementos
  • styles.css de la construcción de producción se copia a la carpeta de elementos
  • Los archivos de la carpeta de activos se copian en la carpeta de elementos

Necesita instalar fs-extraconcatdesde npm usando:

npm install fs-extra concat --save-dev

Ahora agreguemos un script a package.json:

{
"scripts": {
...
"build:elements": "ng build --prod --output-hashing none && node concatenate.js"
},
}
}

Puede ejecutar el script usando:

npm run build:elements

Ejemplo usando nuestro elemento personalizado

Ahora que tenemos un archivo que contiene nuestro elemento personalizado. Veamos cómo podemos usar nuestro componente web en otro archivo.

Cree un index.htmlarchivo y luego agregue el siguiente contenido:

<!doctype html>
<html lang="en">
<head>
<title>Angular 10 Elements Demo</title>
</head>
<body>
<analytics-counter></analytics-counter>
<script src="analytics-counter.js"></script>
</body>
</html>

Necesitamos una forma de servir este archivo, por lo que usaremos un servidor HTTP simple: servidor http :

npm install http-server -g

Conclusión

A lo largo de este tutorial por ejemplo, hemos visto cómo usar Angular 10 Elements para construir componentes web estándar a partir de componentes Angular 10.

Publicar un comentario

0 Comentarios