Single-SPA Angular加载子应用报LOADING_SOURCE_CODE:undefined错误

在微前端场景下使用Single-SPA-Angular方案，根应用所用Single-SPA版本为5.3.4，通过壳应用运行加载torinit子应用时触发加载报错。

Uncaught Error: application 'torinit' died in status LOADING_SOURCE_CODE: undefined
    at l (app-errors.js:87:16)
    at a (app-errors.js:6:26)
    at load.js:109:13
    at _ZoneDelegate.invoke (zone.js:409:30)
    at Zone.run (zone.js:169:47)
    at zone.js:1326:38
    at _ZoneDelegate.invokeTask (zone.js:443:35)
    at Zone.runTask (zone.js:214:51)
    at drainMicroTaskQueue (zone.js:632:39)
    at ZoneTask.invokeTask [as invoke] (zone.js:529:25)

微前端侧helper类代码 #

import { Subject, Subscription } from 'https://dev.jspm.io/rxjs@6/_esm2015';
import { filter, map } from 'https://dev.jspm.io/rxjs@6/_esm2015/operators';

export class EventBusService {
   

  constructor() {this.subject$ = new Subject(); }

  emit(event) {
    this.subject$.next(event);
  }

  on(eventName, action) {
    return this.subject$.pipe(
      filter( (e) => e.name === eventName),
      map( (e) => e["data"])).subscribe(action);
  }
}

var EventBus= new EventBusService;


System.import('single-spa').then(function (singleSpa) {
  console.log(System.import('app1'));
    singleSpa.registerApplication(
      'app1',
      function () {
        return System.import('app1');
      },
      function (location) {
        return true;
       // return location.pathname.startsWith('/app1');
      },
      { EventBus: EventBus }
    );

    singleSpa.registerApplication(
      'app2',
      function () {
        return System.import('app2');
      },
      function (location) {
       return true
        // return location.pathname.startsWith('/app2');
      },
      { EventBus: EventBus }
    );
    singleSpa.registerApplication(
      'torinit',
      function () {
        return System.import('torinit');
      },
      function (location) {
       return true
        // return location.pathname.startsWith('/app2');
      },
      { EventBus: EventBus }
    )
      console.log('in helper.js');
    singleSpa.start();
  })

根应用main.ts代码 #

import { enableProdMode, NgZone } from '@angular/core';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Router, NavigationStart } from '@angular/router';
import { ɵAnimationEngine as AnimationEngine } from '@angular/animations/browser';

import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';


import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { singleSpaPropsSubject } from './single-spa/single-spa-props';

if (environment.production) {
  enableProdMode();
}

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '<app-root />',
  Router,
  NavigationStart,
  NgZone,
  AnimationEngine,
});

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

该报错核心原因是：single-spa在LOADING_SOURCE_CODE阶段加载、执行torinit子应用入口代码后，没有拿到符合规范的生命周期导出对象（拿到了undefined），按以下优先级逐一排查即可：

• 检查子应用入口导出逻辑
  • 对照已贴出的根应用main.ts写法，检查torinit子应用的single-spa入口文件（通常为main.single-spa.ts），是否正确导出bootstrap/mount/unmount三个生命周期函数，漏写export、打包时tree-shaking误删导出都会导致返回值为undefined。
  • 检查torinit子应用的打包配置，确认output配置符合SystemJS模块规范，libraryTarget设置正确，确保System.import('torinit')能正常拿到包含三个生命周期的对象，而非空值。
• 检查资源与依赖配置
  • 核对SystemJS importmap中torinit对应的入口资源地址，直接访问地址确认资源可正常加载，不存在404/500、路径配置错误的问题。
  • 检查torinit的公共依赖配置：rxjs、single-spa、single-spa-angular、@angular/core等公共依赖是否配置为external，是否存在版本冲突、未在全局/importmap中声明的情况，依赖缺失会导致入口代码执行中断。
• 定位隐式执行错误
  • 在浏览器开发者工具Sources面板中找到torinit子应用的入口js文件，在文件第一行打DOM断点，刷新页面确认断点是否命中：如果断点无法命中，就是资源加载链路问题；如果断点可以命中，单步执行定位抛出未捕获异常的代码行——入口代码执行时抛出未捕获错误，被single-spa捕获后也会触发该类报错，且错误信息通常显示为undefined。
  • 临时注释掉app1、app2的注册逻辑，仅保留torinit子应用注册，排除其他子应用加载时的副作用干扰。
• 校验版本兼容性
  • 确认torinit子应用使用的single-spa、single-spa-angular版本与根应用的single-spa@5.3.4兼容，同时Angular大版本要匹配single-spa-angular的支持范围，版本不匹配会导致生命周期生成失败返回undefined。

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