single-spa-angular应用中index.html未加载，外部资源无法引入问题

在single-spa架构下，子应用的index.html不会被浏览器直接加载解析，所以你在里面添加的外部资源引用自然不会生效。下面是几种可行的解决办法：

方法一：在Angular组件中动态加载资源 #

可以在根组件（比如AppComponent）的初始化阶段，通过原生JS或Angular的Renderer2动态创建资源元素，添加到主应用的DOM中。

示例代码（app.component.ts）：

import { Component, OnInit, Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document
  ) {}

  ngOnInit(): void {
    // 加载外部CSS
    this.loadExternalStyle('/cdn/static/styling/style.css');
    // 加载外部脚本（如果需要）
    this.loadExternalScript('/cdn/static/scripts/utils.js');
  }

  private loadExternalStyle(url: string): void {
    const link = this.renderer.createElement('link');
    this.renderer.setAttribute(link, 'rel', 'stylesheet');
    this.renderer.setAttribute(link, 'href', url);
    this.renderer.appendChild(this.document.head, link);
  }

  private loadExternalScript(url: string): void {
    const script = this.renderer.createElement('script');
    this.renderer.setAttribute(script, 'src', url);
    this.renderer.setAttribute(script, 'type', 'text/javascript');
    // 可选：监听脚本加载完成事件
    this.renderer.listen(script, 'load', () => {
      console.log('外部脚本加载完成');
    });
    this.renderer.appendChild(this.document.body, script);
  }
}

方法二：在single-spa生命周期钩子中加载资源 #

直接在main-single-spa.ts的bootstrap或mount阶段完成资源加载，确保Angular模块启动前资源已就绪。

修改后的main-single-spa.ts示例：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';
import { Router, NavigationStart } from '@angular/router';
import { NgZone } from '@angular/core';
import { AppModule } from './app/app.module';
import { singleSpaPropsSubject } from './single-spa/single-spa-props';

// 封装资源加载函数
function loadExternalResources(): Promise<void[]> {
  const loadStyle = (url: string): Promise<void> => {
    return new Promise((resolve, reject) => {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = url;
      link.onload = () => resolve();
      link.onerror = () => reject(new Error(`加载CSS失败: ${url}`));
      document.head.appendChild(link);
    });
  };

  const loadScript = (url: string): Promise<void> => {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = url;
      script.type = 'text/javascript';
      script.onload = () => resolve();
      script.onerror = () => reject(new Error(`加载脚本失败: ${url}`));
      document.body.appendChild(script);
    });
  };

  // 并行加载所有需要的资源
  return Promise.all([
    loadStyle('/cdn/static/styling/style.css'),
    // loadScript('/cdn/static/scripts/utils.js') // 如果需要加载脚本就解开注释
  ]);
}

const lifecycles = singleSpaAngular({
  bootstrapFunction: async (singleSpaProps) => {
    // 先加载外部资源，再启动Angular模块
    await loadExternalResources();
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '<app-root />',
  Router,
  NavigationStart,
  NgZone,
});

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

注意事项 #

• 如果资源需要在应用卸载时清理（避免污染其他子应用），可以在unmount钩子中移除对应的DOM元素。
• 对于CSS，也可以考虑将其打包进Angular应用的样式文件中（如果资源允许本地引入的话），但CDN资源还是推荐动态加载的方式。

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