RxJS .next() failing silently in Angular 2 App

Question

I'm trying to write a basic angular 2 app, which uses the new version of RxJS -> "rxjs": "5.0.0-beta.6".

I have followed the instructions from the cookbook, trying to make a notifications service, which any part of my app could call to show a message.

The issue I'm having is that when I call .next() to add the next notification, this is not picked up by the subscription. The this.displayMessage(notification); line doesn't run after a call to newNotification. I added the BehaviourSubject type to my code (as opposed to the Subject used in the tutorial) and found the initial value was picked up by the subscription - the this.displayMessage(notification); was called successfully on initialization. This makes me think it is something to do with how/where I am calling .next() in the NotificationService class.

Here are the relevant classes:

NotificationService:

import { Injectable } from '@angular/core';
import { BehaviorSubject }    from 'rxjs/BehaviorSubject';
import { Notification } from '../notification/notification';

@Injectable()
export class NotificationService {
  // Observable string sources
  private notificationSource = new BehaviorSubject<Notification>(new Notification({message:"test", priority:-1}));
  notifications$ = this.notificationSource.asObservable();

  newNotification(message: string, priority: number) {
    this.notificationSource.next(new Notification({ message, priority }));
  }

}

MessageComponent:

import { Component, OnDestroy, OnInit } from '@angular/core';

import { Notification } from '../notification/notification';
import { NotificationService } from '../notification.service/notification.service';
import {MdIcon, MdIconRegistry} from '@angular2-material/icon';
import { Subscription }   from 'rxjs/Subscription';

@Component({
  selector: 'message-container',
  styleUrls: ['./app/message/message.component.css'],
  templateUrl: './app/message/message.component.html',
  directives: [MdIcon],
  providers: [NotificationService, MdIconRegistry]

})
export class MessageComponent implements OnDestroy, OnInit {
  notification: Notification;
  subscription: Subscription;
  constructor(
    private notificationService: NotificationService) {
    this.notificationService = notificationService;
  }
  ngOnInit() {
    this.subscription = this.notificationService.notifications$.subscribe(
      notification => {
        this.displayMessage(notification);
      }, err => console.log(err), () => console.log("completed: "));
  }

  displayMessage(notification: Notification) {
    this.notification = notification;
    window.setTimeout(() => { this.notification = null }, 3000);
  }
  ngOnDestroy() {
    // prevent memory leak when component destroyed
    this.subscription.unsubscribe();
  }
}

If anyone has any ideas about other things to try that would be great. Many thanks

Edit: full repo here: https://github.com/sandwichsudo/sentry-material/tree/notifications/src/app

Answer 1

GitHub doesn't find NotificationService in your repository.

I assume that you are providing NotificationService more than once and therefore different instances are created with the result that you are subscribing to one instance and sending on another instance.

Ensure you have NotificationService either only in bootstrap(AppComponent, [NotificationService, ...]) or only in providers: [NotificationService] in your AppComponent. Remove it from providers: [...] from all other components and directives.