library based Micro-Frontends set-up in Angular

Angular 10 Micro-FrontEnd Tutorial Steps

These are the steps:
Step 1 - Installing Angular CLI 10
Step 2 - Initializing our Project
Step 3 - Understanding Micro-FrontEnd
Step 4 - Creating Angular 10 Library's

Will start with creating a A10 App....
Step 1 - Installing Angular CLI 10

Open a new terminal on Ubuntu/macOS or a command prompt on Windows and run the following command:

npm install -g @angular/cli

Step 2 - Initializing our Angular 10 Project

If you have installed Angular CLI v10 in your machine, let's use it to initialize a new project. Head back to your terminal or command prompt and simply run the following command:

ng new master-app

Before generating your project, the CLI will prompt you if you would like to add routing to your project - You can answer No because we'll not be using the router in this example. For the style-sheets format, let's go with CSS.

cd ./master-app
ng serve

The server will be running at the http://localhost:4200.

Now you successfully created you Angular 10 application. Now will step into developing the micro-frontend part.

**Those who know how to create library and add it to you application can skip this part.

Here we have the list of commend you need to run for creating and adding a library to your angular 10 application.

ng new lib --create-application=false

Above line will create Angular 10 application without src&e2e etc.. After this run the below comment to create library inside you lib folder...

ng generate library sharedlib 

Once you successfully created the Angular 10 library now run the below comment.

ng build sharedlib

once build is done you will get the following structure...

then go to you *master-app and install the newly created sharedlib to install run the following commend.

npm install C:\micro-ui\lib\dist\sharedlib

Once you install the angular 10 library, In you master application
package.json will get updated as below.

If all the above steps are done then now you are ready with a micro-frontend app.

Now you can import the Angular 10 library in to your master application as below.

import { SharedlibModule } from 'sharedlib';

Please do comment what you want to know in micro-frontend...

Comments

[AlexAegis]

That's not a microfrontend, that's a library