javascript - 使用 Azure 应用服务部署的 Angular 应用程序无法找到使用 ngserve 时找到的 Assets

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”中，我的“outputPath”设置为“dist”。

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

谢谢!!!

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

Answer 1

多亏了这个question here，我才明白了这一点.

在 web.config 文件中，我需要添加 <staticContent><mimeMap fileExtension=".json" mimeType="application/json" /></staticContent>就在 <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 不熟悉的 future 阅读本文的人。 web.config 文件可以包含在 dist/ 中目录，将其添加到 "assets"在 angular.json 中，所以我的 Assets 看起来像这样:

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