How to solve ERROR w: NG0203 in Angular 18 with Native Federation

I've upgraded my application (host and microfrontends) to Angular v18.2.4 and Native Federation 18.2.2.

The host loads fine, but as it attempts to load another MFE, it seems there is a conflict in Angular versions, and the entire application freezes up.

I used Manfred Steyer's 18.2 update from last month to fix a similar issue when I first tried to handle the upgrade. I thought it was all I needed. It was working for a while. But now it seems again to be due to Angular version mismatch. Did an upgrade to Angular or a library change this?

Or is there something else going on?

I'm using fairly vanilla dependency trees.

This is the host:

"dependencies": {
"@angular-architects/native-federation": "^18.2.2",
"@angular-eslint/schematics": "^18.3.1",
"@angular/animations": "^18.2.4",
"@angular/common": "^18.2.4",
"@angular/compiler": "^18.2.4",
"@angular/core": "^18.2.4",
"@angular/forms": "^18.2.4",
"@angular/platform-browser": "^18.2.4",
"@angular/platform-browser-dynamic": "^18.2.4",
"@angular/router": "^18.2.4",
"es-module-shims": "^1.5.12",
"lazy-line-painter": "1.9.6",
"rxjs": "~6.6.0",
"tslib": "^2.3.0",
"umbrella-library": "^2.1.1",
"windowed-observable": "^1.0.0",
"zone.js": "~0.14.10"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.2.4",
"@angular-devkit/core": "^18.2.4",
"@angular/cli": "^18.2.4",
"@angular/compiler-cli": "^18.2.4",
"@schematics/angular": "^18.2.4",
"@types/jasmine": "~3.8.0",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "^6.10.0",
"@typescript-eslint/parser": "^6.10.0",
"eslint": "^8.53.0",
"jasmine-core": "~3.8.0",
"js-beautify": "=1.10.2",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"prettier": "^2.6.2",
"typescript": "^5.4.5"
}


And this is for the MFEs:

"dependencies": {
"@angular-architects/native-federation": "^18.2.2",
"@angular/animations": "^18.2.4",
"@angular/cdk": "^18.2.4",
"@angular/common": "^18.2.4",
"@angular/compiler": "^18.2.4",
"@angular/core": "^18.2.4",
"@angular/forms": "^18.2.4",
"@angular/platform-browser": "^18.2.4",
"@angular/platform-browser-dynamic": "^18.2.4",
"@angular/router": "^18.2.4",
"angular-oauth2-oidc": "^16.0.0",
"es-module-shims": "^1.5.12",
"ng-zorro-antd": "^18.1.1",
"rxjs": "~6.6.0",
"tslib": "^2.3.0",
"umbrella-library": "^2.1.1",
"zone.js": "~0.14.10"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.2.4",
"@angular/build": "^18.2.4",
"@angular/cli": "^18.2.4",
"@angular/compiler-cli": "^18.2.4",
"@types/jasmine": "~3.8.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"js-beautify": "=1.10.2",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"prettier": "^2.6.2",
"typescript": "~5.4.5"
}


The host loads, but as I attempt to move to an MFE, loading through navigation on the host UI, nothing happens, and this is displayed in the console:

ERROR w: NG0203
at Kv (https://fleet.dev.com/mf-fleet-reports/_angular_core.x-zcvsTSJQ.js:2:2812)
at Module.ce (https://fleet.dev.com/mf-fleet-reports/_angular_core.x-zcvsTSJQ.js:2:2939)
at Gt.ɵfac [as useFactory] (https://fleet.dev.com/mf-fleet-reports/_angular_cdk_a11y.jN-GTyy3AR.js:1:40053)
at Object.o [as factory] (https://fleet.dev.com/_angular_core.HKJhf4bjIv.js:5:12521)
at uo.hydrate (https://fleet.dev.com/_angular_core.HKJhf4bjIv.js:5:11667)
at uo.get (https://fleet.dev.com/_angular_core.HKJhf4bjIv.js:5:10790)
at zv (https://fleet.dev.com/_angular_core.HKJhf4bjIv.js:2:2862)
at ae (https://fleet.dev.com/_angular_core.HKJhf4bjIv.js:2:2939)
at useValue (https://fleet.dev.com/_angular_core.HKJhf4bjIv.js:5:8906)
at uo.resolveInjectorInitializers (https://fleet.dev.com/_angular_core.HKJhf4bjIv.js:5:11167)

Continue reading...