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(...