15

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.

I have created a CoreModule containing TestService as provider and imported it into AppModule.

core.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestService } from '../test.service';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [],
  providers: [
    TestService
  ]
})
export class CoreModule { }

test.service.ts:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TestService {
  constructor() { console.log('testService constructor called');}
}

app.module.ts

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 { }

app-routing.module.ts

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 { }

I have injected the TestService into DashboardComponent and UserProfileComponent constructors. However, when routing between two of these components, the TestService constructor is called twice.

It seems so straightforward but somehow I can't get it right. Can anyone point me to the right direction to troubleshoot this?

*edit

dashboard.component.ts

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() {

  }

}

user-profile-component.ts:

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() {

  }

}
Stefan Falk
  • 18,764
  • 34
  • 144
  • 286
daisura99
  • 810
  • 1
  • 10
  • 16

2 Answers2

28

As you have declared the TestService as -

@Injectable({
  providedIn: 'root'
})

Which means you are adding to AppRoot module.

No need to add explicitly in the CoreModule, so remove from providers of CoreModule. Remove following -

providers: [
    TestService
  ]

As you are adding the TestSevice in CoreModule which is already added in RootModule that's the reason it constructor getting called multiple times.

So use either of one from above.

eduPeeth
  • 1,620
  • 11
  • 19
  • 1
    Just some additional reference for the OP. What @eduPeeth is talking about is referred to as **Provider Scope** and there is a nice clear example discussing it in the Official Angular Docs: here on [Provider Scope](https://angular.io/guide/providers#provider-scope) – Narm Jul 24 '18 at 16:01
  • 1
    @eduPeeth hi, I have removed TestService from CoreModule providers but still the same issue. This is the console output: https://imgur.com/a/s7JuLlU. The constructor seems to be called from once from .ts and once from .js. What does it mean? – daisura99 Jul 24 '18 at 16:05
  • @daisura99 can you please your component code where you are using this service. – eduPeeth Jul 24 '18 at 16:08
  • @eduPeeth please see edit, i have removed third-party codes for brevity – daisura99 Jul 24 '18 at 16:20
  • 1
    @eduPeeth i think I have found the problem. In my Dashboard component, i have this line `import { TestService } from '../test.service.js';` ... my mistake. Thank you so much for your help and sorry for wasting your time! – daisura99 Jul 24 '18 at 16:26
  • 4
    I just had to comment...I looked ALL OVER the internet for a solution as to why I was having both a ts and js file being called and the singleton service not remaining in my code. After reading @eduPeeth 's post, searched my code and found a reference to a .js file. So many angry hours spent....anyway thanks for the clue! – Ryan C Nov 30 '18 at 02:31
0

@Injectable({ providedIn: 'root' })

  • The providedIn with root option means, the service is available throughout the application as singleton service.
  • It doesn't complain any error like No provider for xxxservice bcz of providedIn if you didn't added to providers list of any module.
  • If you do adding to the list will leads to creating a new instance of service, which will give you wrong results than expected.

NOTE : Please make sure to use the concept for better results.