Here I will go over the alternative approach of designing huge applications. The end goal is to show how to substitute the monolithic architecture with micro frontends. I picked an admin dashboard as an example of an application that we will split into independent apps. But first, a quick overview of why micro frontends will be a great solution in such a case compared with monolithic architecture: Monolithic Admin dashboards usually contain a lot of components and complex logic. At some point, it becomes very difficult to maintain and scale the product. Besides that, it makes the integration of new developers quite challenging. Cause new joiners should spend a lot of time understanding and analyzing that huge monolith. Micro Front-ends This approach helps to split logic into smaller pieces. In that case, it's much easier to maintain and analyze the codebase. Moreover, responsibility for components can be delegated to different teams. So they can do independent development and deployment of these pieces. That makes micro front ends stand out. Demo App Architecture We need to create a workspace that will contain all the projects (components). The next step is the creation of a component wrapper, it is going to be responsible for the navigation of independent pieces and hosting them. The last part is to create micro frontends. That is all. Before we start, let me introduce the tool which is necessary to achieve the goal: Webpack 5 Module Federation Here is of it. Briefly, this is the main thing in my example. That plugin will allow loading front-end applications one into another. Let's proceed with implementation and see how it works. documentation Implementation As I mentioned above, in the beginning, we need to create the workspace, which is going to hold all projects. For that we need to run the following command: ng dashboard-mf --createApplication= new "false" After that, the host application has to be created, which is going to be a dashboard wrapper. ng g application dashboard --routing ng g c home --project=dashboard Also, we added a home component to the dashboard. Time to create the first micro front end: ng g application chart1 --routing Then it is needed to create a module inside that application that will be lazy-loaded to the host component, plus we can create a component that will display some demo content: ng g m bar --routing --project=chart1 ng g c bar --project=chart1 Setting up routing in the newly created application: dashboard-mf / projects / chart1 / src / app /app-routing.module.ts { NgModule } ; { RouterModule, Routes } ; routes: Routes = [
  { : , : ( ).then( m.BarModule)
  }
];

@NgModule({ : [RouterModule.forRoot(routes)], : [RouterModule]
}) { } import from '@angular/core' import from '@angular/router' const path 'chart1' loadChildren => () import './bar/bar.module' ( ) => m imports exports export class AppRoutingModule dashboard-mf / projects / chart1 / src / app / bar /bar-routing.module.ts { NgModule } ; { RouterModule, Routes } ; {BarComponent} ; routes: Routes = [
  { : , : BarComponent
  }
];

@NgModule({ : [RouterModule.forChild(routes)], : [RouterModule]
}) { } import from '@angular/core' import from '@angular/router' import from "./bar.component" const path '' component imports exports export class BarRoutingModule Then styling and some HTML content: dashboard-mf / projects / chart1 / src / app / bar /bar.component.html Statistics bar chart content < > section < > span </ > span </ > section { : ; : ; : ; : flex; : center; : center; : dashed ; : ; : ; : bold;
} section width 100% height 100% background-color #0088cc0f display justify-content align-items border 4px #73089f color #73089f font-size 50px font-weight We have almost everything ready to tie up the host app with the micro front end. At that point, the Module federation comes. That plugin should be installed for both parts: ng add @angular-architects/ -federation --project dashboard --port module 4200 ng add @angular-architects/ -federation --project chart1 --port module 5000 Important that both should be running in different ports. After installing a plugin, you can notice that inside the dashboard and chart1 components appeared a webpack configuration file ( ). To be able to run everything correctly we need to edit it a bit. webpack.config.js Inside the micro front end app, we need to uncomment code under "For remotes" comment and edit the code below. name: , : , : { : ,
        }, "chart1" filename "chartEntry.js" exposes './BarModule' './projects/chart1/src/app/bar/bar.module.ts' The same changes are applicable for the host app, but under the comment "For hosts". remotes: { : }, "chart1" "chart1@http://localhost:5000/chartEntry.js" Also, package.json should be updated. The following lines have to be added: : { : , : }, "resolutions" "webpack" "^5.4.0" "license-webpack-plugin" "2.3.17" Let's set up routing in the dashboard component to be able to load independent apps. Furthermore, we will add some content to HTML templates and style a bit a dashboard. dashboard-mf / projects / dashboard / src / app /app.component.html Home Statistics charts < > section < = > div class "sidenav" < = > a routerLink "/" < = > i class "fa fa-home" </ > i </ > a < = > a routerLink "/chart1" < = > i class "fa fa-signal" </ > i </ > a </ > div < = > div class "mf-content" < > router-outlet </ > router-outlet </ > div </ > section {NgModule} ; {RouterModule, Routes} ; {HomeComponent} ; routes: Routes = [
  {
    path: ,
    component: HomeComponent,
    pathMatch: },
  {
    path: ,
    loadChildren: ( ).then( { m.BarModule;
      })
  },
]; ({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
}) AppRoutingModule {
} import from '@angular/core' import from '@angular/router' import from "./home/home.component" const '' 'full' 'chart1' => () import 'chart1/BarModule' ( ) => m return @NgModule export class Here we will get an error, cause the dashboard app does not know anything about BarModule, so we need to declare it. For that, I created a file in the root of app where I declared a module. type.d.ts, dashboard-mf / projects / dashboard / src / app /app.component.scss @ url(//netdna.bootstrapcdn.com/font-awesome/ . /css/font-awesome.css); { : ; : ; : flex; : flex-end; : center; { : ; : ; : ;

  } { : ;
  }
} { : ; : ; : fixed; : ; : ; : ; : ; : hidden; : ;
} { : ; : none; : ; : ; : block; : ;
} :hover { : ;
} { : ; : ;
}

@ screen and (max-height: 450px) { { : ;} { : ;}
} import 4.0 3 section width 100% height 100% display justify-content align-items .mf-content width 83% height 95vh padding 15px i margin-right 10px .sidenav height 100% width 15% position z-index 1 top 0 left 0 background-color #0088cc overflow-x padding-top 20px .sidenav a padding 6px 8px 6px 16px text-decoration font-size 20px color #dddddd display margin-top 10px .sidenav a color #ffffff .main margin-left 160px padding 0px 10px media .sidenav padding-top 15px .sidenav a font-size 18px dashboard/src/app/home/home.component.html Home page content < > section < > span </ > span </ > section dashboard/src/app/home/home.component.scss { : ; : ; : ; : flex; : center; : center; : dashed orange; : orange; : ; : bold;
} section width 100% height 100% background-color #0088cc0f display justify-content align-items border 4px color font-size 50px font-weight dashboard-mf / projects / chart1 / src / app / bar /bar.component.scss { : ; : ; : ; : flex; : center; : center; : dashed ; : ; : ; : bold;
} section width 100% height 100% background-color #0088cc0f display justify-content align-items border 4px #73089f color #73089f font-size 50px font-weight To run the app, we need to serve dashboard and chrat1 projects. To do that, these commands have to be executed: ng serve dashboard serve chart1 ng Here is a quick overview of what we achieve so far. We have a home component that is part of the dashboard wrapper and also we have a link to "Statistics charts", once we click on them, the micro fronted "chart1" gets loaded: Wrapping up The goal is achieved, we have created an application that can host another independent app. This is just a simple introduction to how we can deal with micro frontends in Angular applications. This is a kind of template, which still requires a lot of things to be done. This is the first step of developing large applications using micro frontends. I left that example of the template in my , so feel free to pick it up. GitHub Hope it was useful! Cheers!

ORANGE

2022 - HackerNoon Contributor of the Year - Angular

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - HackerNoon Contributor of the Year - Angular

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Splitting Angular Applications Into Micro Front-Ends

Too Long; Didn't Read

Company Mentioned

Maksym Mostovyi

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Splitting Angular Applications Into Micro Front-Ends

Too Long; Didn't Read

Company Mentioned

Maksym Mostovyi

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES