title: Angular Service singleton constructor called multiple times
body: <p>I am trying to use an app-wide service (UserService) that stores authenticated user details. I have set up some routes but found that UserService is instantiated per route. I want them to share the same UserService.</p>
  
  <p>I have created a CoreModule containing TestService as provider and imported it into AppModule.</p>
  
  <p>core.module.ts:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { TestService } from '../test.service';
  
  @NgModule({
    imports: [
      CommonModule
    ],
    declarations: [],
    providers: [
      TestService
    ]
  })
  export class CoreModule { }
  </code></pre>
  
  <p>test.service.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable({
    providedIn: 'root'
  })
  export class TestService {
    constructor() { console.log('testService constructor called');}
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { AdminComponent } from './layout/admin/admin.component';
  import { AppComponent } from './app.component';
  import { AppRoutingModule } from './app-routing.module';
  
  
  import { CoreModule } from './core/core.module';
  
  @NgModule({
    declarations: [
      AppComponent,
      AdminComponent,
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      FormsModule,
      CoreModule
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>app-routing.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { Routes, RouterModule } from '@angular/router';
  import { BasicLoginComponent } from './basic-login/basic-login.component';
  import { HttpClientModule } from '@angular/common/http';
  import { AdminComponent } from './layout/admin/admin.component';    
  
  const routes: Routes = [
    {
      path: '',
      component: AdminComponent,
      children: [
        {
          path: 'home',
          loadChildren: './dashboard/dashboard.module#DashboardModule'
        },
        {
          path: 'user/profile',
          loadChildren: './user-profile/user-profile.module#UserProfileModule'
        }
      ]
  
    },
  ]
  @NgModule({
    imports: [
      CommonModule,
      RouterModule.forRoot(routes),
      HttpClientModule
    ],
    exports: [
      [RouterModule]
    ],
    declarations: []
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>I have injected the TestService into DashboardComponent and UserProfileComponent constructors. However, when routing between two of these components, the TestService constructor is called twice.</p>
  
  <p>It seems so straightforward but somehow I can't get it right. Can anyone point me to the right direction to troubleshoot this?</p>
  
  <p><strong>*edit</strong></p>
  
  <p>dashboard.component.ts</p>
  
  <pre><code>import {AfterViewInit, Component, OnInit, ViewEncapsulation} from '@angular/core';
  /*import {NotificationsService} from 'angular2-notifications';*/
  
  import { UserService } from '../user.service.js';
  import { LocalStorageService } from '../../../node_modules/ngx-webstorage';
  import { TestService } from '../test.service.js';
  
  @Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.scss'],
    encapsulation: ViewEncapsulation.None
  })
  export class DashboardComponent implements OnInit, AfterViewInit {
  
  
    constructor(private userService:UserService, private localSt:LocalStorageService,
    private testService:TestService) { // private servicePNotify: NotificationsService
    }
  
  
    ngOnInit() {
  
    }
  
  }
  </code></pre>
  
  <p>user-profile-component.ts:</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {animate, style, transition, trigger} from '@angular/animations';
  import {Http} from '@angular/http';
  import { TestService } from '../test.service';
  
  @Component({
    selector: 'app-user-profile',
    templateUrl: './user-profile.component.html',
    styleUrls: [
      './user-profile.component.scss',
      '../../assets/icon/icofont/css/icofont.scss'
    ],
  
  })
  export class UserProfileComponent implements OnInit {
  
    constructor(public http: Http, private userService: UserService,
    private testService:TestService) {
    }
  
    ngOnInit() {
  
    }
  
  }
  </code></pre>