导航路线时，Angular 2延迟加载模块多次初始化？

Question

Using RC5

I have a lazy loaded route configured:

{path: STATE.PROFILE, loadChildren: 'app/profile/profile.module' },

which points to this module:

@NgModule({
  imports: [CommonModule, FormsModule, routing],
  declarations: [SelectProfileComponent, ConfirmProfileComponent],
  providers: [ProfileCacheService]
})
export default class ProfileModule { }

... and these routes

const routes: Routes = [
  { path: '', component: SelectProfileComponent, canActivate: [ProfileGuard] },
  { path: STATE.CONFIRM, component: ConfirmProfileComponent, canActivate: [ProfileGuard] },
];

In the select-profile component, there is a button to navigate to its sibling route "State.Confirm" via a "shared" service that is declared in root AppModule . The Angular router facilitates the navigation in this shared service:

return this.router.navigateByUrl(url);

The problem is that there is state being stored in the ProfileCacheService ( declared in the lazy loaded module ), but is wiped out after I navigate to the "confirm" route. The reason why this is happening, is because the module is being re-initialized when attempting to navigate to a route within the same lazy-loaded module - which in turns re-initializes the CachService because it is module-scoped

Declaring the ProfileCacheService on the Root Module solves the issue, but it defeats the purpose of lazy loading, since this service is ever only being used within this module.

Has anyone ran into the same issue?

Answer 1

I've had the same problem, it looks like it has been fixed in master and will be part of rc6:

https://github.com/angular/angular/issues/10841