Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés. # Cree un portal para microinterfaces mediante Angular AWS Amplify y Module Federation *Milena Godau y Pedro Garcia, Amazon Web Services* ## Resumen Una arquitectura de micro-frontend permite a varios equipos trabajar en diferentes partes de una aplicación de frontend de forma independiente. Cada equipo puede desarrollar, crear e implementar un fragmento del frontend sin interferir con otras partes de la aplicación. Desde la perspectiva del usuario final, parece ser una aplicación única y cohesiva. Sin embargo, están interactuando con varias aplicaciones independientes publicadas por diferentes equipos. En este documento se describe cómo crear una arquitectura de micro-frontend mediante el uso de [AWS Amplify](https://docs.amplify.aws/gen1/angular/), el marco de frontend de [Angular](https://angular.dev/overview) y [Module Federation](https://webpack.js.org/concepts/module-federation/). En este patrón, los micro-frontends se combinan en el lado del cliente mediante una aplicación de intérprete de comandos (o *principal*). La aplicación de intérprete de comandos actúa como un contenedor que recupera, muestra e integra los micro-frontends. La aplicación de intérprete de comandos gestiona el enrutamiento global, que carga diferentes micro-frontends. El complemento [@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation) integra Module Federation con Angular. Para implementar la aplicación shell y las microinterfaces, utilice. AWS Amplify Los usuarios finales acceden a la aplicación a través de un portal web. El portal está dividido verticalmente. Esto significa que los micro-frontends son vistas completas o grupos de vistas, en lugar de partes de la misma vista. Por lo tanto, la aplicación de intérprete de comandos carga solo un micro-frontend cada vez. Los micro-frontends se implementan como módulos remotos. La aplicación de intérprete de comandos carga estos módulos remotos de forma lenta, lo que aplaza la inicialización del micro-frontend hasta que sea necesaria. Este enfoque optimiza el rendimiento de la aplicación al cargar solo los módulos necesarios. Esto reducirá el tiempo de carga inicial y mejorará la experiencia general del usuario. Además, comparte dependencias comunes entre los módulos a través del archivo de configuración del paquete web (**webpack.config.js**). Esta práctica promueve la reutilización del código, reduce la duplicación y agiliza el proceso de agrupación. ## Requisitos previos y limitaciones **Requisitos previos ** + Un activo Cuenta de AWS + Node.js y npm [instalados](https://nodejs.org/en/download/). + CLI de Amplify [instalada](https://docs.amplify.aws/gen1/angular/tools/cli/) + CLI de Angular [instalada](https://angular.io/cli) + [Permisos](https://docs.aws.amazon.com/service-authorization/latest/reference/list_awsamplify.html) de uso AWS Amplify + Familiaridad con Angular **Versiones de producto** + Versión 13.1.2 o posterior de la CLI de Angular + @angular-architects/module-federation versión 14.0.1 o posterior + webpack versión 5.4.0 o posterior + AWS Amplify Generación 1 **Limitaciones** Una arquitectura de micro-frontend es un enfoque poderoso para crear aplicaciones web escalables y resilientes. Sin embargo, es fundamental comprender los siguientes desafíos potenciales antes de adoptar este enfoque: + **Integración**: uno de los principales desafíos es el posible aumento de la complejidad en comparación con los micro-frontends monolíticos. Organizar múltiples micro-frontends, gestionar la comunicación entre ellos y gestionar las dependencias compartidas puede resultar más complejo. Además, puede haber una sobrecarga de rendimiento asociada a la comunicación entre los micro-frontends. Esta comunicación puede aumentar la latencia y reducir el rendimiento. Esto debe abordarse mediante mecanismos de mensajería eficientes y estrategias de intercambio de datos. + **Duplicación de código**: dado que cada micro-frontend se desarrolla de forma independiente, existe el riesgo de duplicar el código para funciones comunes o bibliotecas compartidas. Esto puede aumentar el tamaño total de la aplicación e introducir problemas de mantenimiento. + **Coordinación y administración**: coordinar los procesos de desarrollo e implementación en múltiples micro-frontends puede ser un desafío. Garantizar un control de versiones uniforme, gestionar las dependencias y mantener la compatibilidad entre los componentes se vuelve más fundamental en una arquitectura distribuida. Establecer una gobernanza clara, directrices y procesos automatizados de pruebas e implementación es esencial para una colaboración y una entrega fluidas. + **Pruebas**: probar arquitecturas de micro-frontends puede ser más complejo que probar micro-frontends monolíticos. Se requieren esfuerzos adicionales y estrategias de prueba especializadas para realizar end-to-end pruebas y ensayos de integración entre componentes y para validar experiencias de usuario consistentes en múltiples microinterfaces. Antes de decidirse por el enfoque de las microinterfaces, le recomendamos que consulte Cómo [entender](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html) e implementar las microinterfaces en. AWS ## Arquitectura En una arquitectura de micro-frontend, cada equipo desarrolla e implementa las características de forma independiente. La siguiente imagen muestra cómo trabajan juntos varios DevOps equipos. El equipo del portal desarrolla la aplicación de intérprete de comandos. La aplicación de intérprete de comandos actúa como contenedor. Recupera, muestra e integra las aplicaciones de microinterfaz publicadas por otros equipos. DevOps Se utiliza AWS Amplify para publicar la aplicación shell y las aplicaciones de microinterfaz. ![Publicación de varios micro-frontends en una aplicación de intérprete de comandos a la que el usuario accede a través de un portal web.](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/images/pattern-img/ddf82a69-bf1b-4ad1-8e60-3dd375699936/images/cf045bf1-11ea-46d9-93cb-3c603122450d.png) El diagrama de la arquitectura muestra el flujo de trabajo siguiente: 1. El equipo del portal desarrolla y mantiene la aplicación de intérprete de comandos. La aplicación de intérprete de comandos organiza la integración y el renderizado de los micro-frontends para componer todo el portal. 1. Los equipos A y B desarrollan y mantienen uno o más micro-frontends o características que se integran en el portal. Cada equipo puede trabajar de forma independiente en sus respectivos micro-frontends. 1. El usuario final se autentica mediante Amazon Cognito. 1. El usuario final accede al portal y se carga la aplicación de intérprete de comandos. A medida que el usuario navega, la aplicación de intérprete de comandos se encarga del enrutamiento y recupera el micro-frontend solicitado y carga su paquete. ## Tools (Herramientas) **Servicios de AWS** + [AWS Amplify](https://docs.amplify.aws/angular/start/)es un conjunto de herramientas y funciones especialmente diseñadas que ayudan a los desarrolladores frontend, web y móvil a crear rápidamente aplicaciones completas. AWS En este patrón, se utiliza la CLI de Amplify para implementar las aplicaciones de micro-frontend de Amplify. + [AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html) es una herramienta de código abierto que te ayuda a interactuar Servicios de AWS mediante los comandos de tu consola de línea de comandos. **Otras herramientas** + [@angular-architects/module-federation](https://github.com/angular-architects/module-federation-plugin) es un complemento que integra Angular con Module Federation. + [Angular](https://angular.dev/overview) es un marco de aplicaciones web de código abierto para crear aplicaciones de una sola página modernas, escalables y comprobables. Sigue una arquitectura modular y basada en componentes que promueve la reutilización y el mantenimiento del código. + [Node.js](https://nodejs.org/en/docs/) es un entorno de JavaScript ejecución basado en eventos diseñado para crear aplicaciones de red escalables. + [npm](https://docs.npmjs.com/about-npm) es un registro de software que se ejecuta en un entorno Node.js y se utiliza para compartir o tomar prestados paquetes y administrar la implementación de paquetes privados. + [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/) lo ayuda a cargar código que se compila e implementa de forma independiente, como micro-frontends o complementos, en una aplicación. **Repositorio de código** El código de este patrón está disponible en el [portal Microfrontend utilizando Angular y](https://github.com/aws-samples/angular-module-federation-mfe) los repositorios Module Federation. GitHub Este repositorio contiene las dos carpetas siguientes: + `shell-app` contiene el código de la aplicación de intérprete de comandos. + `feature1-app` contiene un ejemplo de micro-frontend. La aplicación de intérprete de comandos busca este micro-frontend y lo muestra como una página dentro de la aplicación del portal. ## Prácticas recomendadas Las arquitecturas de micro-frontend ofrecen numerosas ventajas, pero también introducen complejidad. Las siguientes son algunas de las prácticas recomendadas para un desarrollo fluido, un código de alta calidad y una excelente experiencia de usuario: + **Planificación y comunicación**: para agilizar la colaboración, invierta en planificación, diseño y canales de comunicación claros desde el principio. + **Coherencia en el diseño**: aplique un estilo visual coherente en todos los micro-frontends mediante el uso de sistemas de diseño, guías de estilo y bibliotecas de componentes. Esto proporciona una experiencia de usuario coherente y acelera el desarrollo. + **Gestión de las dependencias**: dado que los micro-frontends evolucionan de forma independiente, adopte contratos y estrategias de control de versiones estandarizados para administrar las dependencias de forma eficaz y evitar problemas de compatibilidad. + **Arquitectura de micro-frontend**: para permitir el desarrollo y la implementación independientes, cada micro-frontend debe tener una responsabilidad clara y bien definida en relación con una funcionalidad encapsulada. + **Integración y comunicación**: para facilitar una integración fluida y minimizar los conflictos, defina contratos y protocolos de comunicación claros entre las microinterfaces APIs, incluidos los eventos y los modelos de datos compartidos. + **Pruebas y control de calidad**: implemente la automatización de las pruebas y los procesos de integración continua para los micro-frontends. Esto mejora la calidad general, reduce el esfuerzo de realizar pruebas manuales y valida la funcionalidad entre las interacciones de los micro-frontends. + **Optimización del rendimiento**:** **supervise continuamente las métricas de rendimiento y realice un seguimiento de las dependencias entre los micro-frontends. Esto lo ayuda a identificar los cuellos de botella y a mantener un rendimiento óptimo de las aplicaciones. Para ello, utilice herramientas de supervisión del rendimiento y análisis de dependencias. + **Experiencia de desarrollador**: para centrarse en la experiencia del desarrollador, proporcione documentación, herramientas y ejemplos claros. Esto lo ayuda a agilizar el desarrollo e incorporar nuevos miembros al equipo. ## Epics ### Creación de la aplicación de intérprete de comandos | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Cree la aplicación de intérprete de comandos. | 1. En la CLI de Angular, introduzca el comando siguiente:
ng new shell --routing

2. Introduzca el siguiente comando para navegar a la carpeta del proyecto:
cd shell
La estructura de carpetas y proyectos de las aplicaciones del intérprete de comandos y micro-frontend puede ser totalmente independiente. Se pueden gestionar como aplicaciones de angular independientes. | Desarrollador de aplicaciones | | Instale el complemento. | En la CLI de Angular, introduzca el siguiente comando para instalar el complemento [@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation):
ng add @angular-architects/module-federation --project shell --port 4200
| Desarrollador de aplicaciones | | Añada la URL del micro-frontend como variable de entorno. | 1. Abra el archivo **environment.ts**.
2. Añada `mfe1URL: 'http://localhost:5000'` al objeto `environment`:
export const environment = {
  production: false,
  mfe1URL: 'http://localhost:5000',
};

3. Guarde y cierre el archivo **environment.ts.** | Desarrollador de aplicaciones | | Defina el enrutamiento. | 1. Abra el archivo **app-routing.module.ts**.
2. 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';

3. Establezca la ruta predeterminada de la siguiente manera:
{
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

4. Establezca la ruta para el micro-frontend:
{
    path: 'mfe1',
    loadChildren: () => loadRemoteModule({
        type: 'module',
        remoteEntry: `${environment.mfe1URL}/remoteEntry.js`,
        exposedModule: './Module'
      })
      .then(m => m.Mfe1Module)
  },

5. Guarde y cierre el archivo **app-routing.module.ts**. | Desarrollador de aplicaciones | | Declare el módulo `mfe1`. | 1. En la carpeta `src`, cree un archivo nuevo llamado **decl.d.ts**.
2. Abra el archivo **decl.d.ts**.
3. Agregue lo siguiente al archivo:
declare module 'mfe1/Module';

4. Guarde y cierre el archivo **decl.d.ts**. | Desarrollador de aplicaciones | | Prepare la precarga para el micro-frontend. | La precarga del micro-frontend ayuda al paquete web a negociar adecuadamente las bibliotecas y paquetes compartidos.1. Abra el archivo** main.ts**.
2. 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));

3. Guarde y cierre el archivo **main.ts**. | Desarrollador de aplicaciones | | Ajuste el contenido HTML. | 1. Abra el archivo **app.component.html**.
2. Sustituya el contenido por lo siguiente:
Shell application is running!


3. Guarde y cierre el archivo** app.component.html**. | Desarrollador de aplicaciones | ### Creación de la aplicación de micro-frontend | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Cree el micro-frontend. | 1. En la CLI de Angular, introduzca el comando siguiente:
ng new mfe1 --routing

2. Introduzca el siguiente comando para navegar a la carpeta del proyecto:
cd mfe1
| Desarrollador de aplicaciones | | Instale el complemento. | Introduzca el siguiente comando para instalar el complemento @angular-architects/module-federation:
ng add @angular-architects/module-federation --project mfe1 --port 5000
| Desarrollador de aplicaciones | | Cree un módulo y un componente. | Introduzca los siguientes comandos para crear un módulo y un componente y exportarlos como módulo de entrada remota:
ng g module mfe1 --routing
ng g c mfe1
| Desarrollador de aplicaciones | | Defina la ruta de enrutamiento predeterminada. | 1. Abra el archivo **mfe-routing.module.ts**.
2. Establezca la ruta predeterminada de la siguiente manera:
{
    path: '',
    component: Mfe1Component
  },

3. Guarde y cierre el archivo **mfe-routing.module.ts**. | Desarrollador de aplicaciones | | Añada la ruta `mfe1`. | 1. Abra el archivo** app-routing.module.ts**.
2. Establezca la ruta predeterminada de la siguiente manera:
{
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

3. Agregue la siguiente ruta `mfe1`:
{
    path: 'mfe1',
    loadChildren: () => 
      import('./mfe1/mfe1.module').then((m) => m.Mfe1Module),
  },

4. Guarde y cierre el archivo **app-routing.module.ts**. | Desarrollador de aplicaciones | | Edite el archivo **webpack.config.js**. | 1. Abra el archivo **webpack.config.js**.
2. 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',
    },

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

4. Guarde y cierre el archivo** webpack.config.js**. | Desarrollador de aplicaciones | | Ajuste el contenido HTML. | 1. Abra el archivo **app.component.html**.
2. Sustituya el contenido por lo siguiente:

3. Guarde y cierre el archivo** app.component.html**. | Desarrollador de aplicaciones | ### Ejecución local de las aplicaciones | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Ejecute la aplicación `mfe1`. | 1. Escriba el siguiente comando para iniciar la aplicación `mfe1`:
npm start

2. En un navegador web, acceda a `http://localhost:5000`.
3. Compruebe que el micro-frontend se puede ejecutar de forma independiente. La aplicación `mfe1` debería renderizarse correctamente y sin errores. | Desarrollador de aplicaciones | | Ejecute la aplicación de intérprete de comandos. | 1. Escriba los siguientes comandos para iniciar la aplicación de intérprete de comandos:
npm start

2. En un navegador web, acceda a `http://localhost:4200/mfe1`.
3. 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. | Desarrollador de aplicaciones | ### Refactorice la aplicación de intérprete de comandos para gestionar un error de carga en el micro-frontend. | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Cree un módulo y un componente. | En la carpeta raíz de la aplicación de intérprete de comandos, introduzca los siguientes comandos para crear un módulo y un componente para una página de errores:
ng g module error-page --routing
ng g c error-page
| Desarrollador de aplicaciones | | Ajuste el contenido HTML. | 1. Abra el archivo **error-page.component.html**
2. Sustituya el contenido por lo siguiente:
Sorry, this page is not available.

3. Guarde y cierre el archivo **error-page.component.html**. | Desarrollador de aplicaciones | | Defina la ruta de enrutamiento predeterminada. | 1. Abra el archivo **error-page-routing.module.ts.**
2. Establezca la ruta predeterminada de la siguiente manera:
{
    path: '',
    component: ErrorPageComponent
  },

3. **Guarde y cierre el archivo .module.ts. error-page-routing** | Desarrollador de aplicaciones | | Cree una función para cargar micro-frontends. | 1. Abra el archivo **app-routing.module.ts**.
2. 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)
    );
}

3. Modificar la ruta `mfe1` para que sea como la siguiente:
{
    path: 'mfe1',
    loadChildren: () => loadMFE(environment.mfe1URL)
},

4. Guarde y cierre el archivo** app-routing.module.ts**. | Desarrollador de aplicaciones | | Pruebe la gestión de errores. | 1. Si aún no se está ejecutando, ejecute el siguiente comando para iniciar la aplicación de intérprete de comandos:
npm start

2. En un navegador web, acceda a `http://localhost:4200/mfe1`.
3. Compruebe que esté representada la página de error. Debería ver el texto siguiente:
Sorry, this page is not available.
| Desarrollador de aplicaciones | ### Implemente las aplicaciones mediante AWS Amplify | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Implemente el micro-frontend. | 1. En la CLI de Amplify, vaya hasta la carpeta raíz de la aplicación de micro-frontend.
2. Introduzca el comando siguiente para inicializar Amplify:
amplify init

3. 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**.
4. Cuando se le pida que inicialice el proyecto con la configuración anterior, introduzca `Yes`.
5. Cuando se le pida que seleccione un método de autenticación, elija `AWS Profile`.
6. Seleccione el perfil que desea usar.
7. Espere a que Amplify inicie el proyecto. Cuando se complete este proceso, recibirá un mensaje de confirmación en el terminal.
8. Introduzca el siguiente comando para agregar una categoría de alojamiento de Amplify al micro-frontend:
amplify add hosting

9. Cuando se le pida que seleccione el módulo del complemento, elija `Hosting with Amplify Console`.
10. Cuando se le pida que seleccione un tipo, elija `Manual deployment`.
11. Para instalar las dependencias de npm del proyecto, introduzca el comando siguiente:
npm install

12. 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.
13. Copie la dirección URL. Necesitará este valor para actualizar la aplicación de intérprete de comandos. | Desarrollador de aplicaciones, AWS DevOps | | Implemente la aplicación de intérprete de comandos. | 1. En la **src/app/environments**carpeta, abra el archivo **environments.prod.ts.**
2. Sustituya el valor `mfe1URL` por la URL del micro-frontend implementado:
export const environment = {  
   production: true, 
   mfe1URL: 'https://..amplifyapp.com'
 };

3. Guarde y cierre el archivo** environments.prod.ts**.
4. En la CLI de Amplify, vaya hasta la carpeta raíz de la aplicación de intérprete de comandos.
5. Introduzca el comando siguiente para inicializar Amplify:
amplify init

6. 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**.
7. Cuando se le pida que inicialice el proyecto con la configuración anterior, introduzca `Yes`.
8. Cuando se le pida que seleccione un método de autenticación, elija `AWS Profile`.
9. Seleccione el perfil que desea usar.
10. Espere a que Amplify inicie el proyecto. Cuando se complete este proceso, recibirá un mensaje de confirmación en el terminal.
11. Añada una categoría de alojamiento de Amplify a la aplicación de intérprete de comandos:
amplify add hosting

12. Cuando se le pida que seleccione el módulo del complemento, elija `Hosting with Amplify Console`.
13. Cuando se le pida que seleccione un tipo, elija `Manual deployment`.
14. Instale las dependencias de npm del proyecto con el siguiente comando:
npm install

15. 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.
16. Anote la URL de la aplicación de intérprete de comandos. | Desarrollador de aplicaciones, propietario de la aplicación | | Habilite CORS. | Como las aplicaciones de intérprete de comandos y micro-frontend se alojan de forma independiente en dominios diferentes, debe habilitar el uso compartido de recursos entre orígenes (CORS) en el micro-frontend. Esto permite que la aplicación de intérprete de comandos cargue el contenido desde un origen diferente. Para habilitar CORS, añada encabezados personalizados.1. En la CLI de Amplify, vaya hasta la carpeta raíz del micro-frontend.
2. Introduzca el siguiente comando:
amplify configure hosting

3. Cuando se le pida configuración personalizada, introduzca `Y`.
4. Inicia sesión en la consola de [Amplify](https://console.aws.amazon.com/amplify/) y Consola de administración de AWS, a continuación, ábrela.
5. Elija el micro-frontend.
6. En el panel de navegación, seleccione **Alojamiento** y, a continuación, seleccione **Encabezados personalizados**.
7. Seleccione **Editar**.
8. 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: '*'

9. Seleccione **Save**.
10. Vuelva a implementar el micro-frontend para aplicar los nuevos encabezados personalizados. | Desarrollador de aplicaciones, AWS DevOps | | Cree una regla de reescritura en la aplicación de intérprete de comandos. | La aplicación Angular shell está configurada para usar el HTML5 enrutamiento. Si el usuario realiza una actualización exhaustiva, Amplify intenta cargar una página desde la URL actual. Esto genera un error 403. Para evitarlo, añada una regla de reescritura en la consola de Amplify.
Para crear la regla de reescritura, siga estos pasos:1. En la CLI de Amplify, vaya hasta la carpeta raíz de la aplicación de intérprete de comandos.
2. Introduzca el siguiente comando:
amplify configure hosting

3. Cuando se le pida configuración personalizada, introduzca `Y`.
4. Abra la [consola de Amplify](https://console.aws.amazon.com/amplify/).
5. Elija la aplicación de intérprete de comandos.
6. En el panel de navegación, elija **Alojamiento** y, a continuación, elija **Reescrituras y redireccionamientos**.
7. En la página **Reescrituras y redireccionamientos**, seleccione **Administrar redireccionamientos**.
8. Seleccione **Abrir editor de texto**.
9. En el editor de texto JSON, introduzca el siguiente redireccionamiento:
[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    }
]

10. Seleccione **Save**. | Desarrollador de aplicaciones, AWS DevOps | | Pruebe el portal web. | 1. En un navegador web, escriba la URL de la aplicación de intérprete de comandos implementada.
2. Compruebe que la aplicación de intérprete de comandos y el micro-frontend se carguen correctamente. | Desarrollador de aplicaciones | ### Eliminar recursos | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Elimine las aplicaciones. | Si ya no necesita las aplicaciones de intérprete de comandos y micro-frontend, elimínelas. Esto ayudará a evitar cargos por recursos que no utiliza.1. Inicia sesión en la consola de [Amplify](https://console.aws.amazon.com/amplify/) y Consola de administración de AWS, a continuación, ábrela.
2. Elija el micro-frontend.
3. En el panel de navegación, elija **Configuración de la aplicación** y, a continuación, **Configuración general**.
4. Elija **Eliminar aplicación**.
5. En la ventana de confirmación, introduzca `delete` y, a continuación, elija **Eliminar aplicación**.
6. Para eliminar la aplicación de intérprete de comandos, repita estos pasos. | AWS general | ## Resolución de problemas | Problema | Solución | | --- | --- | | No hay ningún AWS perfil disponible al ejecutar el comando `amplify init` | Si no tiene un AWS perfil configurado, puede continuar con el `amplify init` comando. Sin embargo, debe seleccionar la opción `AWS access keys` cuando se le pida el método de autenticación. Tenga AWS a mano su clave de acceso y su clave secreta.
Como alternativa, puede configurar un perfil con nombre para AWS CLI. Para obtener instrucciones, consulte los [ajustes de configuración y del archivo de credenciales](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html) en la AWS CLI documentación. | | Error al cargar las entradas remotas | Si se produce un error al cargar las entradas remotas en el archivo **main.ts** de la aplicación de intérprete de comandos, asegúrese de que la variable `environment.mfe1URL` esté configurada correctamente. El valor de esta variable debe ser la URL del micro-frontend. | | Error 404 al acceder al micro-frontend. | Si recibe un error 404 al intentar acceder al micro-frontend local, por ejemplo, en `http://localhost:4200/mfe1`, compruebe lo siguiente:+ Para la aplicación de intérprete de comandos, asegúrese de que la configuración de enrutamiento del archivo **app-routing.module.ts** esté configurada correctamente y de que la función `loadRemoteModule` llame correctamente al micro-frontend.
+ Para el micro-frontend, compruebe que el archivo **webpack.config.js** tenga la configuración `exposes` correcta y asegúrese de que el archivo **remoteEntry.js** se esté generando correctamente. | ## Información adicional **AWS documentación** + [Comprensión e implementación de las microinterfaces en AWS(orientación](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html)AWS prescriptiva) + [CLI de Amplify](https://docs.amplify.aws/gen1/angular/tools/cli/) (documentación de Amplify) + [Alojamiento de Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) (documentación de Amplify) **Otras referencias** + [Module Federation](https://webpack.js.org/concepts/module-federation/) + [Node.js](https://nodejs.org/en/) + [Angular](https://angular.io/) + [@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation)