Angular single-spa微前端显示“Your Microfrontend is not here”问题求助

一、“Your Microfrontend is not here”问题排查步骤 #

• 检查子应用注册配置：打开根配置的src/root-config.ts，确认registerApplication的activeWhen路由规则是否与当前访问路径匹配，同时验证子应用的入口URL是否可正常访问。比如子应用绑定/gold-loan，则访问路径需包含该前缀，且activeWhen需设为['/gold-loan']。
• 验证子应用资源加载状态：打开浏览器网络面板，查看子应用的JS包（如gold-loan/main.js）是否成功加载（状态码200）。若未加载，检查子应用构建路径、base-href配置是否正确，可尝试重新构建子应用并指定--base-href参数（如ng build --base-href /gold-loan/）。
• 检查生命周期函数与挂载节点：确认子应用main.single-spa.ts中singleSpaAngular配置的domElementGetter指向的DOM节点存在于根应用的index.html中，或能动态创建。同时验证bootstrap、mount、unmount函数是否返回正确的生命周期对象。
• 使用single-spa调试工具：安装single-spa devtools浏览器扩展，查看已注册应用的状态（如是否为MOUNTED），该工具能直观显示子应用的加载、挂载状态，快速定位异常。
• 核对webpack配置：检查子应用的extra-webpack.config.js，确保singleSpaAngularWebpackConfig未被错误覆盖，确认output.libraryTarget为umd，且未错误设置disabled属性导致构建产物异常。

二、路由配置与左侧菜单跳转实现 #

1. 根应用路由规则配置 #

在根配置root-config.ts中，为每个子应用绑定对应路由前缀：

import { registerApplication, start } from 'single-spa';

registerApplication({
  name: '@ravi-mone/gold-loan',
  app: () => System.import('@ravi-mone/gold-loan'),
  activeWhen: ['/gold-loan'],
});

registerApplication({
  name: '@ravi-mone/vehicle-loan',
  app: () => System.import('@ravi-mone/vehicle-loan'),
  activeWhen: ['/vehicle-loan'],
});

start({
  urlRerouteOnly: true,
});

2. 实现左侧菜单跳转 #

在根应用中创建菜单组件，使用single-spa的navigateToUrl方法实现无刷新跳转：

import { navigateToUrl } from 'single-spa';

export function renderSidebar() {
  const sidebar = document.createElement('div');
  sidebar.style.cssText = 'list-style: none; padding: 20px; background: #f5f5f5; width: 200px; position: fixed; top: 0; left: 0; height: 100%;';
  sidebar.innerHTML = `
    <ul style="padding-left: 0;">
      <li style="margin-bottom: 12px;">
        <a href="/gold-loan" onclick="event.preventDefault(); navigateToUrl('/gold-loan')">黄金贷款</a>
      </li>
      <li>
        <a href="/vehicle-loan" onclick="event.preventDefault(); navigateToUrl('/vehicle-loan')">车辆贷款</a>
      </li>
    </ul>
  `;
  document.body.appendChild(sidebar);
}

// 在根应用bootstrap阶段渲染菜单
export async function bootstrap() {
  renderSidebar();
}

3. 子应用路由适配 #

修改Angular子应用的app-routing.module.ts，设置内部路由并确保与根应用前缀匹配：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GoldLoanComponent } from './gold-loan/gold-loan.component';
import { GoldLoanDetailComponent } from './gold-loan-detail/gold-loan-detail.component';

const routes: Routes = [
  { path: '', component: GoldLoanComponent }, // 子应用默认路由
  { path: 'detail', component: GoldLoanDetailComponent }, // 子应用二级路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { 
    useHash: false, 
    initialNavigation: 'enabledBlocking',
    relativeLinkResolution: 'legacy'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 子应用挂载节点配置 #

在子应用main.single-spa.ts中，确保domElementGetter能正确获取或创建挂载节点：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';
import { AppModule } from './app/app.module';

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '<app-root></app-root>',
  domElementGetter: (singleSpaProps) => {
    const appId = singleSpaProps.name.split('/')[1];
    let el = document.getElementById(appId);
    if (!el) {
      el = document.createElement('div');
      el.id = appId;
      el.style.marginLeft = '220px';
      document.body.appendChild(el);
    }
    return el;
  },
});

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

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