Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined on ionic PWA update

[shariajoe]

Ionic version:
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ...
[x] bug report
[ ] feature request

Current behavior:
My ionic PWA runs without error on ionic serve, however after a build, the app throws the error

Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
Happens every time I update my source code and try to navigate to a different page.
The error goes away after refresh.

Expected behavior:
Updates to the web app should be seamless even with cached content on the service worker

Steps to reproduce:
Build ionic PWA using npm run ionic:build --prod use sw-precache with the provided configs. Make an update to your ionic/angular code and push the update to hosting. The error occurs on switching to another page after update of the service worker.

Also added a no-cache header to my service-worker on firebase hosting

Related code:

I am using sw-precache to generate my service worker code and Firebase hosting

sw-precache-config.js is set up as below:

module.exports = {
  staticFileGlobs: [
    'www/**.html',
    'www/build/**.js',
    'www/build/**.css',
    'www/assets/*',
    'www/assets/custom-font/*',
    'www/assets/fonts/*',
    'www/assets/icon/*'
  ],
  root: 'www',
  stripPrefix: 'www/',
  navigateFallback: '/index.html',
  navigateFallbackWhitelist: [/^(?!\/__).*/]
};

packge.json is as follows:

{
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "precache": "sw-precache --verbose --config=sw-precache-config.js"
  },
  "dependencies": {
    "@angular/common": "^5.2.5",
    "@angular/compiler": "^5.2.5",
    "@angular/compiler-cli": "^5.2.5",
    "@angular/core": "^5.2.5",
    "@angular/forms": "^5.2.5",
    "@angular/http": "^5.2.5",
    "@angular/platform-browser": "^5.2.5",
    "@angular/platform-browser-dynamic": "^5.2.5",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "firebase-admin": "^5.8.2",
    "firebase-functions": "^0.8.1",
    "font-awesome": "^4.7.0",
    "ionic-angular": "^3.9.2",
    "ionicons": "3.0.0",
    "lodash": "^4.17.5",
    "ngx-clipboard": "^9.1.3",
    "ngx-sharebuttons": "^4.1.4",
    "ngx-zendesk-webwidget": "^0.1.3",
    "rxjs": "^5.5.6",
    "sw-toolbox": "3.6.0",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "sw-precache": "^5.2.1",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project",
  "config": {
    "ionic_copy": "./config/copy.config.js",
    "ionic_sass": "./config/sass.config.js"
  }
}

Issue might be related to this:
swimlane/ngx-charts#568

Ionic info: :

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v6.11.5
    npm  : 3.10.10
    OS   : macOS High Sierra

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

[MoElkhidir]

I had the same issue with an Ionic app application, fixed by npm i ws@3.3.2 --save-dev, obviously there is some issues with the web sockets in the recent updates of chrome, this solved it for me.

[YamanSehzade]

Hi @shariajoe,
Did you fix it ?

[shariajoe]

@YamanSehzade no, still haven't fixed it.

[shariajoe]

Hi,
So this is how I think i've fixed it.
clientsClaim and skipWaiting are enabled as true by default when using sw-precache. This causes inconsistencies in code since the installed service worker is activated immediately and thus deletes resources which may be needed by the active page and moreso, in my case using lazy loading.

Setting both clientsClaim and skipWaiting as false ensures that code on open tabs is maintained throughout their lifetime and only updated once all stale tabs are closed and a new one open. So no more errors after update.
Reference: GoogleChromeLabs/sw-precache#180

[elviocb]

Hey @shariajoe ! Can you share which part of the code did you update? I got the same issue but can't find right place to change it.

thanks

[shariajoe]

@elviocb I edited my sw-precache-config.js on the root of my app to look as below
module.exports = { staticFileGlobs: [ 'www/**.html', 'www/build/**.js', 'www/build/**.css', 'www/assets/*', 'www/assets/custom-font/*', 'www/assets/icon/*', 'www/assets/menu_icons/*', 'www/assets/fonts/*' ], root: 'www', stripPrefix: 'www/', navigateFallback: '/index.html', maximumFileSizeToCacheInBytes: 4194304, skipWaiting: false, clientsClaim: false };
scripts in package.json
"scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve", "precache": "sw-precache --verbose --config=sw-precache-config.js" },
Notice how i refer to the sw-precache-config

[horlah]

@mohamed-Fadl thanks, your solution worked for me 😄

[santekotturi]

@shariajoe when do you run the precache step in the deploy process? before or after npm run ionic:build?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.