vijred
vijred

Reputation: 75

Angular Micro Front End - Main App - Angular 19 and MFE App Agular 17 with Web component technique

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

Answers (0)

Related Questions