I am new to angular and I am trying to pass data from one ponent(HomeComponent) to another ponent(ProfileComponent) after navigation.

I created a shared service(DataService). I injected the service in both the HomeComponent and ProfileComponent but when I set the value of the message property in HomeComponent and try to retrieve it in the ProfileComponent the value is undefined because the DataService is not the same instance.

The DataService was registered in the AppModule in the providers array so it should be a shared service and always the same instance right?

Thanks in advance

DataService.ts

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

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

  message:string;

  constructor() { }
}

I am new to angular and I am trying to pass data from one ponent(HomeComponent) to another ponent(ProfileComponent) after navigation.

I created a shared service(DataService). I injected the service in both the HomeComponent and ProfileComponent but when I set the value of the message property in HomeComponent and try to retrieve it in the ProfileComponent the value is undefined because the DataService is not the same instance.

The DataService was registered in the AppModule in the providers array so it should be a shared service and always the same instance right?

Thanks in advance

DataService.ts

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

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

  message:string;

  constructor() { }
}

HomeComponent.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../services/data/data.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.ponent.html',
  styleUrls: ['./home.ponent.css']
})
export class HomeComponent implements OnInit {

  constructor(private data:DataService) { }

  ngOnInit() {
    this.data.message = "hello world";
  }

}

ProfileComponent.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../services/data/data.service';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.ponent.html',
  styleUrls: ['./profile.ponent.css']
})
export class ProfileComponent implements OnInit {

  private message : string;//undefined

  constructor(private data:DataService) { }

  ngOnInit() {
    this.message = this.data.message;
  }

}

AppModule.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.ponent';
import { DataService } from './services/data/data.service';
import { HomeComponent } from './home/home.ponent';
import { ProfileComponent } from './profile/profile.ponent';

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

• javascript
• angular
• angular7

• Something for you to look at if you want to do this properly. – R. Richards Commented Dec 1, 2018 at 14:12
• @R.Richards thank you for the article. The difference is the article is about passing data when there is a parent-child relationship. In my case there is no parent-child relationship between HomeComponent and ProfileComponent. I navigate from HomeComponent to ProfileComponent. – galiciath Commented Dec 1, 2018 at 14:20
• You should either use the "providedIn" property on the service's @Injectable decorator or name the service in the AppModule's "providers" section, but not both. – GreyBeardedGeek Commented Dec 1, 2018 at 14:58

2 Answers 2

I know it's a 2 year question, but Google puts it at the top of search results

Now, Angular docs are clearer about this (or just we can find out easier), it's called "Singleton Services" The section that explains this "bug" is The ForRoot Pattern and it says:

"If a module defines both providers and declarations (ponents, directives, pipes), then loading the module in multiple feature modules would duplicate the registration of the service. This could result in multiple service instances and the service would no longer behave as a singleton."

To sum up, if you define this in your services (DataService.ts) the providedIn: root as follows

@Injectable({ providedIn: 'root' })

you need to avoid define the service as a provider on your ponents or modules.

AppModule.ts

...
imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [DataService], // This line is the problem
  bootstrap: [AppComponent]
....

Hope that helps to somebody and if need more documentation refer to Singleton Services' link

Each time you inject the service to your ponent, new instance is generated. However in this case i would remend you to use BehaviorSubject as follows,

@Injectable()
export class SharedService {
  private messageSource = new BehaviorSubject<string>("default message");
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
}

STACKBLITZ DEMO