求助：在Single-Spa根布局中集成AngularJS SPA时模块无法加载的问题排查

我帮你梳理下这个问题，你遇到的「oldapp模块找不到」报错，大概率是SystemJS模块注册/加载顺序或者AngularJS应用的single-spa适配方式出了问题。结合你贴的代码，我整理了几个核心问题点和修复方案：

1. AngularJS应用的SystemJS导出方式错误 #

你当前在AngularJS代码里用了System.register手动包裹生命周期函数，这不符合single-spa-angularjs的规范，会导致SystemJS无法正确识别oldapp模块的导出内容。

正确写法（替换你当前的AngularJS代码）： #

// angular-bundle.js 中的代码
import singleSpa from 'single-spa';
import singleSpaAngularjs from 'single-spa-angularjs';

// 初始化single-spa-angularjs的生命周期钩子
const ngLifecycles = singleSpaAngularjs.default({
  angular: window.angular,
  mainAngularModule: 'oldapp',
  uiRouter: true,
  preserveGlobal: false,
  template: '<old-app />',
});

// 直接导出single-spa要求的三个生命周期函数
export const bootstrap = ngLifecycles.bootstrap;
export const mount = ngLifecycles.mount;
export const unmount = ngLifecycles.unmount;

如果你的AngularJS应用没有用构建工具（纯SystemJS），确保这段代码直接放在angular-bundle.js中，让SystemJS能正确识别模块导出。

2. SystemJS Import Map重复定义导致路径混乱 #

你贴的代码里有多个<script type="systemjs-importmap">标签，这会导致后面的配置覆盖前面的，容易出现模块路径不一致的问题。

修复方案：合并成一个Import Map #

把所有模块映射放在同一个标签里，放在页面最前面加载：

<!-- index.ejs 中的Import Map -->
<script type="systemjs-importmap">
{
  "imports": {
    "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
    "react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
    "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js",
    "single-spa-angularjs": "https://cdn.jsdelivr.net/npm/single-spa-angularjs@4.3.1/lib/single-spa-angularjs.min.js",
    "@myApp/root-config": "//localhost:9000/root-config.js",
    "oldapp": "//localhost/js/dist/angular-bundle.js"
  }
}
</script>

3. 根配置的应用构造逻辑错误 #

你当前的根配置先手动加载oldapp再构造applications，这会打乱single-spa的注册流程，而且硬编码loadApp为oldapp，无法支持多应用加载。

正确的根配置写法： #

// root-config.js 中的代码
import { registerApplication, start } from "single-spa";
import { constructApplications, constructRoutes, constructLayoutEngine } from "single-spa-layout";
import microfrontendLayout from "./microfrontend-layout.html";

const routes = constructRoutes(microfrontendLayout);
// 动态根据应用名称加载模块，适配layout中的所有application标签
const applications = constructApplications({
  routes,
  loadApp({ name }) {
    return System.import(name);
  },
});
const layoutEngine = constructLayoutEngine({ routes, applications });

applications.forEach(registerApplication);
layoutEngine.activate();
start();

4. AngularJS模块定义的检查 #

最后确认你的AngularJS模块本身定义正确：

• 确保模块名oldapp拼写和single-spa配置中的一致
• 确保依赖（比如ui.router）已正确引入

// 示例：AngularJS模块定义
angular.module('oldapp', ['ui.router'])
  .config(/* 路由配置 */)
  .component('oldApp', /* 组件定义 */);

按照以上步骤修复后，应该能解决模块找不到的问题。如果还有报错，可以打开浏览器控制台查看Network标签，确认oldapp的bundle是否正确加载，以及Console标签的详细报错信息。

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