Module Federation : Getting "Unexpected token export" when routing to Module Using Module...

I am using angular 15, implementing module federation. I am using the package @angular-architects/module-federation. I have added module federation using the command ng add @angular-architects/module-federation. Now in the shell App when i am navigating to the module, I can see the remoteEntry.js file in the network tab. but the module is not loading, i am getting error Uncaught SyntaxError: Unexpected token 'export' (at remoteEntry.js:7762:10) Line at which i am getting error

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'init')
TypeError: Cannot read properties of undefined (reading 'init')
at angular-architects-module-federation-runtime.mjs:22:21
at Generator.next (<anonymous>)
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:22:1)
at _ZoneDelegate.invoke (zone.js:375:26)
at Object.onInvoke (core.mjs:24210:33)
at _ZoneDelegate.invoke (zone.js:374:52)
at Zone.run (zone.js:134:43)
at zone.js:1278:36
at _ZoneDelegate.invokeTask (zone.js:409:31)
at angular-architects-module-federation-runtime.mjs:22:21
at Generator.next (<anonymous>)
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:22:1)
at _ZoneDelegate.invoke (zone.js:375:26)
at Object.onInvoke (core.mjs:24210:33)
at _ZoneDelegate.invoke (zone.js:374:52)
at Zone.run (zone.js:134:43)
at zone.js:1278:36
at _ZoneDelegate.invokeTask (zone.js:409:31)
at resolvePromise (zone.js:1214:31)
at zone.js:1121:17
at zone.js:1137:33
at asyncGeneratorStep (asyncToGenerator.js:6:1)
at _next (asyncToGenerator.js:22:1)
at _ZoneDelegate.invoke (zone.js:375:26)
at Object.onInvoke (core.mjs:24210:33)
at _ZoneDelegate.invoke (zone.js:374:52)
at Zone.run (zone.js:134:43)
at zone.js:1278:36


Attaching below the webpack.config.js of both the applications. mfe app

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(path.join(__dirname, "tsconfig.json"), [
/* mapped paths to share */
]);

module.exports = {
output: {
uniqueName: "v17",
publicPath: "auto",
scriptType: "text/javascript",
},
optimization: {
runtimeChunk: false,
},
resolve: {
alias: {
...sharedMappings.getAliases(),
},
},
experiments: {
outputModule: true,
},
plugins: [
new ModuleFederationPlugin({
library: { type: "module" },

// For remotes (please adjust)
name: "v17",
filename: "remoteEntry.js",
exposes: {
"./SupersetModule": "src/app/superset/superset.module.ts",
},

// For hosts (please adjust)
// remotes: {
// mfe1: "http://localhost:4300/remoteEntry.js",
// },

shared: share({
"@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
...sharedMappings.getDescriptors()
}),
}),
sharedMappings.getPlugin(),
],
};



--- Host App

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(path.join(__dirname, "tsconfig.json"), [
/* mapped paths to share */
]);

module.exports = {
output: {
uniqueName: "shell",
publicPath: "auto",
scriptType: "text/javascript",
},
optimization: {
runtimeChunk: false,
},
resolve: {
alias: {
...sharedMappings.getAliases(),
},
},
experiments: {
outputModule: true,
},
plugins: [
new ModuleFederationPlugin({
library: { type: "module" },

// For remotes (please adjust)
name: "shell",
// filename: "remoteEntry.js",
// exposes: {
// './Component': './/src/app/app.component.ts',
// },

// For hosts (please adjust)
remotes: {
v17: "v17@http://localhost:3000/remoteEntry.js",
},

shared: share({
"@angular/core": {
singleton: true,
strictVersion: true,
requiredVersion: "auto",
},
"@angular/common": {
singleton: true,
strictVersion: true,
requiredVersion: "auto",
},
"@angular/common/http": {
singleton: true,
strictVersion: true,
requiredVersion: "auto",
},
"@angular/router": {
singleton: true,
strictVersion: true,
requiredVersion: "auto",
},

...sharedMappings.getDescriptors(),
}),
}),
sharedMappings.getPlugin(),
],
};




I have gone through multiple blogs and no one has mentioned these errors. tried setting up multiple set ups for the same but resulting the same error.

Continue reading...