Angular 16独立API结合Universal时SSG预渲染失效问题咨询

Angular Universal结合独立API时完全支持SSG预渲染，你的问题出在模块式与独立式API的配置冲突，以及预渲染路由逻辑缺失上。以下是具体修复步骤：

问题核心原因 #

1. 混合配置冲突：你同时保留了模块式的AppServerModule和独立式的bootstrapApplication逻辑，且tsconfig.server.json指定了模块入口，导致预渲染时Angular无法正确识别渲染入口，最终走了无路由配置的基础渲染流程。
2. 预渲染路由未指定：SSG需要明确知道要预渲染的路由列表，独立API下未配置时，只会生成空的基础HTML。

具体修复步骤 #

1. 清理模块式残留配置 #

• 删除src/app/app.server.module.ts文件，独立API无需该模块
• 修改tsconfig.server.json，移除模块入口配置：

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "./out-tsc/server",
    "target": "ES2022",
    "types": ["node"]
  },
  "files": ["src/main.server.ts", "server.ts"]
}

2. 修正main.server.ts逻辑 #

移除多余的模块导出，仅保留独立API的bootstrap逻辑：

import { enableProdMode } from "@angular/core";
import { environment } from "./environments/environment";
import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/app.component";
import { serverConfig } from "./app.config.server";

if (environment.production) {
  enableProdMode();
}

const bootstrap = () => bootstrapApplication(AppComponent, serverConfig);

export default bootstrap;

3. 配置SSG预渲染路由 #

在angular.json的prerender构建选项中，添加需要预渲染的路由列表：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "prerender": {
          "builder": "@angular-devkit/build-angular:prerender",
          "options": {
            "routes": ["/", "/home", "/about"] // 替换为你的实际路由
          }
        }
      }
    }
  }
}

4. 确保服务端配置关联路由 #

检查app.config.server.ts，确保合并了客户端路由配置并启用服务端渲染：

import { mergeApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';

export const serverConfig = mergeApplicationConfig(appConfig, {
  providers: [provideServerRendering()]
});

同时确认app.config.ts包含路由配置：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration()
  ]
};

验证修复 #

运行预渲染命令：

ng run 你的项目名称:prerender

检查dist目录下生成的静态文件，每个路由对应的HTML应已渲染出页面内容，而非空的<router-outlet>标签。

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