使用 Azure 应用服务部署的 Angular 应用程序无法找到使用 ngserve 时找到的资产

Question

我有一个 Angular CLI 构建的应用程序，“src/app/text-gen/text-gen.component.ts”中的脚本加载到 tensorflow.js 模型中：

this.model = await tf.loadLayersModel('../assets/models/model.json');

引用“src/assets/models/model.json”中的 JSON。

使用 Azure 应用服务部署此应用程序时，一切正常，但由于某种原因，此 model.json 返回 404 Not Found：

查看 Kudu 控制台时，我可以在“site/wwwroot/assets/models/model.json”中看到 model.json。

另外，在“angular.json”中， my"outputPath"设置为"dist".

我确信这是一件非常明显的事情 - 我对 Angular、Web-dev、Azure 等非常陌生 - 但我似乎无法弄清楚这一点！

谢谢！！！

model.json编辑：在 Kudu 控制台中添加屏幕截图，我也尝试'/assets/models/model.json'作为路径并收到相同的错误。

Answer 1

感谢这里的这个问题，我明白了这一点。

<staticContent><mimeMap fileExtension=".json" mimeType="application/json" /></staticContent>在 web.config 文件中，我需要在标签之前添加<rewrite>。总共给出一个如下所示的 web.config 文件：

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <staticContent><mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
  <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="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration>

对于任何像我一样对 Angular 不熟悉的人，将来会读到这篇文章。通过将 web.config 文件添加dist/到 angular.json 内部，可以将其包含在目录中"assets"，因此我的资产如下所示：

"assets": [
  "src/favicon.ico",
  "src/model.json",
  "src/char2idx.json",
  "src/web.config"
]