Angular 延迟加载模块重新加载应用程序

Question

I lazy load a module. When changing the route which points to it, the whole app reloads and app.component ngOnInit() function is called again (which is undesirable since I subscribe to the server and need to do this only once). I found out that loading the module without refreshing the whole app is called 'Hot module reload' (HMR) and there are some packages that should help with that, however I would expect this to be handled by Angular itself. This issue happens only with lazy loaded modules.

app.component.html

<div>
<router-outlet></router-outlet>
</div>

app.component.ts

ngOnInit(): void {
  console.log('App init');
  this.realtimeService.subscripbeToRT(); // Should be called only once
}

app.module.ts

const routes: Routes = [
    { path: '', component: HomeComponent },
    {
        path: 'test',
        loadChildren: () => import('./test/test.module').then(m => m.TestModule)
    },
    { path: '**', redirectTo: '' }
];

@NgModule({
      declarations: [
         ...
      ],
      imports: [
         RouterModule.forRoot(routes),
         ...
      ],
      bootstrap: [AppComponent]
  })

  export class AppModule { }

In the example above, the real-time service is called on the route change to /test page. Does anyone know how to disable the whole app refresh when loading the lazy module?

Thank you

Answer 1

can you share a plunker/stackblitz where you're doing this. the scenario described by you is unusual.

HMR is required in development mode . it's not used in production.

Answer 2

In the end the issue was using href on some anchor tags instead of routerLinks. Now the app behaves as exprected.

Answer 3

我有同样的问题，因为我在我的顶栏中而不是使用 click=goto(/blah) 而在 ts 文件中做 this.router.navigate(url) 解决了这个问题