angular2 rc5 router service singleton

Question

I've recently migrated to Angular 2 RC 5 and converted the sub-modules in my app to NgModule.

Given the following plunker provided in the Angular2 Routing Documentation, how can the CrisisService in the CrisisCenterModule be turned into a stateful singleton that is share across the routes of the crisis-center module.

Currently a new CrisisService is instantiated for every route in the module.

e.g. if you add a simple constructor in the CrisisService, like so:

constructor() {
  console.log("Hello from CrisisService");
}

The browser console will log out that string every time you link to a different sub-route, e.g. /crisis-center or /crisis-center/11

I'd like to be able to share state across the components in a module via a service that is cleared whenever you route away from this module, without moving the service into a global shared model.

Thank You

Answer 1

Edited answer 2016 Dec 05 at 11:14:

The problem was a bug and was fixed in https://github.com/angular/angular/issues/11125.

So, now you can load the service at any module, not only in the app, and you will have a singleton for it's children.

Old answer - 2016 Aug 22 at 20:20:

I found a solution providing the service in the RootModule (AppModule) and not in the Submodule (CrisisCenterModule).

I do now know if it is a bug or if it is the right behaviour.

If you find any documentation about this, please, let me know or I'll open an issue in the Angular2 github repo.

Answer 2

Like m32da1 says, the Service is only used in the CrisisCenterModule. What I did lazy load my routes:

export const routes: Routes = [ 
{ path: '', redirectTo: 'login', pathMatch: 'full' }, 
{ path: 'crisis', loadChildren: 'app/crisis-center/crisisCenter.module' } 
...

and add the CrisisServices as a provider in the crisisCenter module

If you are planning to use it in other components/routes as well, you can make it an singleton: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module-for-root

Add a shared.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule }        from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HeroesModule } from './heroes/heroes.module';
import { LoginComponent } from './login.component';
import { DialogService }  from './dialog.service';
import { CrisisService }  from './crisis-center/crisis.service';
@NgModule({
    imports: [CommonModule, FormsModule, RouterModule ],
    declarations: [],
    exports: [
        CommonModule, FormsModule, RouterModule]
})
export class SharedModule {

    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [DialogService, CrisisService],
        };
    }
}

And add the SharedModule.forRoot to the imports in the app.module.ts:

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';

import { AppComponent }       from './app.component';
import { routing,
         appRoutingProviders } from './app.routing';

import { HeroesModule } from './heroes/heroes.module';

import { LoginComponent } from './login.component';

import { DialogService }  from './dialog.service';

@NgModule({
  imports: [
    BrowserModule,
    SharedModule.forRoot(),
    routing,
    HeroesModule
  ],
  declarations: [
    AppComponent,
    LoginComponent
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}