如何通过Single-Spa将AngularJS应用接入React宿主应用

核心问题分析 #

你遇到的Webpack无法解析index.html的错误，本质是AngularJS应用的Webpack配置中缺少处理HTML文件的loader——你在app.entry.js中直接导入了index.html作为模板，但Webpack默认不识别HTML文件类型，因此抛出缺失loader的错误。

具体修复步骤 #

1. 安装HTML处理依赖 #

在AngularJS应用目录下执行命令，安装用于解析HTML文件的html-loader，以及辅助HTML资源打包的html-webpack-plugin：

npm install html-loader html-webpack-plugin --save-dev

2. 修改AngularJS应用的Webpack配置 #

在webpack.config.js中添加两处关键配置：

• 新增module规则，让Webpack用html-loader处理HTML文件
• 配置HtmlWebpackPlugin，确保HTML模板正确参与打包流程

示例配置片段：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ... 保留原有配置
  module: {
    rules: [
      // ... 保留已有的JS、CSS等loader规则
      {
        test: /\.html$/i,
        loader: 'html-loader',
        options: {
          minimize: false, // AngularJS模板建议关闭压缩，避免指令或表达式被破坏
        },
      },
    ],
  },
  plugins: [
    // ... 保留已有的ModuleFederationPlugin配置
    new HtmlWebpackPlugin({
      template: './src/index.html', // 替换为你的AngularJS入口HTML实际路径
      filename: 'index.html',
    }),
  ],
};

3. 调整app.entry.js的HTML导入逻辑 #

确保HTML文件路径正确，并将导入的模板内容传入single-spa-angularjs的配置：

import singleSpaAngularJS from 'single-spa-angularjs';
import template from './index.html'; // 路径需与实际文件位置匹配

const angularLifecycles = singleSpaAngularJS({
  angular: window.angular,
  mainAngularModule: 'your-angular-app-module', // 替换为你的AngularJS主模块名称
  template: template,
  // ... 其他single-spa配置项（如domElementGetter等）
});

export const bootstrap = angularLifecycles.bootstrap;
export const mount = angularLifecycles.mount;
export const unmount = angularLifecycles.unmount;

4. 验证React宿主的注册配置 #

确认React宿主src/index.tsx中的AngularJS应用注册规则正确：

import { registerApplication, start } from 'single-spa';

// 注册AngularJS微前端
registerApplication({
  name: 'angularjs-app',
  app: () => import('angularjs-app/App'), // 对应Module Federation暴露的入口名
  activeWhen: ['/angularjs-path'], // 替换为你的激活路由规则
});

// 保留已有的React微前端注册
registerApplication({
  name: 'react-mf',
  app: () => import('react-mf/App'),
  activeWhen: ['/react-mf-path'],
});

start();

额外注意事项 #

• 确保AngularJS应用的Module Federation暴露配置正确，exposes字段需指向app.entry.js：

  new ModuleFederationPlugin({
    name: 'angularjs-app',
    filename: 'remoteEntry.js',
    exposes: {
      './App': './src/app.entry.js', // 匹配实际入口文件路径
    },
    // ... 其他配置（如shared依赖）
  })
  

• 若AngularJS应用依赖全局angular对象，需确保在宿主或AngularJS应用中正确引入angular包，避免出现window.angular is undefined的错误。

内容的提问来源于stack exchange，提问作者HEldursi