Todos nós estamos familiarizados com componentes: o bloco de construção mais poderoso do ecossistema angular. Os componentes são o local onde o Dom é prestado, os serviços são injetados, as vistas são renderizadas com a detecção de mudanças. Os componentes podem tomar valores como entradas e acionar eventos como saídas. Mas o problema é que este belo bloco até agora só funciona dentro de um ecossistema Angular. Eu gostaria que pudéssemos ajudar a humanidade usando componentes angulares mesmo fora do ecossistema angular.
Sim! A partir do Angular 7, Angular traz a característica “Elemento Angular”. Agora um componente angular pode ser exportado como um componente autônomo da web. Podemos usá-lo exatamente como uma tag HTML típica como div ou span, em qualquer página HTML, CMS ou mesmo dentro de um projeto React ou Vue.js.
Como funciona:
>
Web Component é um padrão web para definir um novo elemento HTML personalizado no navegador. Os navegadores mantêm um registro chamado customElementRegistry . Usando o método CustomElementRegistry.define() podemos registrar uma “dom string” e uma classe que define seu comportamento.
O pacote @angular/elementos do Angular expõe o método createCustomElement que converte o componente angular e suas dependências como uma classe compatível como um componente web.
Currentemente, o padrão web é suportado pelos navegadores All Chrome, Firefox, Safari e Opera. Também podemos torná-lo funcional em outros navegadores usando polifills.
Casos de uso:
Existem pelo menos 3 casos de uso onde podemos fazer uso de componentes angulares exportáveis totalmente funcionais como componentes web:
- Micro front end
- Migração de código de legado
- Plug &Executar componentes web para serviços de terceiros
Micro front end:
Micro serviço, há outro conceito similar chamado micro front end. Em uma arquitetura microfrontend, uma pequena equipe full-stack é responsável por entregar não apenas as APIs, mas também seus correspondentes componentes front-end. Por exemplo, a “equipe de produtos” irá criar APIs de produtos e todas as visualizações relacionadas aos produtos usadas em diferentes páginas de categoria, página de detalhes do produto, carrinho & página de checkout. Em um caso como este, toda a equipe irá fornecer componentes web diferentes e uma equipe de front-end irá apenas colar esses componentes em páginas diferentes.
Migration:
Projetos escritos em Angular 1.x, Migration to Angular sempre foi um desafio. Não há uma atualização mágica fácil como a de um ng update. O mesmo é verdade para um caso em que alguém quer migrar seu projeto para Angular de React or Vue. Os componentes da Web são os mais adequados aqui. Eles podem gradualmente converter seus componentes/controladores existentes para componentes da web Angular e substituí-los a partir do sistema existente. Uma vez convertidos todos os componentes/controladores, eles podem simplesmente substituir o sistema antigo com o último angular.
Terceiros serviços:
Fornecedores de serviços podem fornecer plug & reproduzir componentes web para serem colados no site do cliente sem necessidade de qualquer outra engenharia.
Então parece ser promissor se nós pudermos realmente enviar um componente angular como um componente web. Então vamos sujar as nossas mãos com a codificação actual.
Examplo projecto:
Aqui está um exemplo de código que escrevemos um componente web com a minha lista. FYI você pode verificar o código inteiro aqui em Github.
Passo 1: Escreva o componente e serviço
- Um componente TodoList para mostrar uma lista de todos.
- Um TodoService para ir buscar todo o componente JSON API.
- O componente TodoList terá “name” como entrada.
- O componente TodoList irá disparar o evento onTodoComplete quando qualquer todo será marcado como feito.
>
Passo 2: Ajustar módulos app.modules para exportar o componente todo-list
- Desde que o projeto será usado apenas para exportar módulos angulares como um componente web não precisamos de bootstrapping através do componente app.
- Temos que declarar nosso componente todo-list exportável como componente de entrada.
- Instalar @angular/elements package.
- Inside ngDoBootstrap hook we use createCustomElement method to compile our TodoList component as a standard web component.
- TodoList component has dependency on TodoService. Como ele será usado fora do ecossistema angular, precisamos passar o Injetor de Dependência manualmente para que ele possa carregar as dependências.
Passo 3: Empacotamento
- Agora se executarmos o build – os arquivos serão gerados na pasta “dist”. Já que queremos usar isso em outro ecossistema para concatenar melhor os arquivos como um arquivo de saída. Então adicione estes comandos em package.json script section:-
"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",
- Agora se rodarmos o comando npm run build dois arquivos separados output-es5.js e output-es2015.js serão gerados dentro da pasta de saída.
Passo 4: Use como um componente web
- Agora tudo está definido. Podemos usar estes arquivos de saída como nosso componente web independente assim:-
- Se rodarmos esta página HTML, poderemos ver a lista de todos os arquivos que serão buscados e mostrados.
- Passamos o nome como entrada, podemos ver o nome dentro do componente web – o que significa que a entrada do componente, a detecção de alterações estão a funcionar!
- Após verificarmos/desmarcarmos qualquer todo, activado por eventos e todos os dados serão registados na consola. Então o evento de saída também está funcionando!
Então, assim, podemos usar um componente angular em qualquer outro projeto. Você mesmo pode tentar clonar o código de Github.
Ref:
- https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
- https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry
- https://angular.io/guide/elements