Angular not serving manifest.webmanifest

Question

In my Angular 10 app, I publish it to Azure and it loads fine.

However, the manifest.webmanifest is not being served when I go to https://THESITE.azurewebsites.net/manifest.webmanifest, I get:

"The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."

Other files like the Robots.txt serve fine.

My Angular.json has:

"outputPath": "dist/",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": true,
        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/robots.txt",
          "src/manifest.webmanifest"
        ],

And in the Azure App Service Editor, I can see it:

I am guessing that the file type "webmanifest" is the issue? Azure won't serve it?

Answer 1

I had a similar problem when publishing an Angular Pwa to Azure. The webmanifest wasn't found. To fix it i had to add a web.config file to the dist folder with this code:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <mimeMap fileExtension=".webmanifest" mimeType="application/json" />
        </staticContent>
     </system.webServer>
</configuration>