I'm trying to use federated modules with angular, and all the examples works fine when I'm running the application on development mode, when I call enableProduction() nothing seems to work.
This is my webpack.config.ts for the module:
import { Configuration, container } from 'webpack';
const webpackConfig: Configuration = {
output: {
uniqueName: 'mod_authentication',
publicPath: '',
},
experiments: {
outputModule: true,
},
optimization: {
runtimeChunk: false,
},
plugins: [
new container.ModuleFederationPlugin({
name: 'mod_authentication',
filename: "loginEntry.js",
library: { type: "module" },
exposes: {
"./LoginModule": "./src/app/login/login.module.ts",
},
shared: {
'@angular/core': { singleton: true },
'@angular/common': { singleton: true },
'@angular/router': { singleton: true },
'@angular/common/http': { singleton: true },
}
})
]
}
export default webpackConfig;
You can see that I have publicPath set to 'auto', on development mode it only works when I set to auto, nothing else works. And on production mode (deployed) I get this error when I try to access the module:
core.mjs:6485 ERROR Error: Uncaught (in promise): Error: Automatic publicPath is not supported in this browser
If I change publicPath to
publicPath: '',
I get this error:
ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk 166 failed. (error: http://localhost:4200/166.js) The weird part is, this 166.js only is mentioned when I set pulicPath different from 'auto', it shouldn't be trying to access this file that doesn't even exists on my application.
How can I make federated modules load a module dynamically with angular for production mode. Every example if I run "ng serve --configuration production" I get a lot of different errors
webpack.config for the shell application:
import { Configuration, container } from 'webpack';
const webpackConfig: Configuration = {
output: {
uniqueName: 'yeti-host',
publicPath: '/',
},
experiments: {
outputModule: true,
},
optimization: {
runtimeChunk: false,
},
plugins: [
new container.ModuleFederationPlugin({
library: { type: 'module' },
shared: {
'@angular/core': { singleton: true },
'@angular/common': { singleton: true },
'@angular/router': { singleton: true },
'@angular/common/http': { singleton: true },
}
})
]
}
export default webpackConfig;
Router on shell application:
import { loadRemoteModule } from '@angular-architects/module-federation';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { environment } from 'src/environments/environment';
const routes: Routes = [
{
path: 'login',
pathMatch: 'full',
loadChildren: () =>
loadRemoteModule({
type: 'module',
remoteEntry: environment.loginRemoteEntry,
exposedModule: './LoginModule'
}).then((m) => m.LoginModule)
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
on with ng serve it works.
If I deploy it to anywhere or simply run "ng serve --configuration production" it breaks when I try to load the remote module.