升级到Angular 9后构建部署访问localhost:4000出现白屏问题求助

安全阿岳

2026-9-25

问题根因

Angular 9 默认启用Ivy编译器后，废弃了原Angular 8中SSR方案依赖的@nguniversal/module-map-ngfactory-loader库，你现有配置中仍保留该依赖的相关逻辑，会导致服务端渲染根路径时静默失败，生成空HTML返回给前端，因此出现白屏且无控制台报错的现象。
你当前的渲染逻辑未做错误兜底，当SSR执行失败时直接返回空内容，而你主动访问/index.html时命中了静态资源路由，直接返回客户端构建好的静态index文件，不走SSR逻辑，因此可以正常访问。
Ivy模式下不再生成NgFactory后缀的引导文件，你配置中引入的AppServerModuleNgFactory实际不存在，也是SSR执行失败的核心原因。

便捷调试方案

在res.render的回调函数中增加错误打印逻辑，即可快速定位SSR执行过程中的具体报错：

res.render('index', { req }, (err, html) => {
  // 新增以下两行打印
  console.log('渲染错误信息：', err)
  console.log('生成的HTML内容长度：', html?.length)
  res.send(html);
});

临时注释SSR路由逻辑，所有请求直接返回静态index.html，确认排除其他配置问题：

app.get('*', (req, res) => {
  res.sendFile(join(DIST_FOLDER, 'browser', 'index.html'))
})

修复步骤

卸载废弃依赖：执行npm uninstall @nguniversal/module-map-ngfactory-loader
修改server.ts配置，移除废弃代码，适配Ivy模式的SSR引导逻辑：

// 删掉这行导入
// import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

// 修改require引入逻辑，Ivy下直接导出AppServerModule，移除LAZY_MODULE_MAP相关引用
const { AppServerModule } = require('./server/main');

// 调整ngExpressEngine配置，移除废弃的providers配置
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule
}));

增加渲染错误降级逻辑，避免SSR失败时返回空内容：

app.get('*', (req, res) => {
  res.render('index', { req }, (err, html) => {
    if (err) {
      console.error('SSR渲染失败，降级返回静态文件：', err);
      return res.sendFile(join(DIST_FOLDER, 'browser', 'index.html'));
    }
    res.send(html);
  });
});

重新执行构建部署即可解决根路径白屏问题。

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