ZoneAwarePromise conflicts with native CacheStorage

I’m working on a project where I wanted to dynamically cache URLs in browsers native CacheStorage, that is also accessed by the service worker.

I just try to access the cache like this:

window.caches.open(CACHE_NAME)
  .then(cache => cache.addAll(ARRAY_OF_URLS))
  .catch(err => console.log('error while caching', err));

I get the error:

ERROR Error: Uncaught (in promise): TypeError: the given value is not a Promise

I can easily reproduce this by typing window.caches.open('testcache').then(result => result.add('/')) on the browser console window my angular app.

I assume this problem is caused because the native Promise is overwritten by ZoneAwarePromise but I’m not able to really find the root cause.

I’m running on Angular 5.2.11 and zone.js 0.8.26. Browser is Chrome, version 69.0.3497.35 beta (64-bit) on a Chromebook.

I found a workaround for my problem that I documented on stackoverflow on a matching problem. https://stackoverflow.com/a/52083423/2258093

[JiaLiPassion]

@davemecha, I don’t know the cause either, maybe the native implementation of cache.add will check the promise is native or not.

so another walkaround is just using cache.put.

fetch(url).then(function(response) {
  if (!response.ok) {
    throw new TypeError('bad response status');
  }
  return cache.put(url, response);
})

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