ASSERTION ERROR: NgModule '_App' is not a subtype of 'NgModuleType'

I am having an Angular project with native federation and I have some problems here. I have error here. When I config routes to make shell connect to all components in a remote I have errors

ERROR Error: ASSERTION ERROR: NgModule '_App' is not a subtype of 'NgModuleType'. [Expected=> null != null <=Actual]
at throwError (chunk-ZMISMRFM.js:196:9)
at assertDefined (chunk-ZMISMRFM.js:192:5)
at new NgModuleRef2 (_angular_core.4mhX8oeljc-dev.js:9113:18)
at NgModuleFactory2.create (_angular_core.4mhX8oeljc-dev.js:9152:12)
at _angular_router.mqhevHtNpA-dev.js:3357:34
at chunk-GUPSMPXL.js:1884:31
at OperatorSubscriber2._this._next (chunk-GUPSMPXL.js:599:9)
at Subscriber2.next (chunk-GUPSMPXL.js:299:12)
at chunk-GUPSMPXL.js:2027:20
at OperatorSubscriber2._this._next (chunk-GUPSMPXL.js:599:9)


the following pictures are my project structure:





These are my code I think they caused problem:

The first is files from shell (host):

File app.ts:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Header } from './header/header';

@Component({
selector: 'app-shell-root',
standalone: true,
imports: [RouterOutlet, Header],
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
protected title = 'Vehicle Management';
constructor(){
console.log('app.ts of host app loaded !!!');
}
}



file app.config.ts:

import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';

console.log('app.config.ts of host loaded !!!');
export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideHttpClient(),
]
};



file app.routes.ts:

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

export const routes: Routes = [
{
path: '',
redirectTo: 'vehicle',
pathMatch: 'full',
},
{
path: 'vehicle',
loadChildren: () =>
loadRemoteModule('vehicle', './app').then(m => m.App)
.catch(err => console.error(err))
},
//others
{
path: '**',
component: Headers
},
];



the second is files from vehicle (remote):

file app.ts:

import { Component } from '@angular/core';
import { RouterModule, RouterOutlet } from '@angular/router';

@Component({
selector: 'app-vehicle-root',
standalone: true,
imports: [RouterOutlet, RouterModule],
templateUrl: './app.html',
styleUrl: './app.css',
})
export class App {
protected title = 'Vehicle';

constructor() {
console.log('✅ App.ts of remote load');
}

}



file federation.config.js:

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

module.exports = withNativeFederation({

name: 'vehicle',

exposes: {
'./app': './projects/vehicle/src/app/app.ts',
'./routes': './projects/vehicle/src/app/app.routes.ts',
'./VehicleComponent': './projects/vehicle/src/app/pages/vehicle/vehicle.component.ts',
'./AddVehicleComponent': './projects/vehicle/src/app/pages/addVehicle/addVehicle.component.ts',
'./UpdateVehicleComponent': './projects/vehicle/src/app/pages/updateVehicle/updateVehicle.component.ts'
},

shared: {
...shareAll({
singleton: true,
strictVersion: false,
requiredVersion: 'auto'
}),
'@angular/common/http': { singleton: true }
},

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

});



file app.config.ts:

import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';

console.log('app.config.ts của remote !!!!');
export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter( routes ),
provideHttpClient()
]
};



file app.routes.ts:

import { Routes } from '@angular/router';
import { authGuard } from '@keycloak/keycloak-auth.guard';
import { VehicleComponent } from './pages/vehicle/vehicle.component';
import { UpdateVehicleComponent } from './pages/updateVehicle/updateVehicle.component';
import { AddVehicleComponent } from './pages/addVehicle/addVehicle.component';

console.log('app.routes.ts of vehicle loaded !!!');
export const routes: Routes = [
{
path: '',
canActivate:[authGuard],
component: VehicleComponent,
},
{ path: 'update/:id', component: UpdateVehicleComponent },
{ path: 'add', component: AddVehicleComponent }
];



a part of code from file vehicle.component.ts:

@Component({
selector: 'vehicle-app',
standalone: true,
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule
],
templateUrl: './vehicle.component.html',
styleUrl: './vehicle.component.css'
})

export class VehicleComponent {
private destroy$ = new Subject<void>();

constructor(
private vehicleServices: VehicleServices,
private manufacturerServices: ManufacturerServices,
private router: Router,
private route: ActivatedRoute
) { console.log('✅ VehicleComponent đã được load'); }

vehicles: VehicleItems[] = [];
manufacturers: ManufacturerItems[] = [];

licensePlateKey = new FormControl('');
manufacturerId = new FormControl('');

currentPage: number = 0;
pageSize: number = 10;
totalItems: number = 0;
totalPages: number = 0;

ngOnInit(): void {
console.log('ngOnInit of vehicle component loaded !!!');
this.loadVehicles();
this.manufacturerServices.getAllManufacturers()
.pipe(takeUntil(this.destroy$))
.subscribe({
next: (manufacturers: ManufacturerItems[]) => {
this.manufacturers = manufacturers;
},
error: (err) => {
if (err.status === 401) {
alert("Your session has expired. Please load page again.");
}
else {
alert('Unexpected error occured !');
}
}
});
}



please help me solve this. Thank you

Continue reading...