'Unexpected token <' on every new build of angular production PWA until site refresh

Question

I know there are some similar questions like so unexpected token after angular 2 production build but it doesnt actually answer my question.

Basically I have an angular

Answer 1

I'm no expert to angular problem. The best I can do is help you break down the problem, help you debug.

1. If you just want the error go away (and you have control over the server that serves your index.html), I'm pretty sure it can solved by setting these http response headers (source):

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

2. However, such setup more or less beats the point of PWA in the first place. PWA allow users to use your site even offline, they must be able to get to index.html first, so index.html has to be cached.

3. Caching index.html is the right thing to do. It's likely your cache-control setting for your old .js and other assets has some problems. I'm not sure which part goes wrong, but the expected behavior is: these assets should be cached just like index.html, 404 should never happen in first place since browser should read from local cache.

4. One thing you can do to quickly "cover up" the problem, is simply keep all the old assets of previous version on server too. This way, cached index.html ref to old assets, they remain accessible, no 404 thus no "unexpected token <".

5. Now I would suggest you try point 4 first, to verify my theory at point 3 is correct. Also check if SwUpdate works properly. Ideally, you should see following:

   1. you publish newer version of code
   2. you visit the site, should see cached older version
   3. after older version of app is loaded, SwUpdate automatically refreshes the page for you and load the newer version.

To sum up, my theory is things go wrong at point 3. Older assets should be correctly cached, using proper http cache-control headers (or angular service worker has other way of doing same things? I'm not familiar with that part). If you cannot figure it out, then just keep the old assets accessible on server.