I have been facing an issue with using an app-wide service called UserService to store authenticated user details. The problem is that UserService is being instantiated per route rather than shared across routes. To address this, I decided to create a CoreModule containing TestService as a provider and imported it into the AppModule.
Here's how I set up the CoreModule in `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 { }
The TestService itself looks like this in `test.service.ts`:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class TestService {
constructor() { console.log('The testService constructor has been called');}
}
Within my `app.module.ts`, I made sure to import the CoreModule along with other necessary modules:
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 { }
Even though I injected TestService into DashboardComponent and UserProfileComponent constructors, I noticed that the TestService constructor was called twice when routing between these components. I'm struggling to figure out where I might be going wrong. Can anyone provide some guidance on how to troubleshoot this issue?
*edit
In the `dashboard.component.ts` file:
import {AfterViewInit, Component, OnInit, ViewEncapsulation} from '@angular/core';
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) {}
ngOnInit() {}
}
And in the `user-profile-component.ts` file:
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() {}
}