Communication between app module and lazy loaded modules in angular 4

Question

I have a layout page (component) in app module where I display a title text. I have another lazy loaded module where I have button on click of which I am changing the text value.

I provided service in app.module only and injected in layout component as well as the component of lazy loaded module. On button click, I am updating the value of societyName of the service in component of lazy loaded module.

I tried below approach:

import { Subject } from 'rxjs/Subject';
@Injectable()
export class DataSharingService {   
     private societyName = new Subject<string>();
     societyNameObservable$ = this.societyName.asObservable();
     updateSocietyName(societyName: string) {
        this.societyName.next(societyName);
    }
}

Subscription is not happening in layout page.

this.dataSharingService.societyNameObservable$.subscribe(value=>{
      console.log(value);
    })

So, far I found solution for non-lazy loaded modules. If anyone have any idea,let me know. Thanks in advance.

I want to switch the society Name on click of switch button. Switch page is part of lazy loaded module and Keerthi Gardenia text is coming from layout page which is part of app module. Currently I am achieving this by doing page reload which is not a best option.

If you have an app complex enough to have lazily loaded modules, you might consider using NGRX for inter-module-communication. With NGRX you can create so-called stores and reducers (functions to update the stores) on a global level for top-level modules or make the stores/reduces lazily loaded (on URL navigation) too for sub-modules inside a module. For more info check out https://github.com/ngrx/example-app — Phil, May 03 '18 at 16:26
But for a quick and dirty solution, maybe this answer can help you out? https://stackoverflow.com/a/42866725/4125622 — Phil, May 03 '18 at 16:27
i think you have the problem because you have 2 different service instances — Fateh Mohamed, May 03 '18 at 16:27
the scenario you have shared works fine with lazy-loaded module. check https://stackblitz.com/edit/angular-bdzkrg?file=app%2Fsib1%2Fsib1.module.ts. Can you share some working code on stackblitz ? — Shashank Vivek, May 03 '18 at 16:36
@FranklinPious Yes the layout page is loaded in memory. Layout Component has side-bar and top nav-bar of the page. Rest of the lazy loaded modules will have pages but layout remains same for all pages. It's basically a admin dashboard. — Nabin Kumar Khatiwada, May 04 '18 at 06:12
It worked now. I was providing service in both modules which should not be done since it creates new service instance. App is root module so, should have been provided there only. Thank you all. — Nabin Kumar Khatiwada, May 16 '18 at 09:01

score 1 · Accepted Answer · answered May 04 '18 at 13:51

1

Does this work for you.?

export class DataSharingService {   
     private societyName = new Subject<string>();

     updatedSocietyValue() {
       return this.societyName.asObservable();
     }

     updateSocietyName(societyName: string) {
        this.societyName.next(societyName);
    }
}

Layout page

  this.dataSharingService.updatedSocietyValue().subscribe(value=>{
      console.log(value);
    })

answered May 04 '18 at 13:51

Franklin Pious

3,670
3
26
30

1

Thanks . problem was i was providing service twice . – Nabin Kumar Khatiwada May 16 '18 at 08:59

Communication between app module and lazy loaded modules in angular 4

1 Answers1