Angular-cli: Service worker not getting registered

[jqp5000]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [ ] build
- [ x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Repro steps

Followed steps in the official doc for setting up the service worker: https://angular.io/guide/service-worker-getting-started

The log given by the failure

No errors, all goes well but when loading the app in the browser the service worker is not being registered.

Mention any other details that might be useful

Temp solution: manually registering the service worker in the main.ts file solves the issue:

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

[moxival]

Does it have anything to do with this https://github.com/angular/angular-cli/issues/8779#issuecomment-350737663 ?

We were having the same issue and it turned out we were using intervals from within the zone.

[alan-agius4]

Hi, indeed this might be the case that the application doesn't get in a stable state.

However, the issue will be closed since the issue template was not followed. Ie no reproduction, nor details about the versions were provided.

If the problem persists kindly open a new issue and kindly fill the issue template and ideally provide a reproduction.

A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[kolkov]

Tha same issue for me too!
Angular CLI: 7.2.1
Node: 10.13.0
OS: win32 x64
Angular: 7.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package Version

@angular-devkit/architect 0.12.1
@angular-devkit/build-angular 0.12.1
@angular-devkit/build-optimizer 0.12.1
@angular-devkit/build-webpack 0.12.1
@angular-devkit/core 7.2.1
@angular-devkit/schematics 7.2.1
@angular/cli 7.2.1
@angular/pwa 0.12.1
@ngtools/webpack 7.2.1
@schematics/angular 7.2.1
@schematics/update 0.12.1
rxjs 6.3.3
typescript 3.2.2
webpack 4.23.1

[kolkov]

Service workers are only available to "secure origins" (HTTPS sites, basically) in line with a policy to prefer secure origins for powerful new features. However http://localhost is also considered a secure origin, so if you can, developing on localhost is an easy way to avoid this error.

https://www.chromium.org/blink/serviceworker/service-worker-faq

[duard]

Same issue for me too!

[shahafal]

same issue for me!
and also same workaround helps (registering ngsw-worker in main.ts)

@alan-agius4 please reopen the issue, we have a few people here by now reporting this issue.
in a previous message @kolkov gave you packages versions. i'll write my packages versions also.
as far as steps to reproduce, just as written in the template we followed the step-by-step guide:

ng add @angular/pwa --project *project-name*
ng build --prod

there are no console errors, the service workers simple don't get registered, and when adding the suggested workaround they do get registered.

my packages versions:

Angular CLI: 7.3.5
Node: 10.15.1
Angular: 7.2.8
@angular-devkit/architect 0.13.5
@angular-devkit/build-angular 0.13.5
@angular-devkit/build-optimizer 0.13.5
@angular-devkit/build-webpack 0.13.5
@angular-devkit/core 7.3.5
@angular-devkit/schematics 7.3.5
@angular/cli 7.3.5
@angular/pwa 0.13.5
@ngtools/webpack 7.3.5
@schematics/angular 7.3.5
@schematics/update 0.13.5
rxjs 6.3.3
typescript 3.2.4
webpack 4.29.0

[Ettores88]

+1 We are experiencing the same problem.

/cc @unsafecode

[duard]

Same problem here ... I cant register my service worker :-(

[maxcl10]

I have the same issue. Was working before I update to version 7.2.11.
"@angular/animations": "7.2.11",
"@angular/common": "7.2.11",
"@angular/compiler": "7.2.11",
"@angular/core": "7.2.11",
"@angular/forms": "7.2.11",
"@angular/http": "7.2.11",
"@angular/platform-browser": "7.2.11",
"@angular/platform-browser-dynamic": "7.2.11",
"@angular/platform-server": "7.2.11",
"@angular/pwa": "^0.10.2",
"@angular/router": "7.2.11",
"@angular/service-worker": "7.2.11",

[jamesbarrett95]

Receiving the same issue.
"@angular/animations": "^7.1.1",
"@angular/cdk": "^6.3.3",
"@angular/common": "^7.1.1",
"@angular/compiler": "^7.1.1",
"@angular/core": "^7.1.1",
"@angular/flex-layout": "^7.0.0-beta.19",
"@angular/forms": "^7.1.1",
"@angular/http": "^7.1.1",
"@angular/material": "^6.3.3",
"@angular/material-moment-adapter": "^6.4.6",
"@angular/platform-browser": "^7.1.1",
"@angular/platform-browser-dynamic": "^7.1.1",
"@angular/pwa": "^0.13.7",
"@angular/router": "^7.1.1",
"@angular/service-worker": "^7.1.1",

[C0ZEN]

+1

[DenisValcke]

Why is this issue closed when it hasn't been solved yet?

[JRafael91]

same problem, I hope that in angular 8 it is solved

[C0ZEN]

I am disappointed that this kind of bug exists and I would love to see it resolved without the need to apply a fix on my own code nevertheless as far as I saw, this is a developer issue and we should (dear developers) fix it ourself.
I was able in a first time to apply a dirty code to force the service worker to register itself.

main.ts

if ('serviceWorker' in navigator && isProduction) {
    navigator.serviceWorker.register('./ngsw-worker.js');
}

Note: the ./ is very important to avoid an error with custom base href.

And after more search, I figured out that the culprit was my code...

These issues helped me:

• https://github.com/angular/angular/issues/20970
• https://github.com/angular/angular-cli/issues/8779

Basically, I made two mistakes while using:

• fromEvent
• SwUpdate

To fix them, I used applicationRef.isStable.

Example:

this.isStableSubscription = this.applicationRef.isStable.subscribe(isStable => {
    if (isStable) {
        fromEvent(window, 'resize').pipe(
            distinctUntilChanged(),
            debounceTime(30)
        ).subscribe(() => {

            // Do some stuff here
        });
        this.isStableSubscription.unsubscribe();
    }
});

Note: if applicationRef is causing a cyclic dependency, you can:

• Use private injector: Injector in the constructor
• Create a property and set it this.applicationRef = this.injector.get(ApplicationRef);

[dman777]

I just hit this bug with Angular 7.3.1. Why is the bug closed?

[bleuscyther]

+1

[bleuscyther]

This help me : https://github.com/angular/angular-cli/issues/8515#issuecomment-486017106

[casper5822]

Same problem for me with angular-cli 7.3.9

[kolkov]

And for me with Angular CLI 8.2.0-rc.0

[casper5822]

It works for me with angular-cli 7.3.9 if i have:

1) add to main.ts:
platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
if ('serviceWorker' in navigator && environment.production) {
navigator.serviceWorker.register('./ngsw-worker.js');
}
})
.catch(console.error);
2) in the app module set:
ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production })

3) in the manifest.json:
"scope": "/",
"start_url": "/ the base-href used for the ng-build /",

[elgerm]

Found a solution:

I too had this problem with my project, and spent a whole day trying to figure it out. Yes, starting a clean new project and installing the @angular/pwa works out of the box. But as soon as you start building a bit on your project, it silently fails / just doesn't load ngsw-worker.js.

Finally I downloaded the angular code and looked at the sources. It appears that there is a 'registrationStrategy' which has to do with if angular waits with the registration until your app is 'stable'. Now I have a bunch of stuff I'm loading at the beginning of my project (like oidc client and building websocket connections) and angular apparently thinks my app never is stable.

Fortunately you can override the registrationStrategy like so:

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

See for the documentation here

After this the serviceworker will load, whatever the state of your app. There's also an option to pass an observable, so you can have it loaded whenever you think it's right.

I think this really really needs to be documented somewhere, preferably in the top of the docs with capital letters. Also, when the ngsw-worker doesn't load whenever it isn't stable, it would be VERY helpful to at least log something in the console!

[kolkov]

@elgerm thank you very much!
And team, what about main problem? How to debug my application stabilization issue? Thanks!

[angular-automatic-lock-bot[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._}