Angular app deployed with Azure App Services cannot find an asset which it finds when using ng serve

user_9526869 0
Viewed 1076

I have an Angular CLI built app, a script in 'src/app/text-gen/text-gen.component.ts' loads in a tensorflow.js model with:

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

Referring to a JSON in 'src/assets/models/model.json'.

When deploying this app with Azure App Services everything works but for some reason this model.json returns 404 Not Found:

enter image description here

When looking at the Kudu Console I can see model.json in 'site/wwwroot/assets/models/model.json'.

Also, in 'angular.json', my "outputPath" is set to "dist".

I'm sure this is something very obvious - I'm very new to Angular, web-dev, Azure etc - but I can't seem to figure this one out!

Thanks!!!

Edit: Adding a screenshot of model.json in the Kudu console, I also tried '/assets/models/model.json' as the path and received the same error.

enter image description here

angular typescript azure web-deployment javascript
1 Answers

I figured this out thanks to this question here.

In the web.config file, I needed to add <staticContent><mimeMap fileExtension=".json" mimeType="application/json" /></staticContent> just before the <rewrite> tag. Altogether giving a web.config file that looks like this:

<?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>

For anyone reading this in the future who is new to Angular like myself. The web.config file can be included within the dist/ directory by adding it to "assets" inside angular.json, so my assets look like this for example:

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