dependency injection - Angular 2 singleton service not acting as singleton -

so i've got service called targetservice im injecting various other components. targetservice has property called targets collection of target objects.

my problem want collection persist after routing view. routes working fine, route changes, service loses content of variables, essentially, re-initializing service. understanding these injected services singletons can passed around?

in following example, on targetindex click button populates targets[] object on service (this.targetservice.targets = ts;). works fine, route targetshow page, , index , targets[] property empty, when want contain i've populated.

what missing here?

app.module

const routes: routes = [   { path: '', redirectto: 'targets', pathmatch: 'full'},   { path: 'targets', component: targetindexcomponent },   { path: 'targets/:id', component: targetshowcomponent } ]  @ngmodule({   declarations: [     appcomponent,     targetcomponent,     targetindexcomponent,     targetshowcomponent   ],   imports: [     browsermodule,     formsmodule,     reactiveformsmodule,     httpmodule,     routermodule.forroot(routes)   ],   providers: [targetservice],   bootstrap: [appcomponent] }) export class appmodule { } 

targetservice

@injectable() export class targetservice {   public targets: target[];    constructor(private http: http) {}    gettargets(hostname: string): observable<target[]> {     return this.http.request(`url`).map(this.extractdata);   }    private extractdata(res: response) {     let body = res.json();     return body || [];   }  } 

targetindex

@component({   selector: 'app-targets',   templateurl: './target-index.component.html',   styleurls: ['./target-index.component.css'],   providers: [targetservice] }) export class targetindexcomponent implements oninit {   loading = false;    constructor(private http: http, private targetservice: targetservice) {}    loadtargets(hostname: htmlinputelement) {     this.loading = true;     this.targetservice.gettargets(hostname.value)     .subscribe((ts: target[]) => {       this.targetservice.targets = ts;       this.loading = false;     })   }    ngoninit() {   }  } 

targetshow

@component({   selector: 'app-target-show',   templateurl: './target-show.component.html',   styleurls: ['./target-show.component.css'],   providers: [targetservice] }) export class targetshowcomponent implements oninit {   id: string    constructor(private route: activatedroute, private targetservice: targetservice) {     route.params.subscribe(params => { this.id = params['id']; })   }    ngoninit() {   }  } 

try remove targetservice components providers, cause added in module providers. when add service components providers, di creates new instances of it.

here quote https://angular.io/docs/ts/latest/guide/dependency-injection.html :

when use ngmodule , when application component? on 1 hand, provider in ngmodule registered in root injector. means every provider registered within ngmodule accessible in entire application.

on other hand, provider registered in application component available on component , children.