Angular Service not acting as singleton when injected in components despite using @Injectable({providedIn: 'root' }) decorator

Question

I have a project which contains two modules (the default AppModule and the routing Module generated by angular cli when creating the project), two components that I have created and a service that I injected into the constructor of each component. I expected to have the same instance of the service (singleton each time I inject the service since it has the @Injectable({providedIn: 'root' }) decorator) but I keep getting a brand new instance of my service everytime when I navigate to each of my component. here is my code below :

app.module.html

\<router-outlet\>\</router-outlet\>

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { Test2Component } from './test2/test2.component';


@NgModule({
  declarations: [
    AppComponent,
    TestComponent,
    Test2Component
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TestComponent } from './test/test.component';
import { Test2Component } from './test2/test2.component';

const routes: Routes = [
  { path: 'test1', component: TestComponent },
  { path: 'test2', component: Test2Component }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

test.component.ts

import { Component} from '@angular/core';
import { TestService } from '../test.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent {

  constructor(private _testService: TestService) { }
}

test2.component.ts

import { Component } from '@angular/core';
import { TestService } from '../test.service';

@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css']
})
export class Test2Component {

  constructor(private _testService: TestService) { }

}

test.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class TestService {

  private date = new Date();

  constructor() {
    console.log("Inside the service ", this.date);
  }

}

Answer 1

Provide your test service in providers array in app.module.ts like this. To create singleton.
Providers:[TestService]

Answer 2

Your service is indeed Singleton by the looks of the code.

Insert this to the app.component.html, and try the links:

<nav>
  <ul>
    <li><a routerLink="child-a">Child A</a></li>
    <li><a routerLink="child-b">Child B</a></li>
  </ul>
</nav>

I suspect that you try to check the two component with writing the url in the browser navbar, so you reload the application any time you think you are rerouting. Is that the case maybe?

I have created a working example of the routing and singleton service usage here.

You can see that after several clicks, the constructor has run only once in the console:

Answer 3

Refer below link : https://www.w3resource.com/angular/angular-singleton-service.php

you need to register your service in app.module.ts as provider.

providers: [{provide: Service}]