0

I've had a look around and I can't seem to find anything that really solves this (thanks in advance for the help).

I've built a website in Ionic. It's live at https://www.fairydustgame.com/

I am trying to make it a PWA. When I load the site I can see that it's throwing the following error;

Manifest: Line: 1, column: 1, Syntax error.

My manifest file is at /manifest.webmanifest - which is referenced in the index.html file of my app.

If I run the site locally I don't get that error. Relatedly - if I access /manifest.webmanifest via localhost I am able to load the page. However - if I try to access the same page online I get a routing error.

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'manifest.webmanifest'

Here is my app-routing-module.ts

  {
    path: '',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)

  }
];

I am aware that I am loading the /home module at root so I've also tried copying the manifest file into the /home directory. No dice.

I am currently hosting with AWS Amplify, cached using Cloudflare, however - accessing the site with the direct Amplify URL has the same behaviour.

I have tried including cross-origin and adding necessary redirects as per this answer

I have also tried duplicating manifest.webmanifest to create a manifest.json file - if I do that and try to access manifest.json locally - I get the same routing error. I have tried manually repeating the copy within the /www folder, and tried this auto-copy solution to try to get manifest.json working locally, but if I change the index.html reference to read manifest.json I get the same routing error and Manifest: Line: 1, column: 1, Syntax error. as I get with the hosted manifest.webmanifest.

I have also tried copying manifest.json into the /home directory just in case. Again - no dice.

At this point I have no idea where to go next - I'm not sure if I'm just fundamentally misunderstanding how routing works. Though even in that case - it's very weird to me that a route would work locally but not when hosted on amplify. Unless, perhaps, amplify can't cope with the webmanifest file extension, but I can't seem to get even my local instance to understand the .json rename so I don't know how I can test that.

Any help would be much appreciated.

major_monogram
  • 11
  • 2

2 Answers2

1

Turns out I had to reorder the redirects in AWS Amplify - put the redirects first and started picking up the manifest file fine.

major_monogram
  • 11
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 07 '22 at 05:57
0

This has nothing about to Angular, your App or build.

I had the same issue with Vue, it is about the proxy.

The client (browser) is problaby being redirect by Amplify for this extesion "webmanifest".

Look at the redirects in the option "Rewrites and redirects" in menu and you will understand quickly.

Something like: </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> TO /index.html

And this (DEFAULT by ) -->> /<> TO 404.

So, your manifest.webmanifest is being redirect to 404, add the extention int the RULE to redirect do index.html (because your application is a SPA) and it will works fine. The same for any other extension being redirect.

Change like this:

</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|webmanifest)$)([^.]+$)/> TO /index.html

Pedro dos Santos Pereira
  • 26
  • 2