Angular 18构建后配置嵌入index.html，丢失运行时配置能力

一、为何资源被嵌入index.html？ #

Angular 18默认开启了**预渲染（Prerendering）和水合（Hydration）**功能。构建时，Angular会预执行应用初始化逻辑，包括你在APP_INITIALIZER里的HTTP请求，把请求结果嵌入到index.html的ng-state脚本中。客户端加载页面时，水合机制会直接从这个脚本读取预存的响应，跳过实际的HTTP请求，这就是修改app.config.json不生效的核心原因。

二、如何禁用资源预嵌入，恢复运行时HTTP请求？ #

方案1：完全关闭预渲染（简单直接） #

在angular.json中，找到对应项目的architect.build.options，添加"prerender": false；同时确保"ssr"配置也设为false（如果开启了的话）：

"architect": {
  "build": {
    "options": {
      ...
      "prerender": false,
      "ssr": false
    }
  },
  "serve": {
    "options": {
      ...
      "ssr": false
    }
  }
}

方案2：保留水合，但排除特定资源预加载（适合需要水合的场景） #

如果不想完全关闭水合，可以通过自定义预渲染逻辑，排除app.config.json的预请求。创建一个预渲染配置文件（比如prerender.config.ts），在其中过滤掉该请求：

import type { PrerenderConfig } from '@angular/platform-server';

export const config: PrerenderConfig = {
  routes: ['/'],
  filterRequest: (req) => {
    // 排除对app.config.json的预请求
    return !req.url.includes('/assets/app.config.json');
  }
};

然后在angular.json中指定这个配置文件：

"architect": {
  "build": {
    "options": {
      ...
      "prerender": true,
      "prerenderConfig": "prerender.config.ts"
    }
  }
}

三、解决IIS 403 Forbidden错误 #

关闭预渲染后出现403，是因为IIS默认可能没有正确处理assets目录下的静态文件，或者目录权限配置有误，可按以下步骤修复：

1. 检查站点权限：确保站点应用池的身份对dist/assets目录有读取权限。
2. 修改web.config，拦截静态文件重写：在rewrite规则前添加静态文件处理规则，避免路由重写拦截静态文件请求：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
  <!-- 添加静态文件处理规则 -->
  <handlers>
    <add name="StaticFile" path="*" verb="*" modules="StaticFileModule,DefaultDocumentModule,DirectoryListingModule" resourceType="Either" requireAccess="Read" />
  </handlers>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

3. 添加JSON文件的MIME类型：若IIS无法识别.json文件，可在IIS管理器的“MIME类型”中添加：扩展名.json，MIME类型application/json。

额外注意点 #

• 修改app.config.json后，需强制刷新浏览器（Ctrl+F5）清除缓存，避免浏览器读取旧的缓存文件。
• 若使用CDN部署，需确保修改后的app.config.json能绕过CDN缓存，或手动刷新CDN缓存。

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