title: Angular 2: Observable / Subscription not triggering
body: <p>I have done this multiple times in my App. It's simple, it should work... But this time it doesn't.</p>
  <p><strong>My issue:</strong></p>
  <p>I am calling a method in a service from a Component A, my Component B is subscribed but doesn't react nor receive anything. <strong><code>subscribe()</code> is not triggering!</strong></p>
  <p><strong>navigation-elements.service.ts</strong></p>
  <pre><code>@Injectable()
  export class NavigationElementsService {
      updateIBOsNavigation$: Observable&lt;any&gt;;
  
      private updateIBOsNavigationSubject = new Subject&lt;any&gt;();
  
      constructor() {
          this.updateIBOsNavigation$ = this.updateIBOsNavigationSubject.asObservable();
      }
  
      updateIBOsNavigation(navigationData) {
          log.d('updateIBOsNavigation', JSON.stringify(navigationData));
          this.updateIBOsNavigationSubject.next(navigationData);
      }
  }
  </code></pre>
  <p><strong><code>IboDetailsGeneral</code> component</strong></p>
  <pre><code>export class IboDetailsGeneral implements OnInit, OnDestroy {
      id: string;
      private sub: any;
  
      constructor(private route: ActivatedRoute, private iboService: IBOsService, private navigationService: NavigationElementsService) {
          this.sub = this.route.params.subscribe(params =&gt; {
              this.id = params['id'];
  
              console.log('CALLING updateIBOsNavigation FUNCTION');
              this.navigationService.updateIBOsNavigation(this.id);
          });
      }
  
      ngOnInit() {
          console.log('CALLING updateIBOsNavigation FUNCTION AGAIN');
          this.navigationService.updateIBOsNavigation('test');
      }
  
      ngOnDestroy() {
          this.sub.unsubscribe();
      }
  }
  </code></pre>
  <p>This component triggers the service's method: <code>updateIBOsNavigation</code>.</p>
  <p><strong><code>IBOsNavigationElement</code> component</strong></p>
  <pre><code>export class IBOsNavigationElement implements OnInit {
      private id: string;
  
      constructor(private navigationService: NavigationElementsService) {
          this.navigationService.updateIBOsNavigation$.subscribe((navigationData) =&gt; {
                  log.d('I received this Navigation Data:', JSON.stringify(navigationData));
                  this.id = navigationData;
              }
          );
      }
  
      ngOnInit() {
      }
  }
  </code></pre>
  <p>This component is subscribed, it should listed and receive the data...</p>
  <p>Let's sort out DI:
  Take into account that <code>IboDetailsGeneral</code> is in a lower layer on the App's structure, so <code>IboDetailsGeneral</code> is <em>child</em> of <code>IBOsNavigationElement</code>.</p>
  <p>This is why I add <code>NavigationElementsService</code> into <code>IBOsNavigationElement</code>'s module:</p>
  <p><strong><code>NavigationModule</code> is <code>IBOsNavigationElement</code>'s module</strong></p>
  <pre><code>@NgModule({
      imports: [
          // A lot of stuff
      ],
      declarations: [
          // A lot of stuff
          IBOsNavigationElement
      ],
      exports: [
          // A lot of stuff
      ],
      providers: [
          NavigationElementsService
      ]
  })
  </code></pre>
  <p><strong>Console:</strong></p>
  <blockquote>
  <p>CALLING updateIBOsNavigation FUNCTION</p>
  <p>updateIBOsNavigation  &quot;95&quot;</p>
  <p>CALLING updateIBOsNavigation FUNCTION AGAIN</p>
  <p>updateIBOsNavigation  &quot;test&quot;</p>
  </blockquote>
  <p>This console results tells me that:</p>
  <ul>
  <li>The method is being called, so no provider error. <strong>Communication with service is OK</strong>.</li>
  </ul>
  <p><strong>My tests:</strong></p>
  <ul>
  <li>I have tried calling a random method in <code>IBOsNavigationElement</code> <em>(the listener)</em>, and communication with service is good.</li>
  <li>The only place where <code>NavigationElementsService</code> is added to <code>providers</code> is in <code>NavigationModule</code>, so there is only one instance of the service right? Then, the issue explained in the following link doesn't take place: <a href="https://stackoverflow.com/questions/38033723/angular-2-observable-subscription-not-triggering">Angular 2 observable subscription not triggering</a></li>
  </ul>
  <p>I am really sorry for my <em>'wall of text'</em> but at this point I am kind of desperate.</p>
  <p>Any help is appretiated, thank you!</p>
  <p><strong>Update 1:</strong></p>
  <p>After the first answer I have tried several things...</p>
  <p><strong>Using <code>ReplaySubject</code>:</strong></p>
  <pre><code>@Injectable()
  export class NavigationElementsService {
      public updateIBOsNavigation$ = new ReplaySubject();
  
      updateIBOsNavigation(navigationData) {
          log.d('updateIBOsNavigation', JSON.stringify(navigationData));
          this.updateIBOsNavigation$.next(navigationData);
      }
  }
  </code></pre>
  <p>Result: When calling <code>updateIBOsNavigation()</code>, <code>subscribe()</code> is still not triggering.</p>
  <p><strong>Using <code>BehaviorSubject</code>:</strong></p>
  <pre><code>@Injectable()
  export class NavigationElementsService {
      updateIBOsNavigationSubject = new BehaviorSubject&lt;any&gt;('');
       updateIBOsNavigation$ = this.updateIBOsNavigationSubject.asObservable();
  
      updateIBOsNavigation(navigationData) {
          log.d('updateIBOsNavigation', JSON.stringify(navigationData));
          this.updateIBOsNavigationSubject.next(navigationData);
      }
  }
  </code></pre>
  <p>Result: It enters <code>subscribe()</code> on initialization but when I call <code>updateIBOsNavigation()</code>, <code>subscribe()</code> is still not triggering.</p>
  <p><strong>Using <code>BehaviorSubject</code> v2:</strong></p>
  <p>I tried this approach: <a href="https://stackoverflow.com/questions/36404541/behavioursubject-in-angular2-how-it-works-and-how-to-use-it">behaviourSubject in angular2 , how it works and how to use it</a></p>
  <pre><code>@Injectable()
  export class NavigationElementsService {
      public updateIBOsNavigation$: Subject&lt;string&gt; = new BehaviorSubject&lt;string&gt;(null);
  
      updateIBOsNavigation(navigationData) {
          log.d('updateIBOsNavigation', JSON.stringify(navigationData));
          this.updateIBOsNavigation$.next(navigationData);
      }
  }
  </code></pre>
  <p>Result: Same as previous application of <code>BehaviorSubject</code>.</p>
  <p><strong>Update 2:</strong></p>
  <p>More samples of desperate attempts after researching throughout the web...</p>
  <p><strong>Using <code>BehaviorSubject</code> v3:</strong></p>
  <pre><code>@Injectable()
  export class NavigationElementsService {
      updateIBOsNavigation$: Observable&lt;any&gt;;
      updateIBOsNavigationSubject = &lt;BehaviorSubject&lt;any&gt;&gt; new BehaviorSubject([]);
  
      constructor() {
          this.updateIBOsNavigation$ = this.updateIBOsNavigationSubject.asObservable();
      }
  
      updateIBOsNavigation(navigationData) {
          log.d('updateIBOsNavigation()', JSON.stringify(navigationData));
          this.updateIBOsNavigationSubject.next(navigationData);
      }
  }
  </code></pre>
  <p>Result: Same as previous <code>BehaviorSubject</code> attempts... Desperation is rising...</p>
  <p><strong>Update 3:</strong></p>
  <p>Just in case, I wanted to make sure that <code>NavigationElementsService</code> is a <em>singleton</em>:</p>
  <pre><code>export class NavigationModule {
      static forRoot() {
          return {
              ngModule: NavigationModule,
              providers: [NavigationElementsService]
          };
      }
  }
  </code></pre>
  <p>And when importing:</p>
  <pre><code>imports: [
          NavigationModule.forRoot()
         ]
  </code></pre>
  <p>Result: Same issue as always, <code>subscribe()</code> not triggering, but at least I know that there is one instance of <code>NavigationElementsService</code>.</p>