Dynamically loading micro frontends
Let’s prepare our main application gym diary to consume the micro frontend that we prepared previously. To do this, let’s start by creating a new module in the application. On the command line, we will use the following Angular CLI commands:
ng g m exercise --routing ng g c exercise/exercise
With the preceding commands, we create the module with the generated route file and a component that will be responsible for loading mfe.
Let’s adjust the exercise-routing.module.ts file to target the component:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ExerciseComponent } from './exercise/exercise.component';
const routes: Routes = [
{
path: '',
component: ExerciseComponent,
title: 'Exercise Registry',
},
];
@NgModule(...