Elemento Angular: Usare i componenti Angular al di fuori di Angular

Tutti conosciamo i componenti: il blocco di costruzione più potente nell’ecosistema Angular. I componenti sono dove il Dom viene reso, i servizi vengono iniettati, le viste vengono ri-renderizzate con il rilevamento dei cambiamenti. I componenti possono prendere valori come input e innescare eventi come output. Ma il problema è che questo bel blocco finora funziona solo all’interno di un ecosistema Angular. Vorrei che potessimo aiutare l’umanità utilizzando i componenti angolari anche al di fuori dell’ecosistema angolare.

Sì! Da Angular 7, Angular porta la caratteristica “Angular Element”. Ora un componente angolare può essere esportato come un componente web autonomo. Possiamo usarlo esattamente come un tipico tag HTML come div o span, in qualsiasi pagina HTML, CMS o anche dentro un progetto React o Vue.js.

Come funziona:

Web Component è uno standard web per definire un nuovo elemento HTML personalizzato nel browser. I browser mantengono un registro chiamato customElementRegistry . Usando il metodo CustomElementRegistry.define() possiamo registrare una “stringa dom” e una classe che definisce il suo comportamento.

Il pacchetto @angular/elements di Angular espone il metodo createCustomElement che converte il componente angolare e le sue dipendenze in una classe compatibile come componente web.

Al momento lo standard web è supportato da tutti i browser Chrome, Firefox, Safari e Opera. Possiamo anche renderlo funzionante in altri browser usando i polyfill.

Casi d’uso:

Ci sono almeno 3 casi d’uso in cui possiamo fare uso di componenti angolari completamente funzionali esportabili come componenti web:

Micro front end
Migrazione del codice Legacy
Plug & play componenti web per servizi di terze parti

Micro front end:

Come i micro servizi, c’è un altro concetto simile chiamato micro-frontend. In un’architettura micro-frontend, un piccolo team full-stack è responsabile di fornire non solo le API ma anche i loro corrispondenti componenti front-end. Per esempio, il “team dei prodotti” creerà le API dei prodotti e tutte le viste relative ai prodotti utilizzate nelle diverse pagine di categoria, nella pagina dei dettagli dei prodotti, nella pagina di checkout del carrello &. In un caso come questo, tutti i team forniranno diversi componenti web e un team front-end incollerà solo quei componenti insieme in diverse pagine.

Migrazione:

I progetti scritti in Angular 1.x, la migrazione ad Angular è sempre stata una sfida. Non c’è un facile incantesimo magico come l’aggiornamento di ng. Lo stesso vale per un caso in cui qualcuno vuole migrare il proprio progetto ad Angular da React o Vue. I componenti web sono la soluzione migliore in questo caso. Possono convertire gradualmente i loro componenti/controllori esistenti in componenti web Angular e sostituirli dal sistema esistente. Una volta che tutti i componenti/controllori sono convertiti possono semplicemente sostituire il sistema legacy con l’ultimo angolare.

Servizi di terze parti:

I fornitori di servizi possono fornire componenti web plug & play da incollare nel sito web del loro cliente senza ulteriore ingegneria necessaria.

Quindi sembra che sia promettente se possiamo effettivamente spedire un componente angolare come un componente web. Quindi sporchiamoci le mani con la codifica vera e propria.

Progetto di esempio:

Qui c’è un codice di esempio in cui scriviamo un componente web my-todo-list. Per tua informazione puoi controllare l’intero codice qui in Github.

Step 1: Scrivere il componente e il servizio

Un componente TodoList per mostrare una lista di todo.
Un TodoService per recuperare i todo da un placeholder JSON API.
Il componente TodoList prenderà “name” come input.
Il componente TodoList attiverà l’evento onTodoComplete quando un todo sarà segnato come fatto.

https://github.com/asad-mlbd/example-ng-element/blob/master/src/app/todo-list/todo-list.component.ts

https://github.com/asad-mlbd/example-ng-element/blob/master/src/app/todo-list/todo.service.ts

Step 2: Tweak app.modules per esportare il componente todo-list

Siccome il progetto sarà usato solo per esportare moduli angolari come componente web non abbiamo bisogno del bootstrapping attraverso il componente app.
Dobbiamo dichiarare il nostro componente todo-list esportabile come componente di ingresso.
Installiamo il pacchetto @angular/elements.
Inside ngDoBootstrap hook usiamo il metodo createCustomElement per compilare il nostro componente TodoList come un componente web standard.
Il componente TodoList ha dipendenza da TodoService. Dal momento che sarà utilizzato al di fuori dell’ecosistema angolare, abbiamo bisogno di passare il Dependency Injector manualmente in modo che possa caricare le dipendenze.

https://github.com/asad-mlbd/example-ng-element/blob/master/src/app/app.module.ts

Step 3: Bundling

Ora se eseguiamo build – i file saranno generati nella cartella “dist”. Dato che vogliamo usare questo in un altro ecosistema, è meglio concatenare i file in un unico file di output. Quindi aggiungete questi comandi nella sezione script package.json:-


"concat-es5": "concat -o output/output-es5.js ./dist/example-ng-element/runtime-es5.js ./dist/example-ng-element/polyfills-es5.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es5.js","concat-es2015": "concat -o output/output-es2015.js ./dist/example-ng-element/runtime-es2015.js ./dist/example-ng-element/polyfills-es2015.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es2015.js","concat": "npm run concat-es5 && npm run concat-es2015","build": "ng build --prod --output-hashing=none && npm run concat",

Ora se eseguiamo il comando npm run build verranno generati due file separati output-es5.js e output-es2015.js nella cartella di output.

Passo 4: Utilizzare come componente web

Ora tutto è pronto. Possiamo usare questi file di output come nostro componente web standalone come questo:-

https://github.com/asad-mlbd/example-ng-element/blob/master/output/index.html

Se eseguiamo questa pagina HTML, possiamo vedere che l’elenco delle cose da fare verrà recuperato e mostrato.
Abbiamo passato il nome come input, possiamo vedere il nome all’interno del componente web – il che significa che l’input del componente, il rilevamento dei cambiamenti sta funzionando!
Una volta che controlliamo/deselezioniamo qualsiasi todo, l’evento viene attivato e i dati del todo vengono registrati nella console. Quindi anche l’evento di uscita funziona!