Angular 6 PWA with Node not working

Question

I have a Angular 6 app that works and registers the SW when served with http-server --port 8080 command as you can see here:

But when I serve the files from my Node / Express application that they are meant to be served. The service worker won't register, tried running the app from localhost and also from Heroku but it's the same. Application works otherwise. Any idea what can cause this?

Answer 1

I think this issue is to do with the path that @angular/cli uses when registering the service worker, I have found registering the service worker in main.ts to be more reliable:

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

Or, looking at this recent comment you can manually modify the path in app.modules.ts

-ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production })
+ServiceWorkerModule.register('.ngsw-worker.js', { enabled: environment.production })