core
core copied to clipboard
module-federation
Nx angular dynamic mfe got NG0203 error
Describe the bug
I had no issuse since i used nx mfe with angular 15,
but i tried to migrate to angular 18 and got this error when navigating from shell (host) app to another mfe
Error: NG0203: inject() 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
i also saw this topic
https://github.com/nrwl/nx/issues/19121
and then i tried it on my two envirements which is a windows system and debian linux, and in both cases got the same error.
Reproduction
clone this repo https://github.com/mehrabix/nx-angular-mfe
do npm i
run this command: npx nx serve shell --devRemotes="first-microfront,second-microfront"
Used Package Manager
npm
System Info
System:
OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
Memory: 2.24 GB / 7.53 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 22.5.1 - /home/linuxbrew/.linuxbrew/bin/node
npm: 10.8.2 - /home/linuxbrew/.linuxbrew/bin/npm
pnpm: 9.5.0 - /home/linuxbrew/.linuxbrew/bin/pnpm
Browsers:
Chrome: 126.0.6478.114
Validations
- [X] Read the docs.
- [X] Read the common issues list.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Module federation issue and not a framework-specific issue.
- [X] The provided reproduction is a minimal reproducible example of the bug.
Hi,
I got some clues. Clone this repository (it's mentioned in the Angular MFE tutorial: https://nx.dev/recipes/angular/dynamic-module-federation-with-angular):
https://github.com/Coly010/nx-ng-dyn-fed
Run: npx nx serve employee --devRemotes="dashboard,todo,login" navigate between remote links The Angular version is 18.0.4, and it works perfectly. Then, run this in order to migrate to Angular 18.1.2. It will migrate successfully: nx migrate latest
After that, run: npx nx serve employee --devRemotes="dashboard,todo,login" again. navigate between remote links It will not work anymore, and you will get the NG0203 error.
@mehrabix
Can you open this issue on the Nx Repo? It’s not directly related to this package.
Hi @Coly010 I don't think it's related to Nx. as i mentioned it's working on Angular 18.0.4 and not 18.1.2 Anyway i did it. Thanks https://github.com/nrwl/nx/issues/27162
@Coly010 This bug most certainly is not related to Nx. I'm doing the same thing with an Angular 17 remote and receiving the same error. In my case, however, my host is a single spa MFE using systemjs externals, @angular-architects/module-federation to load this remote, and I'm trying to use this example to point the angular dependencies to the systemjs map. Now, before I tried figuring out this remote plugin stuff, I noticed the remoteEntry file can't even figure out how to share the angular dependencies so I've been trying to reverse engineer the cause of this and haven't found anything yet. This enhanced mod fed plugin is missing something the webpack version isn't.
extra-webpackconfig.js
const modfedOptions = {
library: { type: "module" },
filename: "remoteEntry.js",
name: 'CarrierPigeonApp',
exposes: {
'./Component': './src/app/app.component.ts', // this is a standalone component
},
shared: //{ ...deps },
share({
// '@angular/core': {
// singleton: true,
// strictVersion: true,
// requiredVersion: 'auto',
// }
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}),
// runtimePlugins: [require.resolve('./npm-runtime-global-plugin')],
dts: false,
disableManifest: true
};
module.exports = (config, options) => {
// const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);
config.experiments = {
outputModule: true
};
config.output = {
...config.output,
uniqueName: "CarrierPigeonApp",
// depending on what imports the remote entry determines if this succeeds or not
publicPath: "auto",
};
config.optimization = {
...config.optimization,
runtimeChunk: false
};
config.plugins = [
...config.plugins,
new ModuleFederationPlugin(modfedOptions)
];
return config;
};
angular.json
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"outputPath": "dist/carrier-pigeon-app",
"index": "src/index.html",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"scripts": [],
"main": "src/main.ts",
"customWebpackConfig": {
"path": "extra-webpack.config.js",
"libraryName": "CarrierPigeonApp",
"libraryTarget": "umd"
}
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "none"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true,
"outputHashing": "none"
}
},
"defaultConfiguration": "production"
}
main.ts
import('./bootstrap')
.catch(err => console.error(err));
bootstrap.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));
package.json dependencies
The shared resource map compiled using the enhanced mod fed plugin
The shared resource map compiled using webpack's mod fed plugin
As you can see, swapping out mod fed plugins leads to different shared mappings which is probably a separate bug altogether, but should give a hint that this plugin has a problem with Angular projects.
To be clear though, I receive the same error with both the enhanced mod fed plugin and webpack's mod fed plugin. My hope in figuring out the runtime plugin will lead to my remote to being able to access the same service instances my single spa mfe host uses.
Figured out my problem was using angular-architects' shareAll function. For some reason I needed to specify my shared dependencies the manual way and everything just worked afterwards
