Changing shared data between root modules [duplicate]

There are several similar questions that will help you

• Angular 2, communication between 2 apps running on the same page
• How to dynamically create bootstrap modals as Angular2 components?
• Angular 2 bootstrap multi root component

The main idea is create an instance of SharedService and use it as extraProviders when bootstrapping both components.

var sharedService = new SharedService();

platformBrowserDynamic([{ provide: SharedService, useValue: sharedService }]).bootstrapModule(AppModule)
platformBrowserDynamic([{ provide: SharedService, useValue: sharedService }]).bootstrapModule(AppModule2)

Plunker Example

Maybe the best way is using one instance of platform:

var platform = platformBrowserDynamic([SharedService]);
platform.bootstrapModule(AppModule)
platform.bootstrapModule(AppModule2)

Plunker Example

There is important thing(as @Günter said)

The subscribing application needs to invoke change detection when it receives a new value from the other Angular application because this code is invoked in the zone of the sending Application.

That's why i am using cd.detectChanges() in examples above.

But i want to show one trick. We "can bootstrap module with known Zone". This way we needn't worry about the call of detectChanges. Both application will work within one Zone:

const platform = platformBrowserDynamic([SharedService]);
platform.bootstrapModule(AppModule).then((moduleRef: NgModuleRef<any>) => {
  const zone = moduleRef.injector.get(NgZone);
  (<any>platform)._bootstrapModuleWithZone(AppModule2, [], zone); // private method is bad!!!
}); 

Plunker Example

Hope it helps someway!