Issue/172

[danielwiehl]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines
• Tests for the changes have been added
• Docs have been added or updated

PR Type

What kind of change does this PR introduce?

• Fix
• Feature
• Documentation
• Refactoring (changes that neither fixes a bug nor adds a feature)
• Performance (changes that improve performance)
• Test (adding missing tests, refactoring tests; no production code change)
• Chore (other changes like formatting, updating the license, removal of deprecations, etc)
• Deps (changes related to updating dependencies)
• CI (changes to our CI configuration files and scripts)
• Revert (revert of a previous commit)
• Release (publish a new release)
• Other... Please describe:

Issue

Issue Number: #172

Does this PR introduce a breaking change?

• Yes
• No

For Angular applications, we strongly recommend replacing zone-specific decorators for MessageClient and IntentClient with an ObservableDecorator. See https://scion-microfrontend-platform-developer-guide.vercel.app/#chapter:angular-integration-guide:synchronizing-rxjs-observables-with-angular-zone for an example.

It turned out that Angular zone synchronization with decorators for MessageClient and IntentClient is not sufficient and that observables should emit in the same Angular zone in which the subscription was performed. Using the new ObservableDecorator API, Angular zone synchronization can now be performed in a single place for all observables, as follows:

• Remove decorators for MessageClient and IntentClient including their registration in the bean manager.
• Provide a NgZoneObservableDecorator and register it in the bean manager before starting the platform. Note to register it as a bean, not as a decorator.

For a complete example and detailed instructions, see https://scion-microfrontend-platform-developer-guide.vercel.app/#chapter:angular-integration-guide:synchronizing-rxjs-observables-with-angular-zone.

Example of a decorator for synchronizing the Angular zone

/**
 * Mirrors the source, but ensures subscription and emission {@link NgZone} to be identical.
 */
export class NgZoneObservableDecorator implements ObservableDecorator {

  constructor(private zone: NgZone) {
  }

  public decorate$<T>(source$: Observable<T>): Observable<T> {
    return new Observable<T>(observer => {
      const insideAngular = NgZone.isInAngularZone();
      const subscription = source$
        .pipe(
          subscribeInside(fn => this.zone.runOutsideAngular(fn)),
          observeInside(fn => insideAngular ? this.zone.run(fn) : this.zone.runOutsideAngular(fn)),
        )
        .subscribe(observer);
      return () => subscription.unsubscribe();
    });
  }
}

Registration of the decorator in the bean manager

const zone: NgZone = ...;
Beans.register(ObservableDecorator, {useValue: new NgZoneObservableDecorator(zone)});