Angular 4.4.0升级至5.2.0后服务端渲染（SSR）报错求助

我之前帮好几个开发者处理过类似的升级问题，Angular 4到5的SSR构建流程确实有不少关键变化，很容易因为配置没跟上导致ngfactory文件生成失败。下面是一步步排查和解决的方法：

1. 先确认所有Angular依赖版本统一 #

首先检查你的package.json，确保@angular/core、@angular/platform-server、@angular/compiler-cli这些核心依赖全部是5.2.0版本，版本不匹配是编译异常的常见诱因。可以用这条命令统一升级：

npm install @angular/core@5.2.0 @angular/platform-server@5.2.0 @angular/compiler-cli@5.2.0 --save

2. 检查tsconfig.server.json的配置细节 #

这个文件是服务端编译的核心配置，必须确保它的angularCompilerOptions和输出路径设置正确：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist/ngfactory",
    "baseUrl": "./src",
    "module": "commonjs",
    "target": "es5",
    "types": ["node"]
  },
  "angularCompilerOptions": {
    "entryModule": "./src/app/app.server.module#AppServerModule",
    "genDir": "./dist/ngfactory"
  },
  "include": ["src/**/*.ts"]
}

重点留意：

• outDir和genDir要和你在server.ts中导入的路径（../dist/ngfactory）完全匹配
• entryModule必须精准指向你的AppServerModule，格式是文件路径#模块类名

3. 调整package.json中的构建脚本 #

Angular 4的SSR构建命令在Angular 5中需要调整顺序，要先完成服务端代码编译生成ngfactory文件，再启动服务。修改你的scripts字段：

"scripts": {
  "build:client": "ng build --prod",
  "build:server": "ngc -p tsconfig.server.json",
  "build:ssr": "npm run build:client && npm run build:server",
  "start": "npm run build:ssr && node dist/server.js"
}

之后先执行完整的编译流程npm run build:ssr，再启动服务，避免因为编译不完整导致文件缺失。

4. 验证ngfactory文件是否生成 #

执行npm run build:server后，去dist/ngfactory/src/app/目录下查看，应该能看到app.server.module.ngfactory.ts和对应的js文件。如果还是没有生成：

• 仔细看终端的编译日志，有没有组件语法错误、模块导入错误这类中断编译的问题
• 确认app.server.module.ts存在，并且正确导入了ServerModule和AppModule：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    ServerModule,
    AppModule
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule {}

5. 核对server.ts的导入路径 #

最后确保server.ts中的导入路径和实际生成的文件路径完全一致，比如：

import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory';

如果你的tsconfig.server.json中outDir设置的是./dist/server，那路径就要改成../dist/server/src/app/...。

按照上面的步骤排查调整，基本就能解决ngfactory文件找不到的问题了。

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