Angular 5 service worker not work in some lazy load modules

[100cm]

The example websitepage :https://kl.atyun.net

If u first load the websites it will redirect to module A ,and the route is '/sites', but the service worker not work in this route. and then u visit the page "/login" ,service worker works now ,why ?
"/login" and "/sites" not in same chunk.

and here is my code:

app.module:

  imports: [
    ServiceWorkerModule.register('./ngsw-worker.js', {enabled: environment.production}),
    routing,
    HttpModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,

  ],

routing config:

  {path: 'sites', loadChildren: '../modules/site-render/site-render.module#SiteRenderModule'},
  {path: 'login', loadChildren: '../modules/login/login.module#LoginModule'},

[filipesilva]

@Brocco do you know why this might be?

@icepoint0 it would help if you can provide a repro we can follow.

[100cm]

@filipesilva
it is strange, right? i'am sorry i can't provide a repro , because it is my company's project, i really need your help, thank you!

[warapitiya]

same thing happening to me right now! Trying my best to provide a sample repo for this.

[100cm]

@warapitiya Follow me ,dude

[warapitiya]

@icepoint0 Currently for me, its not working for all the modules.

[100cm]

@warapitiya maybe you shoud try every module's route. to test which route will load the [service-worker].js ,:D , My route is /login, i am still waiting help , so just follow my github page.

[os7blue]

lol

[warapitiya]

Tip: I figured that angular is not executing "serviceWorker.register()" function. The reason I'm saying this is because I'm not getting any request to ngsw-worker.js file.

Executing the below code snippet in console will register the service as expected.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/ngsw-worker.js');
}

This can be related to #9098 also.

[warapitiya]

Ok, I think now I fixed it. Issue was directly adding config.js file in index.html which contained a javascript global variable. so that I can runtime parameterized values (cause we are doing build promotion).

Solution: Instead of adding the JS file directly, http.get() a config JSON file.

More info: https://juristr.com/blog/2018/01/ng-app-runtime-config/

[100cm]

i will try, thank u . @warapitiya

[damienwebdev]

Just to chime in here... I'm experiencing this on some child routes of a lazy-loaded module. I think the offending library for me is https://github.com/chenqingspring/ng-lottie. @filipesilva do you still need repro steps for this? I think I can come up with a fairly simple example as a demonstration using that library.

Just like @warapitiya, the serviceWorker.register() never gets called and I can successfully

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/ngsw-worker.js');
}

in my console to load the service worker.

[damienwebdev]

I'm updating here after I've done some analysis. It looks like the offending code is:

https://github.com/angular/angular/blob/0bdd30e34f87305085afc2825749ea2dc04a9409/packages/service-worker/src/module.ts#L33

Looks like this error is almost always a result of a fault in a third-party module causing the app to never mark "isStable" to true, thus causing the observable to trigger, and thus the serviceworker.register();

While I don't think this is a problem with @angular/angular-cli or @angular/service-worker, I think there may be some need to explain to third-party devs how to prevent this scenario.

There was another library that was causing this in late 2017, and here is the relevant issue: angular/angularfire#1347

Additionally, here's an issue in @angular/angular-cli that references I think a similar result. #8779

Finally, in my particular case, I think the offending line in airbnb/lottie is https://github.com/airbnb/lottie-web/blob/master/build/player/lottie.js#L4184

Somehow the xhr request is preventing the app from becoming stable. If anyone is more familiar ng "app stability", I think this can fairly easily be resolved.

[filipesilva]

Heya, is this still a problem? If so, I would like to see a repro so that we could get some traction on it.

[gapinto]

I have the same problem...
I'm using angular 8
my app-routing.module is:

const routes: Routes = [ 
    { 
       path: 'posts', loadChildren: () => import('./posts/posts.module').then(mod => mod.PostModule) 
     }, 
    { 
       path: '', redirectTo: 'posts', pathMatch: 'full' 
     }
];

my post-routing.module is:

const routes: Routes = [ 
      { 
         path: '', component: PostsComponent, resolve: { posts: PostsResolve } 
       }
];

When I'm running the lightHouse with this configuration all check is failing, but if I to remove the lazy module together with the redirect configuration. All check is passing.

[alan-agius4]

Thanks for reporting this issue. However, you didn't provide sufficient information for us to reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.

If the problem persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.

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