pub/sub in angular between lazy loaded modules

Question

I have defined a search service as follows.

import { Subject } from "rxjs/Subject";

export class SearchTextEmitter extends Subject<string>{
    constructor() {
        super();
    }
    emit(value) { super.next(value); }
}

export class SearchTextService {
   searchText = new SearchTextEmitter();
}

I am publishing with emit and subscribing in a child component that is a lazy loaded child of the parent.

If the child component is declared, and included as a module, the search text is correctly propogated downwards.

export const routes: Routes = [
    {
        path: "",
        redirectTo: "dashboard",
        pathMatch: "full",
    },
    {
        path: "",
        component: FullLayoutComponent,
        data: {
            title: "Home"
        },
        children: [
            {
                path: "dashboard",
                component: ClearingDashboardComponent
...
}

When the child module is lazy loaded as follows...

// instead of                     
// component: ClearingDashboardComponent

loadChildren: () => new Promise(resolve => {
    (require as any).ensure([],
        require => {
            resolve(require("./dashboard/dashboard.module").DashboardModule);
        },
        "dashboard");
})

The events are no longer propogated down.
I suspect that a different service instance is actually being used.

How do I share the pub/sub downwards to the lazy loaded subsidiaries?

When you have lazy loaded children you might fall in the pitfall of having a different instance. If you import the service at a higher level, let’s say at the app.module level, for sure you’ll have it as a singleton and your problem will be solved :) — Hugo Noro
Is there any way to lazy load, and have a single instance? I don't want to resort to using jquery events... — Jim
Yes of course. As I said in my previous comment. From the moment you import the service outside of the component ( for instance import it on the app.module level ) it will for sure be a singleton. As long as you’re not importing it on a shared component that can have lazy loading you should be fine — Hugo Noro
do you want to post that as the answer, I dont' mind editing it... you're right, if the search service is declared in a shared module instead of provided in app.module it might not be a singleton... — Jim

Hugo Noro Hugo Noro · Accepted Answer · 2017-12-07T12:26:55

The problem you are facing here is because you are most likely importing the service on a shared component that is being lazy loaded. The problem is that it will create a new instance of the service and you’ll have unexpected behaviour with the events. You should import the service at a higher level, for instance at the app.module level. This way the service will for sure be a singleton and everything will work as expected :)

pub/sub in angular between lazy loaded modules

1 Answers