Angular Universal构建服务器时'app.server.module.ngfactory未找到'错误的解决方法

我在Angular 6.x版本做Universal集成时碰到过完全一样的问题，这个错误的核心是server构建阶段找不到预编译的ngfactory文件，下面给你拆解原因和对应的解决办法：

Angular 6的Universal构建依赖AOT（预编译）生成的ngfactory文件，但以下情况会导致找不到这个文件：

1. 你的server构建目标没有开启AOT编译，导致根本没生成ngfactory文件；
2. main.server.ts里的ngfactory文件引用路径错误；
3. Angular 6 CLI的server构建路径解析存在小bug，或者缓存导致旧的配置干扰了新构建。

按以下步骤逐一排查解决：

• 检查并修正angular.json的server配置
  打开项目根目录的angular.json，找到你的项目下architect -> server节点，确保options里开启了AOT，并且路径配置正确：

  "server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
      "outputPath": "dist/server",
      "main": "src/main.server.ts",
      "tsConfig": "src/tsconfig.server.json",
      "aot": true
    }
  }
  

  重点确认aot字段为true——只有开启AOT才会生成ngfactory文件。

• 修改main.server.ts，跳过ngfactory直接引用模块
  Angular 6+已经支持直接引用AppServerModule而非预编译的ngfactory文件，这样可以彻底避免路径问题。修改src/main.server.ts：

  1. 替换原来的AppServerModuleNgFactory引用为AppServerModule；
  2. 把renderModuleFactory换成renderModule（来自@angular/platform-server）；
  3. 调整渲染逻辑，示例代码如下：

  import { enableProdMode } from '@angular/core';
  import { environment } from './environments/environment';
  import { AppServerModule } from './app/app.server.module';
  import { renderModule } from '@angular/platform-server';
  import * as express from 'express';
  import { join } from 'path';
  import { readFileSync, existsSync } from 'fs';
  
  if (environment.production) {
    enableProdMode();
  }
  
  const app = express();
  const distFolder = join(process.cwd(), 'dist/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
  
  // 处理静态资源
  app.get('*.*', express.static(distFolder, { maxAge: '1y' }));
  
  // 渲染所有路由
  app.get('*', (req, res) => {
    const document = readFileSync(join(distFolder, indexHtml), 'utf8');
    renderModule(AppServerModule, {
      document,
      url: req.url,
      extraProviders: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }]
    }).then(html => res.send(html));
  });
  
  export default app;
  

• 重新用CLI生成Universal配置（如果手动配置过）
  如果你的Universal相关文件是手动创建的，可能存在配置遗漏。可以用CLI命令重新生成正确的配置：

  ng add @nguniversal/express-engine --clientProject [你的项目名称]
  

  这个命令会自动帮你配置好angular.json、main.server.ts、app.server.module.ts等所有必要文件，避免手动配置的错误。

• 清理缓存后重新构建
  缓存有时候会导致旧的构建文件干扰新流程，执行以下命令彻底清理后重新构建：

  ng clean
  rm -rf node_modules dist
  npm install
  ng run [project]:build
  ng run [project]:server
  

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