时间戳

首页 > 解决方案 > 使用 Azure 应用服务部署的 Angular 应用找不到使用 ng serve 时找到的资产

javascript - 使用 Azure 应用服务部署的 Angular 应用找不到使用 ng serve 时找到的资产

问题描述

我有一个 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 App Services 部署此应用程序时，一切正常，但由于某种原因，此 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'作为路径并收到相同的错误。

在此处输入图像描述

标签： javascriptangulartypescriptazureweb-deployment

解决方案

多亏了这个问题，我才知道这一点。

在 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 不熟悉的人来说。通过将 web.config 文件添加到angular.json 中，可以将其包含在dist/目录中，因此我的资产如下所示："assets"

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

推荐阅读