@angular/pwa cannot refresh pwa after rebuild - Driver.<anonymous> (ngsw-worker.js:1988) property 'id' of undefined

[andrew19881123]

I'm submitting a...

[x] Bug report

Current behavior

1. I create a new angular 6 project with the cli and adding the pwa with ng add @angular/pwa
2. I run ng build --prod
3. I run http-server -p 8080 dist/angular6/

current behavior: the app starts at http://localhost:8080/ and i can see the browser downloading all the files including the service workers, if i put the browser offline i can still see the app and the resources fetched by the sw.

4. I change the html of the app.component.html
5. I run ng build --prod
6. I run http-server -p 8080 dist/angular6/
7. Refresh the browser in http://localhost:8080/

I get this error:

ngsw-worker.js:1988 Uncaught (in promise) TypeError: Cannot read property 'id' of undefined
    at Driver.<anonymous> (ngsw-worker.js:1988)
    at Generator.next (<anonymous>)
    at __awaiter (ngsw-worker.js:1755)
    at new Promise (<anonymous>)
    at __awaiter (ngsw-worker.js:1751)
    at Driver.updateClient (ngsw-worker.js:1985)
    at Driver.<anonymous> (ngsw-worker.js:2224)
    at Generator.next (<anonymous>)
    at fulfilled (ngsw-worker.js:1752)

Environment

{
  "name": "angular6",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "sw":"http-server -p 8080 dist/angular6/",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/pwa": "^0.6.0",
    "@angular/router": "^6.0.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26",
    "@angular/service-worker": "^6.0.0"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.0",
    "@angular-devkit/build-angular": "~0.6.0",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.0",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}


Browser:
- [x] Chrome (desktop) version 66.0.3359.139
 
For Tooling issues:
- Node version: 10.0.0
- NPM version: 6.0.0
- Platform:  OSX

[niikoo]

I've used this fix for that issue:

ngsw-worker.js:2208

Replace:
if (clientId !== null) {
With:
if (clientId !== null && clientId !== '') {

Why?
Because I've seen clientId's that are empty strings instead of null.

[aavelyn]

I got the exact same error
(https://stackoverflow.com/questions/50161482/angular-cli-update-service-worker-id-of-undefined-error)
But already on angular-cli v1.7.4 and Angular v.5.2.10

Edit

@niikoo your solution has the side effect, that the browser will treat the new ngsw-worker.js as a new SW to replace the old one. I'm not sure how the versioning or updating is being done but essentially ng build prod does generate the exact same SW each time, which then loads a different ngsw.json.

[ratfury]

We have the same error but only in Chrome (Version 66.0.3359.139) the webapp won't load.
With "@angular/service-worker": "5.2.0", everything seems to work fine.

Update
After a second deploy we ran into the same error. Now we have unregistered all service workers in chrome (chrome://serviceworker-internals/) and now it seems to work with version 5.2.10 also. Don't know where the problem lies.

[Kristian1138]

For me, the workaround to get NG6 PWA to be able to refresh was posted by Dirand and Argentan angular-cli/issues/8779.

Dirand suggested to check if application is stable:
import { ApplicationRef } from '@angular/core';
...
constructor( private _application: ApplicationRef ) {}
...

 ngOnInit() {
    this._application.isStable.subscribe((s) => {
      if (s) {
        setInterval(t => { console.log('Ping')}, 500);
      }
    });

    this._application.isStable.subscribe(t => {
      console.log('App stable: ' + t);
    });
}

Argentan suggested to register the service worker in main.ts:

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

[gkalpak]

Duplicate of #23526. (Fix is on its way: #23625)

[walle233]

same error,who can help me.

[gkalpak]

@walle233, the fix has been merged a while ago. It is in the latest 6.x version and will be in the next 5.x release as well. What version are you using?

[walle233]

@gkalpak i use 5.x version.thank you for reply to me.

[gaetanmallet]

I have same error.
"@angular/core": "5.2.0",
"@angular/service-worker": "5.2.0"

[gaetanmallet]

@walle233, the fix has been merged a while ago. It is in the latest 6.x version and will be in the next 5.x release as well. What version are you using?

If i check the date of your answer, the fix should be in the 5.2.11, i will try to update all my angular packages to this release and give you a feedback.

[gaetanmallet]

@walle233, the fix has been merged a while ago. It is in the latest 6.x version and will be in the next 5.x release as well. What version are you using?

If i check the date of your answer, the fix should be in the 5.2.11, i will try to update all my angular packages to this release and give you a feedback.

It seems to work @gkalpak, i did not see the 5.2.11 before because it is between the 6.x releases.

Good job guys ! Thanks 💪

[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.}