从零搭建Single-Spa：Angular 8无法渲染HTML问题求助

我来帮你搞定这个集成后的渲染和全局变量问题，这是初次把Angular接入Single-Spa时很容易碰到的坑，咱们一步步来排查修复：

一、先解决angular is not defined的问题 #

当你用ng add single-spa-angular集成后，Single-Spa默认会让Angular不再挂载到全局window对象上，所以直接在控制台调用angular.version肯定会报错。如果确实需要全局访问Angular（比如调试用），可以在生成的main.single-spa.ts里手动加一行：

import * as angular from '@angular/core';
(window as any).angular = angular;

不过更推荐的是用Single-Spa的标准方式管理应用，尽量别依赖全局变量。

二、让应用正常渲染的核心检查点 #

1. 确认Single-Spa生命周期函数的配置
   集成后生成的main.single-spa.ts是微前端的入口，一定要保证里面的template选择器和你的Angular根组件完全匹配。比如你创建应用时用了--prefix my-app，根组件app.component.ts里的选择器应该是my-app-root，那template就得写成<my-app-root />，代码大概是这样：

   import { enableProdMode, NgZone } from '@angular/core';
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';
   import { AppModule } from './app/app.module';
   import { environment } from './environments/environment';
   
   if (environment.production) {
     enableProdMode();
   }
   
   const lifecycles = singleSpaAngular({
     bootstrapFunction: singleSpaProps => {
       const platform = platformBrowserDynamic(getSingleSpaExtraProviders());
       return platform.bootstrapModule(AppModule);
     },
     template: '<my-app-root />', // 这里必须和根组件选择器一致！
     NgZone,
   });
   
   export const bootstrap = lifecycles.bootstrap;
   export const mount = lifecycles.mount;
   export const unmount = lifecycles.unmount;
   

   如果选择器写错，应用肯定不会渲染。

2. 区分本地单独运行和微前端运行的入口
   集成后，原有的main.ts是给你本地单独运行Angular用的，main.single-spa.ts是给Single-Spa root config加载用的。你可以通过命令行指定入口来切换：

   # 本地单独跑Angular（原来的正常模式）
   ng serve --main=src/main.ts
   # 作为微前端服务（供Single-Spa加载）
   ng serve --main=src/main.single-spa.ts --port=4201
   

   要是你直接用默认的ng serve，可能会用错入口导致不渲染。

三、配置开发时的热重载 #

Single-Spa Angular的热重载需要额外配置几步：

1. 修改angular.json开启hmr
   找到architect.serve.options，添加这两个配置：

   "hmr": true,
   "hmrWarning": false
   

2. 给main.single-spa.ts加热重载逻辑
   替换成下面的代码，加上热重载的销毁和重启逻辑：

   import { enableProdMode, NgZone } from '@angular/core';
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';
   import { AppModule } from './app/app.module';
   import { environment } from './environments/environment';
   
   if (environment.production) {
     enableProdMode();
   }
   
   let bootstrapPromise: Promise<any>;
   
   const lifecycles = singleSpaAngular({
     bootstrapFunction: singleSpaProps => {
       if (bootstrapPromise) {
         return bootstrapPromise;
       }
       const platform = platformBrowserDynamic(getSingleSpaExtraProviders());
       bootstrapPromise = platform.bootstrapModule(AppModule);
       return bootstrapPromise;
     },
     template: '<my-app-root />',
     NgZone,
   });
   
   export const bootstrap = lifecycles.bootstrap;
   export const mount = lifecycles.mount;
   export const unmount = lifecycles.unmount;
   
   // 热重载处理
   if ((module as any).hot) {
     (module as any).hot.accept();
     (module as any).hot.dispose(() => {
       bootstrapPromise = null;
       // 销毁现有Angular平台，为热重载做准备
       platformBrowserDynamic().destroy();
     });
   }
   

3. 启动时带hmr参数
   运行这个命令启动微前端服务，就能享受热重载了：

   ng serve --main=src/main.single-spa.ts --port=4201 --hmr
   

四、最后验证 #

• 如果是单独运行Angular：ng serve --main=src/main.ts，访问http://localhost:4200看是否正常渲染。
• 如果是作为微前端：在你的Single-Spa根配置里注册这个应用，确保加载的JS地址是http://localhost:4201/main.js，然后访问根应用看是否能正常挂载。

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