Crie um portal para microfrontends usando Angular e AWS Amplify Module Federation

No AngularCLI, insira o seguinte comando:

ng new shell --routing

Digite o comando a seguir para navegar até a pasta do projeto:

cd shell

Nota: A estrutura de pastas e projetos para os aplicativos shell e micro-frontend pode ser totalmente independente. Eles podem ser tratados como aplicativos angulares independentes.

Abra o arquivo environment.ts.

Adicione mfe1URL: 'http://localhost:5000' ao environment objeto:

export const environment = {
  production: false,
  mfe1URL: 'http://localhost:5000',
};

Salve e feche o arquivo environment.ts.

Abra o arquivo app-routing.module.ts.

No AngularCLI, insira o seguinte comando para importar o loadRemoteModule módulo do plug-in @angular -architects/module-federation:

import { loadRemoteModule } from '@angular-architects/module-federation';

Defina a rota padrão da seguinte forma:

{
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

Defina a rota para o micro-frontend:

{
    path: 'mfe1',
    loadChildren: () => loadRemoteModule({
        type: 'module',
        remoteEntry: `${environment.mfe1URL}/remoteEntry.js`,
        exposedModule: './Module'
      })
      .then(m => m.Mfe1Module)
  },

Salve e feche o arquivo app-routing.module.ts.

Na src pasta, crie um novo arquivo chamado decl.d.ts.

Abra o arquivo decl.d.ts.

Adicione o seguinte ao arquivo:

declare module 'mfe1/Module';

Salve e feche o arquivo decl.d.ts.

Abra o arquivo main.ts.

Substitua o conteúdo pelo seguinte:

import { loadRemoteEntry } from '@angular-architects/module-federation';
 
Promise.all([
    loadRemoteEntry(`${environment.mfe1URL}/remoteEntry.js`, 'mfe1'),
])
.catch(err => console.error('Error loading remote entries', err))
.then(() => import('./bootstrap'))
.catch(err => console.error(err));

Salve e feche o arquivo main.ts.

Abra o arquivo app.component.html.

Substitua o conteúdo pelo seguinte:

<h1>Shell application is running!</h1>
<router-outlet></router-outlet>

Salve e feche o arquivo app.component.html.

No AngularCLI, insira o seguinte comando:

ng new mfe1 --routing

Digite o comando a seguir para navegar até a pasta do projeto:

cd mfe1

Abra o arquivo mfe-routing.module.ts.

Defina a rota padrão da seguinte forma:

{
    path: '',
    component: Mfe1Component
  },

Salve e feche o arquivo mfe-routing.module.ts.

Abra o arquivo app-routing.module.ts.

Defina a rota padrão da seguinte forma:

{
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

Adicione a seguinte mfe1 rota:

{
    path: 'mfe1',
    loadChildren: () => 
      import('./mfe1/mfe1.module').then((m) => m.Mfe1Module),
  },

Salve e feche o arquivo app-routing.module.ts.

Abra o arquivo webpack.config.js.

Edite a For remotes seção para que corresponda ao seguinte:

// For remotes (please adjust)
    name: "mfe1",
    filename: "remoteEntry.js",
    exposes: {
        './Module': './src/app/mfe1/mfe1.module.ts',
    },

Na shared seção, adicione todas as dependências que o mfe1 aplicativo compartilha com o aplicativo shell:

shared: share({
        "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    
        ...sharedMappings.getDescriptors()
    })

Salve e feche o arquivo webpack.config.js.

Abra o arquivo app.component.html.

Substitua o conteúdo pelo seguinte:

<router-outlet></router-outlet>

Salve e feche o arquivo app.component.html.

Digite o comando a seguir para iniciar o mfe1 aplicativo:

npm start

Em um navegador da web, acessehttp://localhost:5000.

Verifique se o micro-frontend pode ser executado de forma independente. O mfe1 aplicativo deve ser renderizado corretamente sem erros.

Digite o comando a seguir para iniciar o aplicativo shell:

npm start

Em um navegador da web, acessehttp://localhost:4200/mfe1.

Verifique se o mfe1 microfrontend está incorporado no aplicativo shell. O aplicativo do portal deve ser renderizado adequadamente, sem erros, e o mfe1 aplicativo deve ser incorporado a ele.

Abra o arquivo error-page.component.html.

Substitua o conteúdo pelo seguinte:

<p>Sorry, this page is not available.</p>

Salve e feche o arquivo error-page.component.html.

Abra o arquivo error-page-routing.module.ts.

Defina a rota padrão da seguinte forma:

{
    path: '',
    component: ErrorPageComponent
  },

Salve e feche o error-page-routingarquivo .module.ts.

Abra o arquivo app-routing.module.ts.

Crie a seguinte função:

function loadMFE(url: string) {
    return loadRemoteModule({
        type: 'module',
        remoteEntry: `${url}/remoteEntry.js`,
        exposedModule: './Module'
    })
    .then(m => m.Mfe1Module)
    .catch(
        () => import('./error-page/error-page.module').then(m => m.ErrorPageModule)
    );
}

Modifique a mfe1 rota para ser a seguinte:

{
    path: 'mfe1',
    loadChildren: () => loadMFE(environment.mfe1URL)
},

Salve e feche o arquivo app-routing.module.ts.

Se ainda não estiver em execução, digite o seguinte comando para iniciar o aplicativo shell:

npm start

Em um navegador da web, acessehttp://localhost:4200/mfe1.

Verifique se a página de erro foi renderizada. Você deve ver o seguinte texto:

Sorry, this page is not available.

No AmplifyCLI, navegue até a pasta raiz do aplicativo de microfront-end.

Digite o seguinte comando para inicializar o Amplify:

amplify init

Quando você for solicitado a inserir um nome para seu projeto do Amplify, pressione Enter. Isso reutiliza o nome do arquivo package.json.

Quando você for solicitado a inicializar o projeto com a configuração acima, insira. Yes

Quando você for solicitado a selecionar um método de autenticação, escolhaAWS Profile.

Selecione o perfil que você deseja usar.

Aguarde até que o Amplify inicialize o projeto. Quando esse processo for concluído, você receberá uma mensagem de confirmação no terminal.

Insira o comando a seguir para adicionar uma categoria de hospedagem do Amplify ao micro-frontend:

amplify add hosting

Quando você for solicitado a selecionar o módulo do plug-in, escolhaHosting with Amplify Console.

Quando você for solicitado a escolher um tipo, escolhaManual deployment.

Instale as dependências do npm do projeto digitando o seguinte comando:

npm install

Publique o aplicativo no console do Amplify digitando o seguinte comando:

amplify publish -y

Quando a publicação estiver concluída, o Amplify retornará o URL microfrontend.

Copie URL o. Você precisa desse valor para atualizar o aplicativo shell.

Na pasta src/app/environments, abra o arquivo environments.prod.ts.

Substitua o mfe1URL valor pelo URL do microfrontend implantado:

export const environment = {  
   production: true, 
   mfe1URL: 'https://<env>.<Amplify-app-ID>.amplifyapp.com'
 };

Salve e feche o arquivo environments.prod.ts.

No AmplifyCLI, navegue até a pasta raiz do aplicativo shell.

Digite o seguinte comando para inicializar o Amplify:

amplify init

Quando você for solicitado a inserir um nome para seu projeto do Amplify, pressione Enter. Isso reutiliza o nome do arquivo package.json.

Quando você for solicitado a inicializar o projeto com a configuração acima, insira. Yes

Quando você for solicitado a selecionar um método de autenticação, escolhaAWS Profile.

Selecione o perfil que você deseja usar.

Aguarde até que o Amplify inicialize o projeto. Quando esse processo for concluído, você receberá uma mensagem de confirmação no terminal.

Adicione uma categoria de hospedagem Amplify ao aplicativo shell:

amplify add hosting

Quando você for solicitado a selecionar o módulo do plug-in, escolhaHosting with Amplify Console.

Quando você for solicitado a escolher um tipo, escolhaManual deployment.

Instale as dependências do npm do projeto digitando o seguinte comando:

npm install

Publique o aplicativo shell no console do Amplify digitando o seguinte comando:

amplify publish -y

Quando a publicação estiver concluída, o Amplify retorna o URL do aplicativo shell implantado.

Anote o URL para o aplicativo shell.

No AmplifyCLI, navegue até a pasta raiz do micro-frontend.

Digite o comando :

amplify configure hosting

Quando você for solicitado a definir configurações personalizadas, digiteY.

Faça login no e AWS Management Console, em seguida, abra o console do Amplify.

Escolha o micro-frontend.

No painel de navegação, escolha Hospedagem e, em seguida, escolha Cabeçalhos personalizados.

Selecione a opção Editar.

Na janela Editar cabeçalhos personalizados, digite o seguinte:

customHeaders:
  - pattern: '*.js'
    headers:
      - key: Access-Control-Allow-Origin
        value: '*'
      - key: Access-Control-Allow-Methods
        value: 'GET, OPTIONS'
      - key: Access-Control-Allow-Headers
        value: '*'

Escolha Salvar.

Reimplante o microfrontend para aplicar os novos cabeçalhos personalizados.

No AmplifyCLI, navegue até a pasta raiz do aplicativo shell.

Digite o comando :

amplify configure hosting

Quando você for solicitado a definir configurações personalizadas, digiteY.

Abra o console do Amplify.

Escolha o aplicativo shell.

No painel de navegação, escolha Hospedagem e, em seguida, escolha Regravações e redirecionamentos.

Na página Regravações e redirecionamentos, escolha Gerenciar redirecionamentos.

Escolha Abrir editor de texto.

No JSON editor, insira o seguinte redirecionamento:

[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    }
]

Escolha Salvar.

Em um navegador da Web, insira o URL do aplicativo shell implantado.

Verifique se o aplicativo shell e o microfrontend estão carregados corretamente.

Faça login no e AWS Management Console, em seguida, abra o console do Amplify.

Escolha o micro-frontend.

No painel de navegação, escolha Configurações do aplicativo e, em seguida, escolha Configurações gerais.

Escolha Excluir aplicativo.

Na janela de confirmaçãodelete, insira e escolha Excluir aplicativo.

Repita essas etapas para excluir o aplicativo shell.