Angular PrimeIcons 在本地工作但在 IIS 上不工作

Question

我在 angular 应用程序中使用 primeicons 和 primeng。

如果我在本地运行 angular website/app，一切都很好。

但部署到 IIS 服务器时，图标未显示 - 但所有其他样式运行很好。

这是 IIS 配置中的内容吗？

用法在代码中：

<i class="pi pi-exclamation-circle">

样式在angular.json:

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/nova-light/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeflex/primeflex.css",
              "src/styles.less"                            
            ],

依赖项 在 package.json:

"dependencies": {
    "@angular/animations": "^9.1.12",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "^9.1.12",
    "@angular/compiler": "^9.1.12",
    "@angular/core": "^9.1.12",
    "@angular/forms": "^9.1.12",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "^9.1.12",
    "@angular/platform-browser-dynamic": "^9.1.12",
    "@angular/router": "^9.1.12",
    "angular2-jwt": "^0.2.3",
    "bootstrap": "^4.5.2",
    "chart.js": "^2.9.3",
    "moment": "^2.27.0",
    "primeflex": "^1.3.1",
    "primeicons": "^3.0.0",
    "primeng": "^9.1.3",
    "rxjs": "~6.5.4",
    "tslib": "^1.13.0",
    "zone.js": "~0.10.2"
  },

Answer 1

解决方案是为 web.config 中的 woff 和 ttf 文件添加例外：

<?xml version="1.0" encoding="utf-8"?>
  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="SPA" stopProcessing="true">
            <match url="^(?!.*(\.js|\.css|\.png|\.jpg|\.ico|\.svg|\.ttf|\.woff|\.eot)).*$" />
            <conditions logicalGrouping="MatchAll" />
            <action type="Rewrite" url="/"  appendQueryString="true" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>

Angular PrimeIcons 在本地工作但在 IIS 上不工作

Angular PrimeIcons work locally but not on IIS

iis

angular-cli

primeng

angular

primeicons