Angular部署至IIS后Bootstrap Icons无法显示问题求助

• 检查静态资源路径配置

  • 确认angular.json的assets数组是否包含Bootstrap Icons资源的映射配置，比如：

    "assets": [
      "src/favicon.ico",
      "src/assets",
      { "glob": "**/*", "input": "./node_modules/bootstrap-icons/font", "output": "./assets/bootstrap-icons/font/" }
    ]
    

  • 打开浏览器控制台的网络面板，查看图标相关资源的请求状态，若出现404，说明路径配置有误。部署时需指定正确的base-href参数构建，例如：ng build --prod --base-href "/你的应用部署路径/"。

• 配置IIS静态资源MIME类型

  • Bootstrap Icons依赖的字体文件（.woff2、.woff、.ttf等）可能未在IIS中配置对应MIME类型，导致服务器无法正确返回资源。在IIS管理器中找到目标站点，打开「MIME类型」，添加以下类型：
    • .woff2：application/font-woff2
    • .woff：application/font-woff
    • .ttf：application/font-sfnt

• 验证构建产物完整性

  • 本地执行构建命令后，检查dist目录下是否存在assets/bootstrap-icons/font文件夹及对应字体文件，若缺失则说明angular.json的assets配置未生效，需修正后重新构建。
  • 部署到IIS时，确保将dist目录下所有文件完整上传，避免遗漏字体或CSS资源。

• 检查CSS引用路径正确性

  • 确认全局样式文件（如styles.css）或angular.json的styles数组中，Bootstrap Icons的CSS引用路径正确，例如：

    @import "../node_modules/bootstrap-icons/font/bootstrap-icons.css";
    

  • 查看浏览器加载的最终CSS文件，检查其中字体文件的引用URL是否为部署后的正确路径，比如是否为url("/assets/bootstrap-icons/font/bootstrap-icons.woff2")这类符合IIS部署路径的地址。

• 排查IIS URL重写规则

  • Angular单页应用需配置URL重写规则，但规则若未排除静态资源路径，会导致图标请求被重定向到index.html。需在web.config的重写规则中添加条件，排除静态资源目录，示例：

    <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" />
        <add input="{REQUEST_URI}" pattern="^/(assets|scripts)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/index.html" />
    </rule>
    

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