如何将Angular Universal部署为IIS下的应用程序

1. 调整Angular项目基础路径配置 #

• 打开angular.json，找到对应项目的architect -> build -> options，添加并设置以下两个参数：

  "build": {
    "options": {
      "baseHref": "/myapp/",
      "deployUrl": "/myapp/",
      // 保留原有其他配置
    }
  }
  

• 针对Universal服务端构建目标，在architect -> server -> options中补充baseUrl配置（若存在），确保服务端渲染能识别子路径。

2. 配置IIS URL重写与MIME规则 #

在项目根目录创建web.config，替换为适配子应用的规则：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Universal" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/myapp/(api|assets)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/myapp/server.js" />
        </rule>
      </rules>
    </rewrite>
    <handlers>
      <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
    </handlers>
    <staticContent>
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <remove fileExtension=".js" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <remove fileExtension=".css" />
      <mimeMap fileExtension=".css" mimeType="text/css" />
    </staticContent>
  </system.webServer>
</configuration>

注：若服务端入口文件不是server.js，需替换为实际文件名（如main.js）。

3. 检查IIS环境配置 #

• 确认IIS已安装URL重写模块和iisnode模块，这是运行Angular Universal的必要组件。
• 创建子应用程序时，将物理路径指向Angular Universal的构建输出目录（通常为dist下对应项目的输出文件夹）。
• 调整子应用的应用程序池设置，将.NET CLR版本设为无托管代码。

4. 验证资源加载路径 #

构建项目后，检查dist/browser/index.html中的CSS、JS引用是否以/myapp/开头，示例如下：

<link rel="stylesheet" href="/myapp/styles.xxxxxx.css">
<script src="/myapp/runtime.xxxxxx.js"></script>

若路径不正确，重新检查angular.json配置后重新构建。

5. 适配服务端渲染路径 #

修改server.ts文件，确保服务端能正确识别子路径：

import { APP_BASE_HREF } from '@angular/common';
import { join } from 'path';

// ...

// 配置APP_BASE_HREF
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
  providers: [
    { provide: APP_BASE_HREF, useValue: '/myapp/' }
  ]
}));

// 托管静态文件
app.use('/myapp', express.static(join(DIST_FOLDER, 'browser')));

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