Changing shared data between root modules

Question

I have two modules:

1st:

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,

        SharedModule.forRoot()
    ],
    declarations: [
        FirstComponent
    ],
    bootstrap: [ FirstComponent ]
})

export class AppModule { }

2nd:

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,

        SharedModule.forRoot()
    ],
    declarations: [
        ScndComponent
    ],
    bootstrap: [ ScndComponent ]
})

export class AppModule { }

and shared module with static .forRoot()

@NgModule( {} )
export class SharedModule {
    static forRoot() {
        return {
            ngModule    : SharedModule,
            providers   : [DumyService]
        }
    }
}

My DumyServise has some prop 'paramd' and I want to watch changes through modules

@Injectable()
export class DumyService {
    paramd : string;
}

In both components of modules (1st and 2nd) I have

private ds: DumyService

in constructors.

Then, let's say I have some onclick method in some component of first module component, that changes

clickToChangeParam() {
        this.ds.paramd = 'new value';
}

And I want to have this changes in both modules. How can I handle that?

Answer 1

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!