Angular Module Federation. Uncaught (in promise): TypeError: container.init is not a function

Question

I created two angular module federation apps using angular module federation plugin but faced with an error Uncaught (in promise): TypeError: container.init is not a function after I load the remote component error image link

I found this github issue thread with the solution to add scriptType: 'text/javascript' in output section of webpack.config.js file but it does not work for me.

If you need more details about apps here are links for host and remote repositories.

@angular/cli version is 13.0.2

@angular-architects/module-federation version is 14.2.3.

Thanks.

Answer 1

Made module federation work for the Angular standalone project.

Just installed Webpack 5.72.0 as a dev dependency.

Webpack was not listed in the dependencies of package.json and I took a look at its version via the node_modules folder, it was 5.64.0.

Answer 2

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".

After commented library property section from remote mfe app webpack.config.js .It's working 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' }),
  },

});

Not sure what is the reason but may help someone this also.