Reputation: 75
I'm trying to run Angular MFE application with Angular different versions using Web component technique. But I'm getting below error.
ERROR RuntimeError: 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
Main App with Angular 19
Webpack.config.js
plugins: [
new ModuleFederationPlugin({
library: { type: 'module' },
remotes: {
},
shared: share({
'@angular/core': {
singleton: false,
strictVersion: false,
requiredVersion: 'auto',
},
'@angular/common': {
singleton: false,
strictVersion: false,
requiredVersion: 'auto',
},
'@angular/router': {
singleton: false,
strictVersion: false,
requiredVersion: 'auto',
},
...sharedMappings.getDescriptors(),
}),
}),
sharedMappings.getPlugin(),
],
MFE App - Angular 17
App.module.ts
export class AppModule {
constructor(private injector: Injector) {
}
ngDoBootstrap() {
const ce = createCustomElement(AppComponent, {injector: this.injector});
customElements.define('angular1-element', ce);
}
}
Webpack.config.js
plugins: [
new ModuleFederationPlugin({
library: { type: "module" },
name: "request",
filename: "remoteEntry.js",
exposes: {
'./Module': './src/app/request.module.ts',
},
shared: share({
'@angular/core': {
singleton: false,
strictVersion: false,
requiredVersion: 'auto',
},
'@angular/common': {
singleton: false,
strictVersion: false,
requiredVersion: 'auto',
},
'@angular/router': {
singleton: false,
strictVersion: false,
requiredVersion: 'auto',
},
// '@pnc/imaging': {
// singleton: true,
// },
...sharedMappings.getDescriptors(),
}),
}),
sharedMappings.getPlugin()
],
Upvotes: 1
Views: 14