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

En AngularCLI, ingresa el siguiente comando:

ng new shell --routing

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

cd shell

Nota: La estructura de carpetas y proyectos de las aplicaciones de consola y microinterfaz puede ser totalmente independiente. Se pueden gestionar como aplicaciones angulares independientes.

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 AngularCLI, ingresa el siguiente comando para importar el módulo desde el complemento @angular -architects/module-federation: loadRemoteModule

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

Establezca la ruta predeterminada de la siguiente manera:

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

Establezca la ruta para la microinterfaz:

{
    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 src carpeta, cree un archivo nuevo llamado decl.d.ts.

Abra el archivo decl.d.ts.

Añada lo siguiente al archivo:

declare module 'mfe1/Module';

Guarde y cierre el archivo decl.d.ts.

Abre 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.

Abre 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 AngularCLI, ingresa el siguiente comando:

ng new mfe1 --routing

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

cd mfe1

Abra el archivo mfe-routing.module.ts.

Defina la ruta predeterminada de la siguiente manera:

{
    path: '',
    component: Mfe1Component
  },

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

Abre el archivo app-routing.module.ts.

Defina la ruta predeterminada de la siguiente manera:

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

Añada la siguiente mfe1 ruta:

{
    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 For remotes sección 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 shared sección, añada las dependencias que la mfe1 aplicación comparta con la aplicación 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()
    })

Guarde y cierre el archivo webpack.config.js.

Abre el archivo app.component.html.

Sustituya el contenido por lo siguiente:

<router-outlet></router-outlet>

Guarde y cierre el archivo app.component.html.

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

npm start

En un navegador web, accedahttp://localhost:5000.

Compruebe que la microinterfaz se puede ejecutar de forma independiente. La mfe1 aplicación debería renderizarse correctamente y sin errores.

Introduzca el siguiente comando para iniciar la aplicación de shell:

npm start

En un navegador web, accedahttp://localhost:4200/mfe1.

Compruebe que la mfe1 microinterfaz esté integrada en la aplicación shell. La aplicación del portal debe renderizarse correctamente sin errores y debe estar integrada en ella. mfe1

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.

Defina la ruta predeterminada de la siguiente manera:

{
    path: '',
    component: ErrorPageComponent
  },

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

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

Modifique la mfe1 ruta para que sea la siguiente:

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

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

Si aún no se está ejecutando, introduzca el siguiente comando para iniciar la aplicación shell:

npm start

En un navegador web, accedahttp://localhost:4200/mfe1.

Compruebe que se muestre la página de error. Debería ver el siguiente texto:

Sorry, this page is not available.

En AmplifyCLI, navegue hasta la carpeta raíz de la aplicación de microinterfaz.

Ingresa el siguiente comando para inicializar Amplify:

amplify init

Cuando se le pida que introduzca un nombre para su proyecto de Amplify, pulse Entrar. Esto 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, elijaAWS Profile.

Seleccione el perfil que desee usar.

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

Introduce el siguiente comando para añadir una categoría de alojamiento de Amplify a la microinterfaz:

amplify add hosting

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

Cuando se le pida que elija un tipo, elijaManual deployment.

Instale las dependencias npm del proyecto introduciendo el siguiente comando:

npm install

Publique la aplicación en la consola Amplify introduciendo el siguiente comando:

amplify publish -y

Cuando se completa la publicación, Amplify devuelve URL la microinterfaz.

Copia el. URL Necesita este valor para actualizar la aplicación shell.

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

Sustituya el valor por el de la microinterfaz implementadamfe1URL: URL

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

Guarde y cierre el archivo environments.prod.ts.

En AmplifyCLI, navegue hasta la carpeta raíz de la aplicación shell.

Ingresa el siguiente comando para inicializar Amplify:

amplify init

Cuando se le pida que introduzca un nombre para su proyecto de Amplify, pulse Entrar. Esto 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, elijaAWS Profile.

Seleccione el perfil que desee usar.

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

Añada una categoría de alojamiento Amplify a la aplicación shell:

amplify add hosting

Cuando se le pida que seleccione el módulo de complemento, elijaHosting with Amplify Console.

Cuando se le pida que elija un tipo, elijaManual deployment.

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

npm install

Publique la aplicación shell en la consola Amplify introduciendo el siguiente comando:

amplify publish -y

Cuando se completa la publicación, Amplify devuelve URL la aplicación shell desplegada.

Anote la aplicación URL para la shell.

En AmplifyCLI, navegue hasta la carpeta raíz de la microinterfaz.

Escriba el siguiente comando:

amplify configure hosting

Cuando se le pida que configure ajustes personalizados, introduzca. Y

Inicie sesión en la consola Amplify y AWS Management Console, a continuación, ábrala.

Elige la microinterfaz.

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

Elija Editar.

En la ventana Editar encabezados personalizados, introduce 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 Guardar.

Vuelva a implementar la microinterfaz para aplicar los nuevos encabezados personalizados.

En AmplifyCLI, navegue hasta la carpeta raíz de la aplicación shell.

Escriba el siguiente comando:

amplify configure hosting

Cuando se le pida que configure ajustes personalizados, introduzcaY.

Abra la consola de Amplify.

Elija la aplicación shell.

En el panel de navegación, selecciona Alojamiento y, a continuación, selecciona Reescrituras y redirecciones.

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

Selecciona Abrir editor de texto.

En el JSON editor, introduce la siguiente redirección:

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

Seleccione Guardar.

En un navegador web, introduzca URL la aplicación shell desplegada.

Compruebe que la aplicación shell y la microinterfaz se cargan correctamente.

Inicie sesión en la consola Amplify y AWS Management Console, a continuación, ábrala.

Elige la microinterfaz.

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

Selecciona Eliminar aplicación.

En la ventana de confirmación, ingresa ydelete, a continuación, selecciona Eliminar aplicación.

Repita estos pasos para eliminar la aplicación shell.