如何在 Angular 模块联盟中不刷新窗口的情况下更新远程模块

Question

我正在尝试实现动态模块联合，其中我有一个主机应用程序和几个远程应用程序。例如，在运行包括主机应用程序在内的所有应用程序之后，以及稍后当我停止其中一个远程应用程序时以及当我重定向到该应用程序时，它显示了先前加载的模块。我需要动态更新模块而不刷新页面。

import { loadRemoteModule } from '@angular-architects/module-federation';
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { NotFoundComponent } from './not-found/not-found.component';

export const APP_ROUTES: Routes = [
  {
    path: '',
    // component: HomeComponent,
    pathMatch: 'full',
    redirectTo: 'cli-commands',
  },

  {
    path: 'log-collection',
    loadChildren: () =>
      loadRemoteModule({
        type: 'manifest',
        remoteName: 'log-collection',
        exposedModule: './Module',
      })
        .then((m) => m.LogCollectionModule)
        .catch((err) => {
          return import('./not-found/not-found.module').then((m) => m.NotFoundModule);
        }),
  },
 
  {
    path: 'encrypt',
    loadChildren: () =>
      loadRemoteModule({
        type: 'manifest',
        remoteName: 'encrypt',
        exposedModule: './Module',
      })
        .then((m) => m.EncryptModule)
        .catch((err) => {
          console.log(err);
          
          return import('./not-found/not-found.module').then((m) => m.NotFoundModule);
        }),
  },
  
  {
    path: 'audit-trail',
    loadChildren: () =>
      loadRemoteModule({
        type: 'manifest',
        remoteName: 'audit-trail',
        exposedModule: './Module',
      })
        .then((m) => m.AuditTrailModule)
        .catch((err) => {
          return import('./not-found/not-found.module').then((m) => m.NotFoundModule);
        }),
    data: { remoteEntry: 'http://localhost:4207/remoteEntry.js' }
  },
  {
    path: 'not-found',
    component: NotFoundComponent,
  },
  {
    path: '**',
    component: NotFoundComponent,
  },
];

这是我的 app.routes.ts 文件，下面是我的主机应用程序的 webpack.config.ts

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const { MFLiveReloadPlugin } = require("@module-federation/fmr");

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(path.join(__dirname, "../../tsconfig.json"), [
  /* mapped paths to share */
 
]);
console.log(path.resolve(__dirname, '..'));
module.exports = {
  output: {
    uniqueName: "shell-rcm",
    publicPath: 'auto',
  },
  optimization: {
    // Only needed to bypass a temporary bug
    runtimeChunk: false,
  },
  devServer: {
    liveReload: true,
    watchFiles: [path.resolve(__dirname, '..', 'src/app')], // make sure that hits your host app folder
  },
  plugins: [
    new MFLiveReloadPlugin({
      port: 4200, // the port your app runs on
      container: "shell-rcm", // the name of your app, must be unique
      standalone: false, // false uses chrome extention
    }),
    new ModuleFederationPlugin({
      shared: {
        "@angular/core": { singleton: true, strictVersion: true },
        "@angular/common": { singleton: true, strictVersion: true },
        "@angular/router": { singleton: true, strictVersion: true },
        "@angular/material": { singleton: true, strictVersion: true },
        "ngx-toastr": { singleton: true, strictVersion: true },
        // "keycloak-angular": { singleton: true, strictVersion: true, eager: true },

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

Answer 1

要实现动态模块联合更新而不刷新 Angular 主机应用程序中的页面，您需要在开发环境中实现模块重新加载或热模块替换（HMR）。这允许您的应用程序检测远程模块中的更改并应用这些更改，而无需重新加载整页。

以下是为 Angular 主机应用程序设置 HMR 的方法：

在 Angular CLI 中启用 HMR:

ng config cli.webpackOptions.hmr true

安装必要的软件包:

npm install --save-dev @angular-devkit/build-angular@latest @angular/cli@latest

更新

webpack.config.ts

：

entry: [
  'webpack-dev-server/client?http://localhost:4200/',
  'webpack/hot/dev-server',
  // Other entry points...
],

在

ng serve

中启用 HMR：

ng serve --hmr

通过这些步骤，您的 Angular 主机应用程序现在应该支持 HMR，使其能够检测远程模块中的更改并动态更新它们，而无需重新加载整页。

此外，请确保您的远程模块也配置为支持 HMR。这通常涉及在远程模块的 webpack 配置中设置 HMR。一旦您的主机和远程应用程序都配置为 HMR，对远程模块的更改应动态反映在您的主机应用程序中，而无需刷新页面。