angular - Not receiving events from subscribing to observable across modules

Question

I'm using Angular 9. I have a root NgModule called AppModule which bootstraps the AppComponent that houses the core layout and frame of my app. In AppModule, I also import NotificationComponent which visually displays notifications by subscribing to an observable in NotificationService (that I also import into AppModule) and the NotificationComponent is referenced in the HTML template of the bootstrapped AppComponent.

I then lazy-load ProjectDetailModule which declares the ProjectDetailComponent that too imports the NotificationService so that it can trigger notifications. However, when I trigger notifications using the NotificationService from within the ProjectDetailComponent, the NotificationComponent doesn't update with that notification. Any ideas where I'm going wrong?

app.module.ts:

import { AppComponent } from './app.component';
import { NotificationComponent } from './_shared/notifications/notification.component';
import { NotificationService } from './_shared/notifications/notification.service';
@NgModule({
    declarations: [NotificationComponent],
    imports: [
        RouterModule.forRoot([
            {
                path: 'projects/:id',
                loadChildren: () => import('./project-detail/project-detail.module').then(m => m.ProjectDetailModule)
            }
        ])
    ],
    providers: [NotificationService],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

<div>
<header><img src="assets/logo.png" /></header>
<notification></notification>
<div>

project-detail.component.ts:

import { NotificationService } from './../_shared/notifications/notification.service'; 
export class ProjectDetailComponent implements OnInit {
    constructor(private notificationService: NotificationService) {}

    ngOnInit(): void {
        this.notificationService.sendNotification('Project saved');
    }
}

notification.service.ts:

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class NotificationService {
    private subject = new Subject<any>();

    sendNotification(message: string, type: string = null): void {
        this.subject.next({ text: message, type: type });
    }
    
    getNotification(): Observable<any> {
        return this.subject.asObservable();
    }
}

notification.component.ts:

import { Component, OnDestroy } from '@angular/core';
import { NotificationService } from './notification.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.css']
})

export class NotificationComponent implements OnDestroy {
    public type: string = '';
    public message: any;
    public show: boolean = false;
    public sub: Subscription;

    constructor(
        private notificationService: NotificationService
    ) {
        this.sub = this.notificationService
                        .getNotification()
                        .subscribe(message => {
                            this.message = message;
                            this.type = message.type;
                            this.show = true;
                        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

question from:https://stackoverflow.com/questions/66060312/not-receiving-events-from-subscribing-to-observable-across-modules

Answer 1

Waitting for answers