How to use BehaviorSubject in nx module federation?

Question

I have this module federation workspace

apps
-- host
---- src
------ app
-------- app.component.ts
-- main
---- src
------ app
-------- app.component.ts
libs
-- components
---- menu
------ src
-------- lib
---------- menu.component.ts
-- services
---- src
------ lib
-------- global.service.ts

global.service.ts

items$ = new BehaviorSubject<any[]>([]);

setMenuItems(items: any[]): void {
    this.items$.next(buttons);
}

menu.component.ts

items: any[];

ngOnInit(): void {
    this.globalService.items$.subscribe((result) => {
        this.items = result;
    });
}

host app - app.component.ts

ngOnInit(): void {
    this.globalService.setMenuItems([1, 2, 3]); // this works
}

main app - app.component.ts

ngOnInit(): void {
    this.globalService.setMenuItems([1, 2, 3]); // this not works
}

I can't use global service in my main app.
This is the command I use to run the project: nx serve host--devRemotes="main"

score 0 · Answer 1 · answered Dec 20 '22 at 08:20

0

That might be because you're not coding reactively.

Try this instead.

@Component(...)
export class MenuComponent {
  items$ = this.globalService.items$.asObservable();

  constructor(private globalService: GlobalService) {
}

<div class="menu">
  <div *ngFor="let item of items$ | async" class="menu-item">{{ item }}</div>
</div>

answered Dec 20 '22 at 08:20

MGX

2,534
2
14

That did not work – Rez Dec 20 '22 at 08:29
Then please provide a [mcve] of your issue. – MGX Dec 20 '22 at 08:30
Ok. I will create a stackblitz – Rez Dec 20 '22 at 08:33

score 0 · Answer 2 · answered Dec 20 '22 at 19:44

0

Do you use injectable decorator in service class declaration with provideIn: ‘root’?

@Injectable({
  providedIn: 'root'
})

answered Dec 20 '22 at 19:44

Evgeny Gurevich

475
3
5

Yes, I'm using this – Rez Dec 21 '22 at 06:24

How to use BehaviorSubject in nx module federation?

2 Answers2