Ferramentas necessárias:
Vamos continuar a implementação da nossa aplicação, abra o terminal na pasta mfe-1
e rode o seguinte comando para instalar a lib do module-federation e configurar o webpack da aplicação.
ng add @angular-architects/module-federation --project mfe-1 --port 4201 --type remote --skip-confirmation
Logo apos digite code . para abrir o vscode e vermos o codigo de nossa aplicação.
Mude os seguintes arquivos dentro do código.
app.component.html
<h1>Aqui e o Mfe-1</h1>
app.module.ts
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [AppComponent],
imports: [CommonModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Detalhe que veja que passamos no import desse module o CommomModule pois esse module da aplicação e um module filho da nossa aplicação host.
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
const MFE1_ROUTES: Routes = [
{
path: '',
component: AppComponent,
},
];
@NgModule({
imports: [RouterModule.forChild(MFE1_ROUTES)],
exports: [RouterModule],
})
export class AppRoutingModule {}
Outro detalhe aqui tambem, passamos no nosso RouterModule como RouterModule.forChild pois essa rota será filha da rota root da nossa aplicação host.
webpack.config.js
const {
shareAll,
withModuleFederationPlugin,
} = require("@angular-architects/module-federation/webpack");
module.exports = withModuleFederationPlugin({
name: "mfe-1",
exposes: {
"./Module": "./src/app/app.module.ts",
},
shared: {
...shareAll({
singleton: true,
strictVersion: true,
requiredVersion: "auto",
},
});
Feito isso digite o seguinte comando no terminal para rodar a aplicação npm run start
e acesse nosso host e clique no link Acesse Mfe-1
e podemos ver nosso mfe sendo acessado via host.
Siga os mesmos passos dentro da pasta onde foi criado o projeto mfe-2, porem para instalar a lib do module-federation e configurar o webpack digite o seguinte comando no terminal.
ng add @angular-architects/module-federation --project mfe-2 --port 4202 --type remote --skip-confirmation
Após isso ajuste os seguintes arquivos para ficar assim.
Mude os seguintes arquivos dentro do código.
app.component.html
<h1>Aqui e o Mfe-2</h1>
app.module.ts
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [AppComponent],
imports: [CommonModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Detalhe que veja que passamos no import desse module o CommomModule pois esse module da aplicação e um module filho da nossa aplicação host.
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
const MFE2_ROUTES: Routes = [
{
path: '',
component: AppComponent,
},
];
@NgModule({
imports: [RouterModule.forChild(MFE2_ROUTES)],
exports: [RouterModule],
})
export class AppRoutingModule {}
Outro detalhe aqui tambem, passamos no nosso RouterModule como RouterModule.forChild pois essa rota será filha da rota root da nossa aplicação host.
webpack.config.js
const {
shareAll,
withModuleFederationPlugin,
} = require("@angular-architects/module-federation/webpack");
module.exports = withModuleFederationPlugin({
name: "mfe-2",
exposes: {
"./Module": "./src/app/app.module.ts",
},
shared: {
...shareAll({
singleton: true,
strictVersion: true,
requiredVersion: "auto",
},
});
Feito isso digite o seguinte comando no terminal para rodar a aplicação npm run start
e acesse nosso host e clique no link Acesse Mfe-2
e podemos ver nosso mfe sendo acessado via host.
Podemos agora a cada clique no link acessar remotamente nossas aplicações mfe-1
e mfe-2
o que nos possibilita, por exemplo fazer alterações e subir um deploy na aplicação mfe-1 sem que isso interfira na aplicação mfe-2 pois e um outro codigo totalmente independente.
E isso ai devs mas um conhecimento passado, deixarei no meu github para quem quiser acessar o projeto
Deixo aqui também meu linkedin para quem quiser me adicionar, grato a todos que leram este artigo e bora aprender galera.
*Observação: * Como um plus numa terceira parte irei me desafiar a construir um componente angular utilizando module-federation para servir como lib de algum componente para se usar nas aplicações, exemplo um botão padrão para usar em todas as aplicações, e compartilho aqui numa terceira parte.
Top comments (10)
Olá, boa tarde! Sabe me informar se para diferentes versões do angular, é obrigatório usar a mesma versão do module federation? Preciso criar uma nova feature no angular 15, porém minha aplicação é toda em angular 13, então, é possível usar no angular 13 o module-federation 14.2.3 e para o angular 15 esta mesma versão ou no angular 15 eu configuro e o webpack se encarrega de acessar o remotyentry?
Tarde maninho, o ideal na minha opinião seria utilizar a versão recomendada para cada versão do angular conforme a doc do module-federation.
npmjs.com/package/@angular-archite...
Pode acontecer ali de ter conflitos em lib que sua aplicação utiliza caso as versões do angular seja diferente ali entre host/mfe. Não cheguei a implementar a mfe com versões diferentes de angular então não consigo te afirmar recomendo que leia essa doc que passei acima, e vlw por ler o artigo.
Muito bom, parabéns.
vlw man
Muito interesse essa abordagem! Tenho duas dúvidas:
Mto bom o artigo, parabéns!
Vlw maninho, vou tentar tirar suas duvidas.
Cada aplicação e deployada de maneira separada gerando uma url de acesso, como um build/deploy de uma aplicação angular comum. Conforme você conferiu no artigo, a aplicação host, através da configuração a ser realizada dentro do webpack, utiliza essa url para acessar a aplicação mfe e renderizar o conteúdo na tela. Em tese rodando em produção host e mfe se tornam uma única aplicação frontend, porem nessa abordagem de microfrontend você tem a facilidade de separar responsabilidades no front, facilitando a manutenção e publicação de novas features.
Exemplo: Posso ter um eccomerce contendo o código de catalogo dentro do host e um mfe de checkout/carrinho integrado a esse host, se precisar realizar alguma manutenção ou adicionar uma nova feature na parte de checkout so vou precisar trabalhar no mfe e realizar o deploy somente para esse cara.
Show! Mto interessante. Sobre como isso funciona por debaixo dos panos, eu podia ver so de clonar e rodar o seu projeto aqui rsrs, mas saberia me dizer como funciona? Imagino q n seja via iframe, ele de alguma forma consegue acessar os bundles do mfe e renderiza, algo do tipo?
Nao e via iframe nao maninho, e via webpack, atraves da lib e possivel o compartilhamentos do module do mfe para o host, nao so de module mas ha tambem a possibilidade de compartilhar components.
Boa tarde brother, parabéns pelo conteúdo! Sabe me dizer se consigo abrir um host dentro de outro host?
agradecido maninho, em tese consegue sim porem tera que transformar um aplicacao em host e adaptar a outra para ser um modulo dessa.