PWA: Unexpected token < in JSON at position 0

[360disrupt]

🐞 Bug report

Command

- [ x] build

Description

After installing the angular PWA service worker the Chrome Dev module shows the err in ngsw-worker.js:2353) it expects a json as param for return res.json();.

fetchLatestManifest(ignoreOfflineError = false) {
           return __awaiter$5(this, void 0, void 0, function* () {
               const res = yield this.safeFetch(this.adapter.newRequest('ngsw.json?ngsw-cache-bust=' + Math.random()));
               if (!res.ok) {
                   if (res.status === 404) {
                       yield this.deleteAllCaches();
                       yield this.scope.registration.unregister();
                   }
                   else if (res.status === 504 && ignoreOfflineError) {
                       return null;
                   }
                   throw new Error(`Manifest fetch failed! (status: ${res.status})`);
               }
               this.lastUpdateCheck = this.adapter.time;
               return res.json();
           });
       }

🔬 Minimal Reproduction

ng add @angular/pwa

• configured icons in manifest, set name, shortname and theme (probably optional)

• Added to maint.ts (see issue):

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
  if ('serviceWorker' in navigator && environment.production) {
    navigator.serviceWorker.register('/ngsw-worker.js');
  }
}).catch(err => console.log(err));

🔥 Exception or Error

Unexpected token < in JSON at position 0

🌍 Your Environment

Browser: Chrome: Version 73.0.3683.103 (Offizieller Build) (64-Bit)
Mac OS - 10.14.4

[alan-agius4]

Typically Unexpected token < in JSON at position 0 error means that an HTML file is being returned instead of a json file.

This usually means that either ngsw.json have not been served by the webserver.

I tried to add @angular/pwa on a new project and it seems to work as expected even when using baseHref.

Can you kindly share a minimal reproduction of the issue?

Thanks.

[360disrupt]

I had to change a few things:

1. Change nginx config:

• Service worker refuses to cache assets as the ngsw.json is not fetched correctly angular#24857 (comment)
• https://stackoverflow.com/questions/51312819/angular-6-service-worker-refuses-to-cache-assets-as-the-ngsw-json-is-not-fetched
  from try_files $uri$args $uri$args/ /index.html; to try_files $uri $uri$args $uri$args/ /index.html;

This resolved the issue above.

2nd I needed to include the manifest.json into angular.json and link to it from index. Also, I had to define the meta theme-color. A guide can be found: https://www.smashingmagazine.com/2018/09/pwa-angular-6/
This wasn't done automatically by ng add.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}