TheLazy.Dev
Portfolio GitHub

Blog

angular |microfrontends |webdev |javascript

Steps to adopt micro frontends architecture for your frontend application in Angular

hardiquedasore

Hardique Dasore

Posted on March 10, 2023

Steps to adopt micro frontends architecture for your frontend application in Angular

If you have an Angular project with a mono repo that is shared among various teams, you should consider changing the monolithic architecture of your application to micro-frontends using module federation.

1 Create an nx-worspace using:

npx create-nx-workspace@latest <project name>
Enter fullscreen mode Exit fullscreen mode

• Select angular and scss

2 Change the directory to the project folder using:

cd <project name>
Enter fullscreen mode Exit fullscreen mode

3 Open Visual Studio code using:

code .
Enter fullscreen mode Exit fullscreen mode

4 Create separate containers using:

nx generate @nrwl/angular:app <container name>
Enter fullscreen mode Exit fullscreen mode

5 Compile and run all containers using:

nx run <container name>:serve:development - port <port>
Enter fullscreen mode Exit fullscreen mode

Note: You can also use ng instead of nx

6 Use the following command to create new components:

nx generate @nrwl/angular:component <component name> - project <project name>
Enter fullscreen mode Exit fullscreen mode

7 Set up module federation in all containers:

npm i @angular-architects/module-federation
Enter fullscreen mode Exit fullscreen mode

8 Run the following command to add webconfig file to all the containers:

ng g @angular-architects/module-federation:init
Enter fullscreen mode Exit fullscreen mode

• Select container and assign port

9 Expose the component you want to use in other containers in webpack.config.js:

exposes: {
    './Module': './apps/<container-name>/src/app/remote-entry/remote-entry.module.ts',
     },
Enter fullscreen mode Exit fullscreen mode

10 Use the exposed module in the routing of app.module.ts of the shell container:

RouterModule.forRoot(
     [
       {
           path: '<container-name>',
           loadChildren: () =>
           loadRemoteModule({
           remoteEntry: 'http://localhost:<port>/remoteEntry.js',
           type: 'module',
           exposedModule: './Module',
           }).then((m) => m.RemoteEntryModule),
        }
       ],
       { initialNavigation: 'enabledBlocking' }
      )
    ],
Enter fullscreen mode Exit fullscreen mode

11 In order to create a shared service in a shared folder, use:

ng g @nrwl/angular:lib shared/test-service
Enter fullscreen mode Exit fullscreen mode

12 Install ngx-mfe (version 3.0.2):

npm i ngx-mfe
Enter fullscreen mode Exit fullscreen mode

13 Create index.ts file and import:

export * from './lib/shared-test-service.module';
export * from './lib/test-service.service';
Enter fullscreen mode Exit fullscreen mode

14 Add the path to tsconfig.base.json:

"paths": {
          "@micro-frontends/shared/test-service": ["libs/shared/test-service/src/index.ts"]
         }
Enter fullscreen mode Exit fullscreen mode

15 Add the shared service to the webpack.config.js file of the container you want to use the service in:

sharedMappings.register(sharedMappings.register(
         path.join(__dirname, '../../tsconfig.base.json'),
         path.join(__dirname,'../../tsconfig.base.json'),
         [/* mapped paths to share */]);
         ['@micro-frontends/shared/shared/test-service']);]);
Enter fullscreen mode Exit fullscreen mode

16 In order to use the service, import it into the component:

import{{ TestService }} from '@micro-frontends/shared/test-service'
Enter fullscreen mode Exit fullscreen mode

Note: Please change micro-frontends to the name of your project and test-service to the name of your service in the above commands.

Happy Coding!

💖 💪 🙅 🚩
hardiquedasore
Hardique Dasore

Posted on March 10, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Steps to adopt micro frontends architecture for your frontend application in Angular
angular Steps to adopt micro frontends architecture for your frontend application in Angular

March 10, 2023