-
-
Notifications
You must be signed in to change notification settings - Fork 212
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Nx angular dynamic mfe got NG0203 error #2797
Comments
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: After that, run: |
Can you open this issue on the Nx Repo? It’s not directly related to this package. |
Hi @Coly010 |
@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)); 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 |
Angular Architects might be incorrect for V2 |
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/NG0203i also saw this topic
nrwl/nx#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
Validations
The text was updated successfully, but these errors were encountered: