Angular Micro front end

Question

I am trying to build a micro front end application with Angular 8. I am not able to find any support in Angular official site. Can some one please tell weather this approach is mature enough for implementing actual projects. Is there any application available in public domain which is built with micro front end approach in Angular 8? What are the security and performance parameters we need to consider before or after building micro front end app.

Answer 1

I am trying to build a micro front end application with Angular 8

wow, thats great..go ahead. Gud Luck !!.

I am not able to find any support in Angular official site

Angular has been equipped you with @angular/elements 2 year back (2016-2017). Now make any plain old angular component (POAC) as a web component and use anywhere in the world of javascripts based framework(React,Vue,Electron etc).

Can some one please tell weather this approach is mature enough for implementing actual projects

Anyone can tell about this, it is just architecture of your system (ur application) and it is cool , Monolith is pain, micro front end is remedy for this pain.

Is there any application available in public domain which is built with micro front end approach in Angular 8?

YES, Many and Many in near future and it is not about in angular or any other framework, its plateform/framework independent and that is beauty of it.

What are the security and performance parameters we need to consider before or after building micro front end app.

Keep in mind - Micro-frontends are split by business domain, not by location on the page

Answer 2

Step wise procedure to create micro front end using module federation in angular 13.

Install nx globally

1. npm i –g nx
2. npm install –g @nrwl/cli
3. npm install –g angular/cli@Version

Create empty nx workspace-

npx create-nx-workspace ng-mfe

Note:- While creating workspace if cypress is not downloading then set proxy using following command • set HTTP_PROXY=http://my-company-proxy.com

Add Angular package

npm install --save-dev @nrwl/angular

Create host angular application

npx nx g @nrwl/angular:app dashboard --mfe --mfeType=host --routing=true

Create remote application, set hostname and mfeType as remote

npx nx g @nrwl/angular:app login --mfe --mfeType=remote --port=4201 --host=dashboard --routing=true

To run all applications there is command is shell – project.json file

  nx serve-mfe [hostName]

Configuration settings

1.common styles configurations.

Create new folder under libs which will hold scss files. Add path for external stylesheet in every applications style.scss file Import this scss file using following syntax for Ex.

@import '../../../libs/sass-style/common.scss';

2.service configuration.

create a user data-access library that we will share between the host application and the remote application. Create data-access-user folder in lib

nx g @nrwl/angular:lib shared/data-access-user

Create service under data-access-user folder’s shared lib

nx g @nrwl/angular:service user --project=shared-data-access-user

Add a new export to the shared/data-access-user's index.ts file:

export * from './lib/user.service';

Import shared services using following syntax Ex.

 import { UserService } from '@[main workspace name]/shared/data-access-user'

3.Assets configuration.

Create new folder under libs which will hold another folder of all images.

Add this configurations in mfe's project.json in order to access shared assets

To access shared image:

4.Shared component configuartion.

To create shared component:

 npx nx g component todos --project=shared-data-access-user --export 

Import shared module in mfe’s module.ts to access the shared component

We can directly access component using selector.