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 (4)
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