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

Hey Guys,

I can't seem to get an answer on stackOverflow so maybe someone here can help. This question is https://stackoverflow.com/questions/55155359/unexpected-token-on-every-new-build-of-angular-production-pwa-until-site-ref it currently has a bounty on it, if someone wants to answer this there.

Basically I have an angular app and its a PWA, now everytime I do a new production build the first time I visit the site I get an error like so

![image of error]1

and then as soon as I refresh the page, the site works as normal.

Now my suspicion is that every time the app is updated, the main bundled js file changes, and the PWA has cached the old one and the app is still trying to use the new one.

So what I did was in my root component module I check to see if the Service Worker needs updating like so…

root.component.ts

@import { SwUpdate } from '@angular/service-worker' ... export class... constructor( private _sw: SwUpdate ) { if (this._sw.isEnabled) { this._sw.available .subscribe(() => { this._sw.activateUpdate() .then(() => { window.location.reload(); }); }); } } 

now this should check to see if there is an update and then just refresh the page.. but it doesnt seem to be working?

I'm not even sure if this is the issue, but it seems weird how after every build this happens and then as soon as I refresh

this is my ngsw-config.json

{ "index": "/index.html", "assetGroups": [ { "name": "App", "installMode": "prefetch", "resources": { "files": [ "/favicon.ico", "/index.html", "/*.css", "/*.js" ] } }, { "name": "assets", "installMode": "lazy", "updateMode": "prefetch", "resources": { "files": [ "/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)" ] } } ] } 

Now I have done some testing, If you visit the site after a fresh build on private mode you dont get the error, it only seems to happen if you have visited the site before, which is what makes me think its a caching issue

My Application is hosted on Azure and my application is using Angular 7.27

I'm also not sure if azure keeps some kind of cache also that could be causing this issue. Although it never happened before I made my application a PWA

Any help would be appreciated!

EDIT

My Project structure is as follows

I have a root module that lazy loads the other modules now the first module that gets loaded is my account module so the user can log in

this is my root-routing.module.ts

import { NgModule } from '@angular/core'; import { Routes, RouterModule, PreloadAllModules } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: '/account/login', pathMatch: 'full' }, { path: 'account', loadChildren: 'account/account.module#AccountModule', data: { preload: true } } ]; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })], exports: [RouterModule], providers: [] }) export class RootRoutingModule { 

}

so technically the first module the user gets to is the account module, but obviously it has to be redirected from the root module.

Should I be putting the SwUpdate in the account module instead??

Are there any other solutions, is there a way I can just force the user to refresh on the first visit of my site?

I suppose I could also remove .js and .css from the ngsw-config.json but that would defeat the purpose of having a PWA

Thanks

submitted by /u/StolenPikachu
[link] [comments]
Source: Reddit