So I am using webpack 5 to demonstrate Module Federation in Angular 19. For this I have created a 'host-app' and a 'remote-app' and done all the required configurations related to webpack.config.js in both. My 'remoteEntry.js' file is getting generated as expected but Angular is not able read the keywords like 'export' in the 'remoteEntry.js' file. The reason behind this is likely to be related to the 'remoteEntry.js' being read as text javascript file rather than a type="module". I tried all the things but still unable to resolve this issue. Please find below code snippets for the reference:

ERROR Screenshot:

remote-app webpack.config.js

host-app webpack.config.js

app.routes.ts

tsconfig.json

So I am using webpack 5 to demonstrate Module Federation in Angular 19. For this I have created a 'host-app' and a 'remote-app' and done all the required configurations related to webpack.config.js in both. My 'remoteEntry.js' file is getting generated as expected but Angular is not able read the keywords like 'export' in the 'remoteEntry.js' file. The reason behind this is likely to be related to the 'remoteEntry.js' being read as text javascript file rather than a type="module". I tried all the things but still unable to resolve this issue. Please find below code snippets for the reference:

ERROR Screenshot:

remote-app webpack.config.js

host-app webpack.config.js

app.routes.ts

tsconfig.json

• micro-frontend
• webpack-module-federation
• angular-module-federation
• angular19

1 Answer 1

I had an error like this. If you print your config you'll see, that "library" property of ModuleFederationPlugin is { type: "module" }. I changed it to { type: "var", name: "nameOfYourApp" } and this action fixed the error. Something like this:

mfConfig.plugins[0]._options.library = {type: 'var', name: 'name'}