Los componentes web son una forma de crear elementos personalizados que funcionan junto con los elementos HTML estándar. El objetivo de los navegadores web, como Google y Mozilla, es proporcionar una forma estandarizada para que los desarrolladores creen elementos personalizados con cualquier marco. La idea es que puedes poner algo como <app-dashboard></app-dashboard> junto a elementos estándar, como <h1> y <ul>, y simplemente funcionará.

Con Angular, ya puede hacerlo a través de plantillas donde los selectores de componentes se utilizan para colocar el componente Angular en el DOM.

En este artículo, le mostraré cómo usar Angular para crear un formulario de suscripción a un boletín que se pueda insertar y que use Componentes Web. Puedes ver el código terminado en Github.

Primero, crearemos una nueva aplicación Angular y un widget simple. Después de eso, nos aseguraremos de que el widget funcione con el proceso de compilación angular habitual.

Comenzamos instalando la CLI Angular a nivel mundial:

npm install -g @angular/cli

Creando el proyecto angular

Luego, creamos un nuevo espacio de trabajo angular que contendrá nuestra aplicación:

ng new angular-web-component --routing=false --skip-tests=true --style=css

No necesitamos ninguna ruta para nuestra demostración. También vamos a omitir la generación de pruebas. Para diseñar el componente, vamos a mantener las cosas simples y usar CSS (las alternativas que Angular permite son SCSS, Sass, Less y Stylus).

Crear el componente de formulario de suscripción al boletín

Agregaremos un nuevo componente que convertiremos en un widget integrable. Ejecute el siguiente comando en el directorio raíz del proyecto:

ng generate component info-box

Esto generará el código TypeScript del componente, la plantilla HTML y la hoja de estilo CSS.

Vamos a cambiar el selector del "cuadro de información de la aplicación" generado al "cuadro de información", y agregaremos dos atributos de entrada al código del componente del cuadro de información:

// src/app/info-box/info-box.component.ts
import { Component, Input } from '@angular/core'; @Component({ selector: 'info-box', templateUrl: './info-box.component.html', styleUrls: ['./info-box.component.css']
})
export class InfoBoxComponent implements OnInit { @Input() signupTitle = 'Sign up for our newsletter'; @Input() thankyouMessage = 'Thanks!'; formData = { name: '', email: '' }; formSubmitted = false; constructor() { } onSubmit() { this.formSubmitted = true; }
}

Luego, actualizaremos la plantilla para mostrar un formulario de registro y un mensaje de agradecimiento después de que el usuario se haya suscrito al boletín. El mensaje de agradecimiento y el título de registro son atributos de entrada para el componente, que podremos modificar cada vez que incorporemos el componente como un widget.

<!-- src/app/info-box/info-box.component.html -->
<div *ngIf="formSubmitted; else formEntry"> <h4>{{ thankyouMessage }}</h4> <p>{{ formData.name }}, our newsletter is on its way to your inbox!</p>
</div>
<ng-template #formEntry> <h4>{{ signupTitle }}</h4> <p>Get cool news and tips on the latest blockchain Angular-powered AI 5G stuff</p> <form (ngSubmit)="onSubmit()" #emailForm="ngForm"> <div> <label>Name:</label> <input type="text" name="name" [(ngModel)]="formData.name"> </div> <div> <label>Email:</label> <input type="text" name="email" [(ngModel)]="formData.email"> </div> <div> <button type="submit" [disabled]="!emailForm.form.valid">Sign up!</button> </div> </form>
</ng-template>

La lógica es la lógica básica de formularios basada en plantillas que Angular proporciona a través de FormsModule.

Vamos a usar el componente de cuadro de información en la plantilla dos veces: una vez con valores predeterminados donde no se proporcionan atributos de entrada, y otra vez donde proporcionamos el título de registro y el mensaje de agradecimiento:

<!-- src/app/app.component.html →
<h1>Welcome to Angular Web Component Example</h1>
<p><info-box></info-box></p>
<p><info-box signupTitle="Amazing newsletter!" thankyouMessage="Thanks for signing up!"></info-box></p>

Construyendo el proyecto

Ahora podemos construir y servir el proyecto localmente usando ng serve. Ese comando compilará el código, las plantillas y las hojas de estilo, y las servirá en un servidor de desarrollo web local. Puede abrir su navegador en localhost: 4200 para ver la aplicación Angular.

Hacer una compilación para producción es tan fácil como ejecutar el comando ng build --prod

Configurar Angular para componentes web

Ahora que tenemos la aplicación funcionando, podemos configurarla para construir un componente web. Esto nos permitirá incrustar el componente en un sitio estático, como los generados por los generadores de sitios estáticos, o incrustar el widget en un sitio web de WordPress o Shopify.

Agregar las bibliotecas necesarias

Actualmente, solo Firefox (versión 63+), Chrome y Opera admiten componentes web. Para admitir todos los demás navegadores, tendremos que agregar un biblioteca de polyfill llamada "document-register-element". Esto agrega el función registerElement al objeto del documento global para que podamos usar componentes web con angular.

Instale el paquete document-register-element con este comando:

npm install --save document-register-element@">=1.7.2 <=1.8.1"

Nota: debido a un error en la última versión de la biblioteca, ese es el rango de versiones del paquete que funcionará. Debe actualizar el package.json para incluir el rango de versión específico.

También necesitamos la biblioteca @ angular / elements, ya que proporciona la función angular que usa el polyfill para representar componentes angulares:

ng add @angular/elements

Actualización del archivo index.html y uso del componente web

Ahora vamos a actualizar index.html utilizar el componente angular con la etiqueta "cuadro de información", que reemplaza la "raíz de la aplicación". Tenga en cuenta que, en este punto, también puede eliminar por completo el componente de la aplicación, ya que el componente del cuadro de información se puede representar directamente en el index.html archivo.

<!-- src/index.html →
<!doctype html>
<html lang="en">
<head> <meta charset="utf-8"> <title>AngularWebComponent</title> <base href="/es/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body> <p><info-box></info-box></p> <p><info-box signupTitle="Amazing newsletter!" thankyouMessage="Thanks for signing up!"></info-box></p>
</body>
</html>

Los atributos de un componente son importantes, pero lo son aún más para los componentes web, ya que son la única forma en que se puede configurar el componente. Si necesita mostrar datos más complejos, puede pasar una cadena JSON o una URL. También puede descargar datos JSON de configuración adicionales utilizando Angular HttpClient.

Ajuste del proceso de construcción

Si ejecuta el servidor web de desarrollo Angular ahora, no mostrará nada y mostrará un error similar a este:

Error: "The selector "app-root" did not match any elements"

Esto significa que el componente raíz de la aplicación ya no está en el index.html. Esto se debe a que todavía tenemos AppComponent como parte de la configuración de arranque del módulo de la aplicación.

Para solucionar esto, primero necesitaremos eliminar completamente el componente de la aplicación y su plantilla y estilo:

rm src/app/app.component.*

A continuación, tenemos que actualizar app.module.ts para eliminar el componente de la aplicación.
También necesitamos agregar el componente de cuadro de información como un componente de entrada. La diferencia es que los componentes de bootstrap se procesan tan pronto como se carga la aplicación Angular, mientras que los componentes de entrada no se procesan de inmediato.

Vamos a usar el constructor del módulo de la aplicación para inyectar el componente del cuadro de información y usar el polyfill registerElement para definir nuestro componente web como un elemento personalizado:

// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements'; import { InfoBoxComponent } from './info-box/info-box.component'; @NgModule({ declarations: [InfoBoxComponent], imports: [BrowserModule, FormsModule], providers: [], entryComponents: [InfoBoxComponent]
})
export class AppModule { constructor(injector: Injector) { const el = createCustomElement(InfoBoxComponent, { injector }); customElements.define('info-box', el); } ngDoBootstrap() {}
} 

El código del constructor es el reemplazo de la configuración de arranque. Observe también que especificamos CUSTOM_ELEMENTS_SCHEMA, que es proporcionado por @ angular / elements. El método ngDoBootstrap también es necesario para iniciar el proceso de renderizado angular.

Construyendo el proyecto

La construcción de un proyecto de componente web es similar a lo que hacemos para un proyecto angular típico. Corremos ng serve para el desarrollo local y ng build --prod. La principal diferencia es que el componente de la aplicación ya no existe y es el index.html que representa nuestro componente web incrustable.

Así que construyamos el proyecto:

ng build --prod

Usando el componente en otro proyecto

Ahora que tenemos una compilación de producción de nuestro componente Angular, podemos usarlo como un componente web en otro proyecto.

Comenzamos nuestro nuevo proyecto independiente creando un nuevo example directorio en el nivel superior del proyecto. En este directorio, vamos a tener un index.html archivo y va a contener el info-box.js Archivo JavaScript que produjimos, junto con el info-box.css hoja de estilo

Copiemos la hoja de estilo:

cp dist/angular-web-component/styles.*.css example/info-box.css

Angular construye múltiples archivos JavaScript y un archivo de estilo. Necesitamos que el código JavaScript esté en un archivo para que pueda integrarse más fácilmente en otro proyecto.

La forma en que hacemos esto es simplemente concatenando los archivos JavaScript del dist directorio:

cat dist/angular-web-component/runtime-es2015*.js dist/angular-web-component/polyfills-es2015*.js dist/angular-web-component/main-es2015*.js > example/info-box.js

Para facilitar el proceso de compilación, podemos actualizar el scripts in package.json:

"scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod && cat dist/angular-web-component/runtime-es2015*.js dist/angular-web-component/polyfills-es2015*.js dist/angular-web-component/main-es5*.js > example/info-box.js && cp dist/angular-web-component/styles.*.css example/info-box.css", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" },

Entonces podemos correr npm run-script build.

Vamos a crear un básico index.html que utiliza una versión precompilada de Bootstrap para diseñar.

En este nuevo proyecto tendremos los siguientes archivos:

• index.html
• cuadro de información.js
• cuadro-info.css

Para el index.html, este es el código HTML que tendremos:

<!-- example/index.html →
<!DOCTYPE html>
<html>
<head> <title>Example Website with Embedded Angular Web Component</title> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="info-box.js"></script> <link rel="stylesheet" href="info-box.css">
</head>
<body> <div class="jumbotron"> <h1 class="display-4">Hello, world!</h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <hr class="my-4"> <p><info-box></info-box></p> <p><info-box signup-title="Amazing newsletter!" thankyou-message="Thanks for signing up!"></info-box></p> <p>It uses utility classes for typography and spacing to space content out within the larger container.</p> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </div>
</body>
</html>

Incluye el marco CSS Bootstrap y puede ver que debajo del encabezado y encima del botón, tenemos el info-box Componente angular embebido. Observe que los atributos dados a info-box use guiones en lugar del caso kebab, signup-title en lugar de signupTitle.

Para ver que esto funcione, tenemos que instalar http-server, que es un servidor web básico de configuración cero y lo ejecuta desde example directorio:

npm install --save-dev http-server
npx http-server example

Abra el navegador en http: // localhost: 8080 y verá aparecer la página de ejemplo.

Conclusión

Los componentes web son una excelente manera de crear widgets reutilizables que pueden integrarse en otras aplicaciones web o sitios web. Si desea más interactividad en su sitio web generado estáticamente, o necesita un widget interactivo y atractivo en su sitio de WordPress, ya no está limitado por el proceso de compilación, el idioma o el marco que estaba utilizando el proyecto.

Puede usar Angular con TypeScript y crear widgets bien diseñados que se puedan usar en cualquier lugar. Mira el código de este tutorial sobre Github.

Source: https://www.codementor.io/blog/angular-web-components-8e4n0r0zw7