I have an Angular CLI built app, a script in 'src/app/text-gen/text-genponent.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:

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.

I have an Angular CLI built app, a script in 'src/app/text-gen/text-gen.ponent.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:

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.

• javascript
• angular
• typescript
• azure
• web-deployment

Share Improve this question Follow edited Jul 16, 2020 at 6:43 user11839265 asked Jul 15, 2020 at 16:50 James BriggsJames Briggs 92477 silver badges1313 bronze badges 2

• Probably should be '/assets/models/model.json'. You can test this by trying http://meditations-ai.azurewebsite/assets/models/model.json in your browser – peinearydevelopment Commented Jul 15, 2020 at 17:11
• @peinearydevelopment I tried this but it didn't work, https://meditations-ai.azurewebsite/assets/models works but with an access denied error 403 but typing the full path es with 404 not found error - despite model.json being in that location - I've added a screenshot of it's location in SCM/Kudu – James Briggs Commented Jul 15, 2020 at 18:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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"
]