Angular 6 application : Manifest: Line: 1, column: 1, Unexpected token

Question

This error appears when the code is built and deployed to Azure. When the code is run locally using VSCode this doesn't appear in the console. Any help regarding this matter is appreciated.

Manifest file code :

{
    "name": "",
    "icons": [
        {
            "src": "assets/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

The file is referenced in the index.html as follows

<link rel="manifest" href="assets/manifest.json">

If others are still having this issue, this answer solved it for me. It's applicable for those that are serving the Angular application with .NET Core. https://stackoverflow.com/a/58403004/7328169 — William Herrmann, Oct 01 '21 at 19:59

score 3 · Answer 1 · answered Jan 28 '21 at 12:43

3

You need to add mime type to your server. Extension .webmanifest mime type application/manifest+json

answered Jan 28 '21 at 12:43

Abdurrahman Yıldırım

151
2
4

score 2 · Accepted Answer · answered May 21 '19 at 12:00

2

Fixed it by using crossorigin="use-credentials" in the tag.

<link rel="manifest" crossorigin="use-credentials" href="./assets/manifest.json">

answered May 21 '19 at 12:00

Kunal Moharir

55
1
7

score 2 · Answer 3 · answered Apr 10 '20 at 11:24

It's good that the crossorigin attribute helped in your case. That might not do the trick for most others. Anyhow.

There can be multiple reasons for the absence of the manifest file, which leads to this error message. The most common besides missing to place it in the root directory and referencing it in the head of the html file, is that you are building in another environment.

Any of these environments has their own configuration. Some of them might not by default wrap/pack the manifest.json file into the local test deployment package.

In Angular you solve it by adding the manifest to the assets with the directive in the angular.json file:"src/manifest.json" in the path projects/app/root/architect/build/options/assets

As seen below, there are multiple environments to cover. Not just the build. The higher your maturity is, the more of them you will need to maintain.

score 0 · Answer 4 · answered Jul 16 '19 at 07:36

0

Try to add a name in the name property Remember It should not be empty, contain spaces not it should contain uppercase letters.

answered Jul 16 '19 at 07:36

Mohammad Ayoub Khan

2,422
19
24

score 0 · Answer 5 · answered Jan 27 '21 at 12:37

I tried lots of fixes and none worked. After much grinding of teeth I found Azure doesn't serve .json as static files.

So I added the following to the web.config (extract below).

<configuration>

  <system.webServer>

...

    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".webmanifest" mimeType="application/json" />
    </staticContent>

...

  </system.webServer>
</configuration>

Many of the solutions on SO do mention this fix with the exception of the second MIME setting of .webmanifest files file ext.

It only worked for me with 2nd file ext ".webmanifest" included.

score 0 · Answer 6 · edited May 10 '21 at 19:57

If you have problems with the other answers you can use this:

Try to remove the mimetype first and then add it again in your web.config

(add in web.config)

    <staticContent>
       <remove fileExtension=".json"/>
       <mimeMap fileExtension=".json" mimeType="application/json" />
       <remove fileExtension=".webmanifest"/>
       <mimeMap fileExtension=".webmanifest" mimeType="application/json" />
    </staticContent>

score -1 · Answer 7 · answered Jan 28 '19 at 10:40

I had the same error today with my Angular 6 project hosted on Azure.

Here's my fix:

in my "web.config" file:

<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular" 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="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Add these lines:

<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>

Result:

<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
  <rewrite>
    <rules>
      <rule name="Angular" 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="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

That worked for me, hope it works for you too! :)

Related thread: How to allow download of .json file with ASP.NET

Angular 6 application : Manifest: Line: 1, column: 1, Unexpected token

7 Answers7

Linked