Angular: Federated modules for production

Viewed 449

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.

1 Answers

I know it's probably late for this one. But in my case setting "target": "es2020" in tsconfig helped

Related