Angular 2 RC5 child route reloads containing component and module

Question

having a problem with angular 2 reinitializing more of the overall application than i thought it would upon route navigation. to create a quick demo i copied the angular 2 routing tutorial plunker to expose the issue:

http://plnkr.co/edit/wAjaIAva0caufEZJG36s?p=preview

in this familiar-looking demo, the crisis-center routes are lazy-loaded from the crisis-center.module. i've added a few 'widget' placeholders on the crisis-center pages. if you click on the 'Crisis Center' link, then increment using the 'add widget' link a few times, then click on one of the child listings, you'll notice that two of the widget counters are reinitialized.

It seems that the crisis-center.module, the crisis.service it provides, and the crisis-center.component are all completely reinitialized with each route change! For simple systems, this might not be an issue, but any important state data (such as, say an API session) related to the crisis.service provided by the crisis-center.module would be lost with each navigation, unlike any data in the app.service provided by the app.module.

consider this app layout, which is closer to my actual problem app:

|- /app
|  |- app.component
|  |- app.module
|  |- app.routing                     <-- app routes, including lazy load for feature.module for all /feature routes (loadChildren)
|  |- app-api.service                 <-- provided by app.module, handles master auth
|  |- /feature
|  |  |- /child-feature
|  |  |  |- child-feature-1.component <-- displays in feature.component's router-outlet
|  |  |  '- child-feature-2.component <-- displays in feature.component's router-outlet
|  |  |- feature-api.service          <-- this feature's api, provided by feature.module
|  |  |- feature-container.component  <-- has a router-outlet for child-features
|  |  |- feature-menu.component       <-- displays in feature.component
|  |  |- feature-status.component     <-- displays in feature.component
|  |  |- feature.module               <-- provides feature-api.service
|  |  '- feature.routing              <-- feature routes, loaded in feature.module
|  |- /other-feature
|  |  |- other-feature.component
|  |  |- other-feature-list.component
|  |  |- other-feature-detail.component
|  |  |- other-feature.module
|  |  '- other-feature.routing
|  '- main   
|- /node_modules
|- /typings
|- index.html
|- systemjs.config.js
'- tsconfig.json

in my application, 'feature.module' requires authentication to a specific api, but this auth is not required in any other area of the app. as such, i only want to load the api service in that module, insulating it from the rest of the app. as in the demo, this api is reinitialized between every route navigation. also the feature-menu and feature-status outside the router-outlet in feature-container also get reinitialized on each route nav.

this seems really counter-intuitive -- shouldn't angular only be changing out the interior router-outlet component on sub navigation? also, once a module (and any services it provides) are loaded, shouldn't they then be a part of the overall application and not reinitialized on every route nav?

I guess my question is, "Is angular 2 supposed to have this behavior?" and if the answer is 'yes', then "How should i go about keeping stateful services in submodules?" and also "Is there a way to enforce navigation to only apply to the inner-most router-outlet (without using a named outlet)?"

Thanks so much for even reading this novella, and any input is greatly appreciated. Rewrote the question to hopefully make it clearer ;)

Answer 1

In case anyone is having either of these two issues, both are completely fixed in RC6. Not sure how no one made a bigger stink about this during RC5, but at least it's solved now :)