Angular 11启用SSR后执行ng deploy --preview出现index.html路由匹配错误求解

报错核心原因 #

这个错误的本质是：指向index.html的请求没有被静态资源处理逻辑拦截，最终穿透到了Angular的路由匹配流程中，而你的路由配置里没有对应index.html的路径规则，因此抛出未匹配路由的错误。
两种命令的运行行为差异是触发问题的直接原因：

• 执行npm run dev:ssr时，Angular Universal 官方开发构建器会自动内置静态资源拦截规则，所有带文件后缀的请求（包括/index.html）都会被交给静态资源服务处理，不会进入后续的SSR渲染路由
• 执行ng deploy --preview时，命令本身会以/index.html作为站点入口发起本地预览请求，此时你自定义的Express服务存在两处规则漏洞，导致请求穿透到SSR流程：
  • 静态资源中间件仅配置了*.*匹配规则，没有显式处理直接请求/index.html的场景
  • 提前硬编码的全局domino初始化逻辑，会和SSR渲染的路由上下文产生串扰，干扰路由匹配流程

分步修复操作 #

按照顺序调整server.ts和路由配置即可解决问题：

• 调整静态资源拦截规则，把/index.html纳入静态资源处理范围，避免请求穿透
  替换原有静态资源配置：

  // 优先拦截所有带后缀的静态文件 + 直接请求index.html的场景
  server.get(['*.*', '/index.html'], express.static(distFolder, {
    maxAge: '1y',
    index: false // 关闭express.static自动返回index.html的默认逻辑，避免和后续SSR路由冲突
  }));
  

• 移除服务启动阶段硬编码的domino全局初始化逻辑，避免路由上下文串扰
  删掉以下启动时硬执行的全局绑定代码：

  // 删除以下全局硬编码逻辑：
  // const win = domino.createWindow(indexHtml);
  // global['window'] = win;
  // global['document'] = win.document;
  

  改成在每次SSR请求处理时，按需初始化domino全局对象：

  server.get('*', (req, res) => {
    // 单次请求上下文内初始化domino全局对象，避免跨请求串扰
    const win = domino.createWindow('');
    global['window'] = win;
    global['document'] = win.document;
    global['navigator'] = win.navigator;
  
    res.render(indexHtml, { 
      req, 
      providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] 
    });
  });
  

• 在根路由配置中增加兜底重定向规则，从路由层避免类似穿透问题
  在应用根路由的Routes数组最后新增配置：

  { path: 'index.html', redirectTo: '', pathMatch: 'full' }
  

注意事项 #

• ng deploy --preview本质是静态资源预览逻辑，不会主动运行你自定义的Express SSR服务，如果需要验证SSR运行效果，直接运行构建完成后的SSR服务入口（比如node dist/server/main.js）即可，不要依赖deploy命令的预览模式
• 顶部的Firebase相关polyfill（WebSocket、XMLHttpRequest）建议移动到run()服务启动函数内执行，避免模块加载阶段提前被Node环境解析，引发其他兼容问题

内容的提问来源于stack exchange，提问作者Milan Ferus-Comelo