ng new shell-app --routing --style=scss

ng add @angular-architects/module-federation --type host --port 4200

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  output: {
    publicPath: "http://localhost:4200/",
    uniqueName: "shell"
  },
  optimization: {
    runtimeChunk: false
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "shell",
      remotes: {
        mfeProduct: "mfeProduct@http://localhost:4201/remoteEntry.js",
        mfeProfile: "mfeProfile@http://localhost:4202/remoteEntry.js"
      },
      shared: {
        "@angular/core": { singleton: true, strictVersion: true },
        "@angular/common": { singleton: true, strictVersion: true },
        "@angular/router": { singleton: true, strictVersion: true }
      }
    })
  ]
};

ng new mfe-product --routing --style=scss

new ModuleFederationPlugin({
  name: "mfeProduct",
  filename: "remoteEntry.js",
  exposes: {
    "./ProductModule": "./src/app/product/product.module.ts"
  },
  shared: {
    "@angular/core": { singleton: true, strictVersion: true },
    "@angular/common": { singleton: true, strictVersion: true }
  }
});

import { loadRemoteModule } from '@angular-architects/module-federation';

export const routes: Routes = [
  {
    path: 'product',
    loadChildren: () =>
      loadRemoteModule({
        remoteEntry: 'http://localhost:4201/remoteEntry.js',
        remoteName: 'mfeProduct',
        exposedModule: './ProductModule'
      }).then(m => m.ProductModule)
  }
];