Angular 17预渲染机制验证：静态页面数据加载方式确认

你的推测部分正确，结合Angular 17预渲染（SSG）的底层机制，完整逻辑如下：

1. 预渲染页面的核心结构 #

你给出的product/bronco页面代码里，有两个关键元素决定了数据的加载：

• <script id="ng-state" type="application/json">...</script>：这是预渲染阶段生成的序列化应用状态，页面所需的产品数据就存在这个JSON里，只是没有直接渲染成可见HTML。
• <script src="main-EEDU2CCN.js" type="module"></script>：应用主逻辑脚本，负责在客户端完成**水合（Hydration）**过程。

2. 数据渲染的完整流程 #

Angular 17默认预渲染采用水合模式，步骤是：

• 构建/预渲染阶段：只生成页面的骨架DOM（也就是你看到的空router-outlet和app-root），同时把页面需要的业务数据序列化到ng-state标签中。
• 客户端加载阶段：main.js运行后，会读取ng-state里的JSON数据，把数据注入到对应组件，完成水合渲染，最终把数据转化为可见的HTML内容。

简单说：main.js是负责读取并使用数据的载体，数据本身预存在ng-state里，你的推测方向是对的，但要明确数据的存储位置和加载逻辑的分工。

3. 让预渲染页面直接显示可见数据 #

如果想让静态HTML里直接看到产品数据（不需要客户端水合），可以开启Angular的无水印静态渲染：

• 全局配置（app.config.ts）：

import { provideClientHydration, withNoHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(withNoHydration())
  ]
};

• 单路由配置：

export const routes: Routes = [
  {
    path: 'product/:id',
    component: ProductComponent,
    renderMode: 'static' // 该路由预渲染时直接生成带数据的HTML
  }
];

这种模式下，预渲染会直接把数据渲染成可见HTML，打开dist里的静态文件就能看到产品内容。

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