error NG0203: The `InjectionToken router duplicate forRoot guard` token injection failed

I am doing micro frontend project with angular and native federation and I have some problems here. I have a host app with two remote apps. The first remote app I config and It works with both starting by host's port and remote's port. Therefore, I config the same with the second apps. The second When I run remote app by its port, it ran successfully. However, when I run this app by host's port, console appear error:

ERROR RuntimeError: NG0203: The `InjectionToken router duplicate forRoot guard` token injection failed. `inject()` function must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.dev/errors/NG0203
at injectInjectorOnly (_angular_core.SEGCYURADf-dev.js:525:11)
at ɵɵinject (_angular_core.SEGCYURADf-dev.js:542:59)
at inject (_angular_core.SEGCYURADf-dev.js:551:10)
at new _RouterModule (_angular_router.n-rZVwZ5V6-dev.js:5660:7)
at Object.RouterModule_Factory [as useFactory] (_angular_router.n-rZVwZ5V6-dev.js:5730:12)
at Object.factory (_angular_core.lluzgBGpgt-dev.js:1320:32)
at _angular_core.lluzgBGpgt-dev.js:1241:35
at runInInjectorProfilerContext (_angular_core.lluzgBGpgt-dev.js:409:5)
at R3Injector.hydrate (_angular_core.lluzgBGpgt-dev.js:1239:11)
at R3Injector.get (_angular_core.lluzgBGpgt-dev.js:1131:23)


I'm sure that I had checked two remote apps to make sure that they are the same. These are my code:

The first is files from first remote app:

main.ts:

import { initFederation } from '@angular-architects/native-federation';
import { initializeKeycloak } from '@keycloak/keycloak-init'

initializeKeycloak()
.then(() => {
initFederation()
.catch(err => console.error(err))
.then(_ => import('./bootstrap'))
.catch(err => console.error(err));
})



app-module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing-module';

@NgModule({
imports: [
CommonModule,
AppRoutingModule
]
})
export class AppModule {
constructor(){
console.log('app-module.ts of vehicle loaded !');
}
}



vehicle-module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing-module';
import { App } from './app';
import { RouterModule } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

@NgModule({
declarations: [App],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule.forRoot([])
],
providers: [
provideHttpClient()
],
bootstrap: [App]
})
export class VehicleModule {
constructor(){
console.log('vehicle-module.ts loaded !');
}
}



app-routing-module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { VehicleComponent } from './pages/vehicle/vehicle.component';
import { AddVehicleComponent } from './pages/addVehicle/addVehicle.component';
import { UpdateVehicleComponent } from './pages/updateVehicle/updateVehicle.component';

const routes: Routes = [
{path: '', component: VehicleComponent},
{path: 'add', component: AddVehicleComponent},
{path: 'update/:id', component: UpdateVehicleComponent}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
constructor(){
console.log('app-routing-module.ts of vehicle loaded')
}
}



federation.config.js:

const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({

name: 'vehicle',

exposes: {
'./vehicle': './src/app/app-module.ts',
},

shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' })
},

skip: [
'rxjs/ajax',
'rxjs/fetch',
'rxjs/testing',
'rxjs/webSocket',
// Add further packages you don't need at runtime
],

// Please read our FAQ about sharing libs:
// https://shorturl.at/jmzH0

features: {
// New feature for more performance and avoiding
// issues with node libs. Comment this out to
// get the traditional behavior:
ignoreUnusedDeps: true
}

});



bootstrap.ts:

import { platformBrowser } from '@angular/platform-browser';
import { VehicleModule } from './app/vehicle-module';

platformBrowser().bootstrapModule(VehicleModule, {
ngZoneEventCoalescing: true,
})
.catch(err => console.error(err));



The second is files from second remote app:

main.ts

import { initFederation } from '@angular-architects/native-federation';
import { initializeKeycloak } from '@keycloak/keycloak-init'

initializeKeycloak()
.then(() => {
initFederation()
.catch(err => console.error(err))
.then(_ => import('./bootstrap'))
.catch(err => console.error(err));
})



app-module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing-module';

@NgModule({
imports: [
CommonModule,
AppRoutingModule
]
})
export class AppModule {
constructor(){
console.log('app-module.ts of manufacturer loaded !');
}
}



manufacturer-module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing-module';
import { App } from './app';
import { RouterModule } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

@NgModule({
declarations: [App],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule.forRoot([])
],
providers: [
provideHttpClient()
],
bootstrap: [App]
})
export class ManufacturerModule {
constructor(){
console.log('manufacturer-module.ts loaded !');
}
}



app-routing-module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ManufacturerComponent } from './pages/manufacturer/manufacturer.component';
import { AddManufacturerComponent } from './pages/addManufacturer/addManufacturer.component';
import { UpdateManufacturerComponent } from './pages/updateManufacturer/updateManufacturer.component';

const routes: Routes = [
{path: '', component: ManufacturerComponent},
{path: 'add', component: AddManufacturerComponent},
{path: 'update/:id', component: UpdateManufacturerComponent}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
constructor(){
console.log('app-routing-module.ts of manufacturer loaded')
}
}



federation.config.js:

const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({

name: 'manufacturer',

exposes: {
'./manufacturer': './src/app/app-module.ts',
},

shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
},

skip: [
'rxjs/ajax',
'rxjs/fetch',
'rxjs/testing',
'rxjs/webSocket',
// Add further packages you don't need at runtime
],

// Please read our FAQ about sharing libs:
// https://shorturl.at/jmzH0

features: {
// New feature for more performance and avoiding
// issues with node libs. Comment this out to
// get the traditional behavior:
ignoreUnusedDeps: true
}

});



bootstrap.ts:

import { platformBrowser } from '@angular/platform-browser';
import { ManufacturerModule } from './app/manufacturer-module';

platformBrowser().bootstrapModule(ManufacturerModule, {
ngZoneEventCoalescing: true,
})
.then(()=> {
console.log('boostrap.ts of manufacturer loaded !')
})
.catch(err => console.error(err));



this is file app-routing-module.ts of host app:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { loadRemoteModule } from '@angular-architects/native-federation';

const routes: Routes = [
{
path: '',
redirectTo: 'vehicle',
pathMatch: 'full',
},
{
path: 'vehicle',
loadChildren: () =>
loadRemoteModule('vehicle', './vehicle').then((m) => m.AppModule)
},
{
path: 'manufacturer',
loadChildren: () =>
loadRemoteModule('manufacturer', './manufacturer').then((m) => m.AppModule)
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
constructor() {
console.log('app-routing-module.ts of shell loaded !');
}
}



I checked log and discovered that app-routing-module of manufacturer app have problem but it is the same as vehicle app

Continue reading...