在aux路由之间没有共享Angular2服务实例？

Question

I have an issue with angular. I have a feature module whose routing configuration looks like this:

const routes: Routes = [
{ 
    path: '', 
    children: [
        { path: '', component: CanvasComponent },
        { path: '', component: ControlsComponent, outlet: 'master' },
        { path: '', component: ToolbarComponent, outlet: 'detail-header' },
        { path: '', component: ConsoleComponent, outlet: 'detail-bottom' },
    ]
}];

The outlets are declared in the app.component.html:

<!-- Navigation -->
<nav *ngIf="authService.loggedIn" id="navigation">
    <iq-navigation></iq-navigation>
</nav>

<!-- Master View -->
<div *ngIf="authService.loggedIn" id="master" [iqResizable]="['right']" [minSize]="250">
    <router-outlet name="master"></router-outlet>
</div>

<!-- Detail View -->
<div id="detail">

    <!-- Detail Header -->
    <div id="detail-header">
            <router-outlet name="detail-header"></router-outlet>  
    </div>

    <!-- Detail Main -->
    <div id="detail-main">
        <router-outlet></router-outlet>  
    </div>

    <!-- Detail Bottom -->
    <div *ngIf="authService.loggedIn" id="detail-bottom" [iqResizable]="['top']">
        <router-outlet name="detail-bottom"></router-outlet>
    </div>

</div>

The route for the feature module is configured in app-routing.module like this:

const routes: Routes = [
{ 
    path: '', 
    redirectTo: '/flow', 
    pathMatch: 'full' 
},
{ 
    path: 'flow', 
    canActivate: [AuthGuard], 
    loadChildren: 'app/flow/flow.module#FlowModule' 
},
{ 
    path: 'data', 
    canActivate: [AuthGuard], 
    loadChildren: 'app/data-manager/data-manager.module#DataManagerModule' },
{ 
    path: 'login', 
    loadChildren: 'app/login/login.module#LoginModule' 
},];

Now both the Canvas Component and the Controls Component are injecting a service, but each one gets its own instance.

I thought that each module (especially since this feature module gets lazily loaded) has its own root injector, which in turn gets appended as a child to the root injector. But it seems like each root component of each outlet gets its own root injector (and each one provides my EditorService) and so do not share a common ancestor and thus each get their own service instance.

Is this intentional? In my case this screws up my whole architecture.

Thanks for your advice.

EDIT: Here is the definition of the lazily loaded module (flow.module)

@NgModule({
imports: [ ReactiveFormsModule, SharedModule, FlowRoutingModule ],
exports: [], 
declarations: [
    CanvasComponent, 
    ControlsComponent, 
    ...
],
providers: [ 
    EditorService, 
    ....
]

})

The Service which gets instantiated twice is the EditorService

For the app module there is nothing fancy, but for the sake of completeness:

@NgModule({
    imports: [ BrowserModule, AppRoutingModule, CoreModule, SharedModule, LoginModule ],
    exports: [],
    declarations: [ AppComponent ],
    providers: [],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

My Solution Well, i implemented a FlowModule.forRoot() function as suggested by Günter which returns a ModuleWithProvider configured to provide my EditorService and it works. I`m still curious though if this behavior is intended, since optimally i would just load my feature module without needing any further configuration steps. Also i will have to do this for every other feature module and service which shall be shared by different outlets (eg components in the master and detail outlet due to my chosen architecture above)

Answer 1

I thought that each module (especially since this feature module gets lazily loaded) has its own root injector, which in turn gets appended as a child to the root injector. But it seems like each root component of each outlet gets attached to the app component and so do not share a common ancestor and thus each get their own service instance.

Hard to understand for me what you mean by this.

If you provide a service in a lazy loaded module, components of this module will get a different instance than lazy loaded components from other modules or non-lazy loaded modules.

Actually components in non-lazy loaded modules will only get any instance injected at all if there is a provider registered at the appliation root scope and in other lazy loaded modules they also only get an instance if this lazy loaded module also has a provider or the application root scope has a provider.