Cree un portal para microinterfaces mediante Angular AWS Amplify y Module Federation

En la CLI de Angular, introduzca el comando siguiente:

ng new shell --routing

Introduzca el siguiente comando para navegar a la carpeta del proyecto:

cd shell

Abra el archivo environment.ts.

Añada mfe1URL: 'http://localhost:5000' al objeto environment:

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

Guarde y cierre el archivo environment.ts.

Abra el archivo app-routing.module.ts.

En la CLI de Angular, introduzca el siguiente comando para importar el módulo loadRemoteModule del complemento @angular-architects/module-federation:

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

Establezca la ruta predeterminada de la siguiente manera:

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

Establezca la ruta para el micro-frontend:

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

Guarde y cierre el archivo app-routing.module.ts.

En la carpeta src, cree un archivo nuevo llamado decl.d.ts.

Abra el archivo decl.d.ts.

Agregue lo siguiente al archivo:

declare module 'mfe1/Module';

Guarde y cierre el archivo decl.d.ts.

Abra el archivo main.ts.

Sustituya el contenido por lo siguiente:

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));

Guarde y cierre el archivo main.ts.

Abra el archivo app.component.html.

Sustituya el contenido por lo siguiente:

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

Guarde y cierre el archivo app.component.html.

En la CLI de Angular, introduzca el comando siguiente:

ng new mfe1 --routing

Introduzca el siguiente comando para navegar a la carpeta del proyecto:

cd mfe1

Abra el archivo mfe-routing.module.ts.

Establezca la ruta predeterminada de la siguiente manera:

{
    path: '',
    component: Mfe1Component
  },

Guarde y cierre el archivo mfe-routing.module.ts.

Abra el archivo app-routing.module.ts.

Establezca la ruta predeterminada de la siguiente manera:

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

Agregue la siguiente ruta mfe1:

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

Guarde y cierre el archivo app-routing.module.ts.

Abra el archivo webpack.config.js.

Edite la sección For remotes para que coincida con lo siguiente:

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

En la sección shared, añada las dependencias que la aplicación mfe1 comparta con la aplicación de intérprete de comandos:

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

Guarde y cierre el archivo webpack.config.js.

Abra el archivo app.component.html.

Sustituya el contenido por lo siguiente:

<router-outlet></router-outlet>

Guarde y cierre el archivo app.component.html.

Escriba el siguiente comando para iniciar la aplicación mfe1:

npm start

En un navegador web, acceda a http://localhost:5000.

Compruebe que el micro-frontend se puede ejecutar de forma independiente. La aplicación mfe1 debería renderizarse correctamente y sin errores.

Escriba los siguientes comandos para iniciar la aplicación de intérprete de comandos:

npm start

En un navegador web, acceda a http://localhost:4200/mfe1.

Compruebe que el micro-frontend mfe1 esté integrado en la aplicación de intérprete de comandos. La aplicación del portal debe renderizarse correctamente sin errores y la aplicación mfe1 debe estar incrustada en ella.

Abra el archivo error-page.component.html

Sustituya el contenido por lo siguiente:

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

Guarde y cierre el archivo error-page.component.html.

Abra el archivo error-page-routing.module.ts.

Establezca la ruta predeterminada de la siguiente manera:

{
    path: '',
    component: ErrorPageComponent
  },

Guarde y cierre el archivo .module.ts. error-page-routing

Abra el archivo app-routing.module.ts.

Cree la siguiente función:

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)
    );
}

Modificar la ruta mfe1 para que sea como la siguiente:

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

Guarde y cierre el archivo app-routing.module.ts.

Si aún no se está ejecutando, ejecute el siguiente comando para iniciar la aplicación de intérprete de comandos:

npm start

En un navegador web, acceda a http://localhost:4200/mfe1.

Compruebe que esté representada la página de error. Debería ver el texto siguiente:

Sorry, this page is not available.

En la CLI de Amplify, vaya hasta la carpeta raíz de la aplicación de micro-frontend.

Introduzca el comando siguiente para inicializar Amplify:

amplify init

Cuando se le pida que introduzca un nombre para su proyecto de Amplify, pulse Intro. De esta forma, se reutiliza el nombre del archivo package.json.

Cuando se le pida que inicialice el proyecto con la configuración anterior, introduzca Yes.

Cuando se le pida que seleccione un método de autenticación, elija AWS Profile.

Seleccione el perfil que desea usar.

Espere a que Amplify inicie el proyecto. Cuando se complete este proceso, recibirá un mensaje de confirmación en el terminal.

Introduzca el siguiente comando para agregar una categoría de alojamiento de Amplify al micro-frontend:

amplify add hosting

Cuando se le pida que seleccione el módulo del complemento, elija Hosting with Amplify Console.

Cuando se le pida que seleccione un tipo, elija Manual deployment.

Para instalar las dependencias de npm del proyecto, introduzca el comando siguiente:

npm install

Publique la aplicación en la consola de Amplify; para ello, ejecute el siguiente comando:

amplify publish -y

Cuando se completa la publicación, Amplify devuelve la URL del micro-frontend.

Copie la dirección URL. Necesitará este valor para actualizar la aplicación de intérprete de comandos.

En la src/app/environmentscarpeta, abra el archivo environments.prod.ts.

Sustituya el valor mfe1URL por la URL del micro-frontend implementado:

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

Guarde y cierre el archivo environments.prod.ts.

En la CLI de Amplify, vaya hasta la carpeta raíz de la aplicación de intérprete de comandos.

Introduzca el comando siguiente para inicializar Amplify:

amplify init

Cuando se le pida que introduzca un nombre para su proyecto de Amplify, pulse Intro. De esta forma, se reutiliza el nombre del archivo package.json.

Cuando se le pida que inicialice el proyecto con la configuración anterior, introduzca Yes.

Cuando se le pida que seleccione un método de autenticación, elija AWS Profile.

Seleccione el perfil que desea usar.

Espere a que Amplify inicie el proyecto. Cuando se complete este proceso, recibirá un mensaje de confirmación en el terminal.

Añada una categoría de alojamiento de Amplify a la aplicación de intérprete de comandos:

amplify add hosting

Cuando se le pida que seleccione el módulo del complemento, elija Hosting with Amplify Console.

Cuando se le pida que seleccione un tipo, elija Manual deployment.

Instale las dependencias de npm del proyecto con el siguiente comando:

npm install

Publique la aplicación de intérprete de comandos en la consola de Amplify; para ello, ejecute el siguiente comando:

amplify publish -y

Cuando se completa la publicación, Amplify devuelve la URL de la aplicación de intérprete de comandos implementada.

Anote la URL de la aplicación de intérprete de comandos.

En la CLI de Amplify, vaya hasta la carpeta raíz del micro-frontend.

Introduzca el siguiente comando:

amplify configure hosting

Cuando se le pida configuración personalizada, introduzca Y.

Inicia sesión en la consola de Amplify y Consola de administración de AWS, a continuación, ábrela.

Elija el micro-frontend.

En el panel de navegación, seleccione Alojamiento y, a continuación, seleccione Encabezados personalizados.

Seleccione Editar.

En la ventana Editar encabezados personalizados, introduzca lo siguiente:

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

Seleccione Save.

Vuelva a implementar el micro-frontend para aplicar los nuevos encabezados personalizados.

En la CLI de Amplify, vaya hasta la carpeta raíz de la aplicación de intérprete de comandos.

Introduzca el siguiente comando:

amplify configure hosting

Cuando se le pida configuración personalizada, introduzca Y.

Abra la consola de Amplify.

Elija la aplicación de intérprete de comandos.

En el panel de navegación, elija Alojamiento y, a continuación, elija Reescrituras y redireccionamientos.

En la página Reescrituras y redireccionamientos, seleccione Administrar redireccionamientos.

Seleccione Abrir editor de texto.

En el editor de texto JSON, introduzca el siguiente redireccionamiento:

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

Seleccione Save.

En un navegador web, escriba la URL de la aplicación de intérprete de comandos implementada.

Compruebe que la aplicación de intérprete de comandos y el micro-frontend se carguen correctamente.

Inicia sesión en la consola de Amplify y Consola de administración de AWS, a continuación, ábrela.

Elija el micro-frontend.

En el panel de navegación, elija Configuración de la aplicación y, a continuación, Configuración general.

Elija Eliminar aplicación.

En la ventana de confirmación, introduzca delete y, a continuación, elija Eliminar aplicación.

Para eliminar la aplicación de intérprete de comandos, repita estos pasos.