angular-architects / module-federation-plugin

MIT License
713 stars 189 forks source link

zone.js:1061 Unhandled Promise rejection: container.init is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: container.init is not a function #207

Open CP-Ram opened 2 years ago

CP-Ram commented 2 years ago

Hi, I am using angular v14.1.1 and "@angular-architects/module-federation": "^14.3.10", "@angular-architects/module-federation-tools": "^14.3.10", "ngx-build-plus": "^14.0.0" in host and remote apps to exposes web-components.

Here is my remote webpack.config.js

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({
  // name: 'mfe1',

  // exposes: {
  //   './Module': './src/app/mfe/mfe.module.ts',
  // },
  name: "angular14",
  library: { type: "var", name: "angular14" },
  filename: "remoteEntry.js",
  exposes: {
    './web-components': './src/bootstrap.ts',
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

});

remote bootstrap.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// if (environment.production) {
//   enableProdMode();
// }

// platformBrowserDynamic().bootstrapModule(AppModule)
//   .catch(err => console.error(err));
import { bootstrap } from '@angular-architects/module-federation-tools';

bootstrap(AppModule, {
  production: environment.production,
  appType: 'microfrontend'
});

remote app module.ts

export class AppModule implements DoBootstrap
{
  constructor(private injector: Injector) { }
  ngDoBootstrap(): void {
    if (!customElements.get('angular14-customer')) {
      customElements.define(
        'angular14-customer',
        createCustomElement(MFEComponent, { injector: this.injector })
      );
    }
  }
 }

Host App app.module.ts

{
  path: 'angular14-customer',
  component: WebComponentWrapper,
  data: {
    remoteEntry: 'http://localhost:4201/remoteEntry.js',
    exposedModule: './web-components',
    elementName: 'angular14-customer'
  } as WebComponentWrapperOptions
}

bootstrap.ts

import { bootstrap } from '@angular-architects/module-federation-tools';

bootstrap(AppModule, {
  production: environment.production,
  appType: 'shell'
});

remote app running : http://localhost:4201/ host app:http://localhost:4200/

Error: zone.js:1061 Unhandled Promise rejection: container.init is not a function ; Zone: ; Task: Promise.then ; Value: TypeError: container.init is not a function

Environment: development

CP-Ram commented 2 years ago

After commented library property section from remote mfe app webpack.config.js .Error got disappear for me.

module.exports = withModuleFederationPlugin({
  name: "angular14",
  // library: { type: "var", name: "angular14" },
  filename: "remoteEntry.js",
  exposes: {
    './web-components': './src/bootstrap.ts',
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

});

Any suggestion on this , is this expected behavior?