Create a portal for micro-frontends by using AWS Amplify, Angular, and Module Federation

In the Angular CLI, enter the following command:

ng new shell --routing

Enter the following command to navigate to the project folder:

cd shell

Note: The folder and project structure for the shell and micro-frontend applications can be totally independent. They can be handled as independent Angular applications.

Open the environment.ts file.

Add mfe1URL: 'http://localhost:5000' to the environment object:

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

Save and close the environment.ts file.

Open the app-routing.module.ts file.

In the Angular CLI, enter the following command to import the loadRemoteModule module from the @angular-architects/module-federation plugin:

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

Set the default route as the following:

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

Set the route for the micro-frontend:

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

Save and close the app-routing.module.ts file.

In the src folder, create a new file named decl.d.ts.

Open the decl.d.ts file.

Add the following to the file:

declare module 'mfe1/Module';

Save and close the decl.d.ts file.

Open the main.ts file.

Replace the content with the following:

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

Save and close the main.ts file.

Open the app.component.html file.

Replace the content with the following:

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

Save and close the app.component.html file.

In the Angular CLI, enter the following command:

ng new mfe1 --routing

Enter the following command to navigate to the project folder:

cd mfe1

Open the mfe-routing.module.ts file.

Set the default route as the following:

{
    path: '',
    component: Mfe1Component
  },

Save and close the mfe-routing.module.ts file.

Open the app-routing.module.ts file.

Set the default route as the following:

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

Add the following mfe1 route:

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

Save and close the app-routing.module.ts file.

Open the webpack.config.js file.

Edit the For remotes section to match the following:

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

In the shared section, add any dependencies that the mfe1 application shares with the shell application:

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

Save and close the webpack.config.js file.

Open the app.component.html file.

Replace the contents with the following:

<router-outlet></router-outlet>

Save and close the app.component.html file.

Enter the following command to start the mfe1 application:

npm start

In a web browser, access http://localhost:5000.

Verify that the micro-frontend can be run standalone. The mfe1 application should properly render without any errors.

Enter the following command to start the shell application:

npm start

In a web browser, access http://localhost:4200/mfe1.

Verify that the mfe1 micro-frontend is embedded in the shell application. The portal application should properly render without any errors, and the mfe1 application should be embedded within it.

Open the error-page.component.html file.

Replace the contents with the following:

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

Save and close the error-page.component.html file.

Open the error-page-routing.module.ts file.

Set the default route as the following:

{
    path: '',
    component: ErrorPageComponent
  },

Save and close the error-page-routing.module.ts file.

Open the app-routing.module.ts file.

Create the following function:

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

Modify the mfe1 route to be the following:

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

Save and close the app-routing.module.ts file.

If it is not already running, enter the following command to start the shell application:

npm start

In a web browser, access http://localhost:4200/mfe1.

Verify that the error page is rendered. You should see the following text:

Sorry, this page is not available.

In the Amplify CLI, navigate to the root folder of the micro-frontend application.

Enter the following command to initialize Amplify:

amplify init

When you are prompted to enter a name for your Amplify project, press Enter. This re-uses the name from the package.json file.

When you are prompted to initialize the project with the above configuration, enter Yes.

When you are prompted to select an authentication method, choose AWS Profile.

Select the profile you want to use.

Wait for Amplify to initialize the project. When this process is complete, you receive a confirmation message in the terminal.

Enter the following command to add an Amplify hosting category to the micro-frontend:

amplify add hosting

When you are prompted to select the plugin module, choose Hosting with Amplify Console.

When you are prompted to choose a type, choose Manual deployment.

Install the project npm dependencies by entering the following command:

npm install

Publish the application to the Amplify console by entering the following command:

amplify publish -y

When publishing is complete, Amplify returns the URL of the micro-frontend.

Copy the URL. You need this value to update the shell application.

In the src/app/environments folder, open the environments.prod.ts file.

Replace the mfe1URL value with the URL of the deployed micro-frontend:

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

Save and close the environments.prod.ts file.

In the Amplify CLI, navigate to the root folder of the shell application.

Enter the following command to initialize Amplify:

amplify init

When you are prompted to enter a name for your Amplify project, press Enter. This re-uses the name from the package.json file.

When you are prompted to initialize the project with the above configuration, enter Yes.

When you are prompted to select an authentication method, choose AWS Profile.

Select the profile you want to use.

Wait for Amplify to initialize the project. When this process is complete, you receive a confirmation message in the terminal.

Add an Amplify hosting category to the shell application:

amplify add hosting

When you are prompted to select the plugin module, choose Hosting with Amplify Console.

When you are prompted to choose a type, choose Manual deployment.

Install project npm dependencies by entering the following command:

npm install

Publish the shell application to the Amplify console by entering the following command:

amplify publish -y

When publishing is complete, Amplify returns the URL of the deployed shell application.

Make note of the URL for the shell application.

In the Amplify CLI, navigate to the root folder of the micro-frontend.

Enter the following command:

amplify configure hosting

When you are prompted to configure custom settings, enter Y.

Sign in to the AWS Management Console, and then open the Amplify console.

Choose the micro-frontend.

In the navigation pane, choose Hosting, and then choose Custom headers.

Choose Edit.

In the Edit custom headers window, enter the following:

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

Choose Save.

Redeploy the micro-frontend to apply the new custom headers.

In the Amplify CLI, navigate to the root folder of the shell application.

Enter the following command:

amplify configure hosting

When you are prompted to configure custom settings, enter Y.

Open the Amplify console.

Choose the shell application.

In the navigation pane, choose Hosting, and then choose Rewrites and redirects.

On the Rewrites and redirects page, choose Manage redirects.

Choose Open text editor.

In the JSON editor, enter the following redirect:

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

Choose Save.

In a web browser, enter the URL of the deployed shell application.

Verify that the shell application and the micro-frontend load properly.

Sign in to the AWS Management Console, and then open the Amplify console.

Choose the micro-frontend.

In the navigation pane, choose App settings, and then choose General settings.

Choose Delete app.

In the confirmation window, enter delete, and then choose Delete app.

Repeat these steps to delete the shell application.