AngularJS v1.3.7集成single-spa显示NOT_LOADED状态无报错求助

我有一个基于AngularJS v1.3.7开发的旧前端项目，尝试将其与single-spa集成。已按照官方文档指引操作，但始终显示“legacyAngularApp status NOT_LOADED”状态，且无其他报错信息，怀疑是否因AngularJS版本过旧导致。

相关代码如下：

index.html代码 #

<script type="systemjs-importmap">
  {
    "imports": {
      "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.1/lib/system/single-spa.min.js",
      "@app/legacyAngularApp": "./js/config.js",
      "@app/reactApp": "//localhost:8080/reactApp.js"
    }
  }
</script>

/*dependecies*/

<script src="js/app.js"></script>
<script src="js/config.js"></script>
<script>
  System.import("single-spa").then(function (singleSpa) {
    window.singleSpa = singleSpa;
    window.singleSpa.registerApplication({
      name: "legacyAngularApp",
      app: () => System.import("@app/legacyAngularApp"),
      activeWhen: ["#/dashboards/single-spa"],
    });
    window.singleSpa.registerApplication({
      name: "reactApp",
      app: () => System.import("@app/reactApp"),
      activeWhen: ["#/dashboards/react-app"],
    });
    window.singleSpa.start();
  });
</script>

config.js代码 #

System.register([], function (_export) {
    return {
      execute: function () {
        _export(
          window.singleSpaAngularjs.default({
            angular: angular,
            mainAngularModule: "inspinia",
            uiRouter: true,
            preserveGlobal: false,
          })
        );
      },
    };
  });

控制器代码 #

var extraControllers = angular.module("inspinia");

extraControllers.controller("singleSPASwitchCtrl", [
  "$scope",
  "$state",

  function ($scope, $state) {
    console.log(
      "legacyAngularApp status",
      singleSpa.getAppStatus("legacyAngularApp")
    );
    
  },
]);

运行应用时，仅输出“legacyAngularApp status NOT_LOADED”，无其他报错。

核心问题分析 #

NOT_LOADED状态说明single-spa从未尝试加载你的AngularJS应用，或加载过程中存在静默失败。结合你的AngularJS版本（v1.3.7）和代码细节，主要有以下几个可能原因：

• single-spa-angularjs版本不兼容：AngularJS v1.3.7属于早期版本，新版本single-spa-angularjs仅支持v1.6+，需适配旧版兼容包。
• 加载顺序冲突：直接引入config.js又通过SystemJS重复加载，破坏模块加载逻辑。
• 模块导出格式错误：config.js的导出方式不符合single-spa对生命周期函数的要求。
• 路由激活条件未触发：当前路由未匹配activeWhen规则，single-spa不会触发应用加载。

具体修复步骤 #

1. 适配兼容的single-spa-angularjs版本 #

在importmap中添加支持AngularJS v1.3.x的single-spa-angularjs旧版本：

<script type="systemjs-importmap">
{
  "imports": {
    "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.1/lib/system/single-spa.min.js",
    "single-spa-angularjs": "https://cdn.jsdelivr.net/npm/single-spa-angularjs@4.1.0/lib/system/single-spa-angularjs.min.js",
    "@app/legacyAngularApp": "./js/config.js",
    "@app/reactApp": "//localhost:8080/reactApp.js"
  }
}
</script>

v4.1.0版本明确支持AngularJS v1.2+至v1.5+，匹配你的v1.3.7环境。

2. 修复代码加载顺序 #

移除index.html中直接引入的config.js，完全交给SystemJS管理加载：

<!-- 移除该行 -->
<script src="js/config.js"></script>

3. 修正config.js的模块导出逻辑 #

修改config.js，正确导入依赖并导出single-spa所需的生命周期函数：

System.register(["single-spa-angularjs"], function (_export) {
  return {
    execute: function () {
      const singleSpaAngularjs = arguments[0].default;
      const angularLifecycles = singleSpaAngularjs({
        angular: angular,
        mainAngularModule: "inspinia",
        uiRouter: true,
        preserveGlobal: false,
      });
      // 正确导出bootstrap、mount、unmount三个生命周期方法
      _export({
        bootstrap: angularLifecycles.bootstrap,
        mount: angularLifecycles.mount,
        unmount: angularLifecycles.unmount
      });
    },
  };
});

4. 验证路由激活条件 #

在控制器中添加当前路由打印，确认是否匹配activeWhen规则：

extraControllers.controller("singleSPASwitchCtrl", [
  "$scope",
  "$state",
  function ($scope, $state) {
    console.log("当前路由:", $state.current.name);
    console.log("legacyAngularApp status", singleSpa.getAppStatus("legacyAngularApp"));
  },
]);

若路由不匹配，需调整activeWhen规则或确保路由跳转正确。

额外注意事项 #

• AngularJS v1.3.7存在部分现代浏览器API兼容性问题，测试时可使用Chrome 80+等较旧浏览器版本，或添加必要polyfill。
• 确保angular全局变量在config.js执行前已加载完成，即app.js需在SystemJS加载config.js前执行完毕。

内容的提问来源于stack exchange，提问作者Дейвид Аптикадир