Support zoneless applications

I’m submitting a…

[X] Bug report

Current behavior

When used within Angular Element application without zone.js, translation pipe does not work, translations keys are not translated nor visible.

What i tried already:

• run ChangeDetectorRef.markForCheck() or ChangeDetectorRef.detectChanges() in various app lifecycles hooks ngOnInit, ngAfterViewInit, ngOnChanges
• run ApplicationRef.tick() in various app lifecycles hooks ngOnInit, ngAfterViewInit, ngOnChanges
• change ChangeDetectionStrategy to OnPush

but nothing helps…

Expected behavior

To work transloco as expected i.e. translate keys into texts.

Minimal reproduction of the problem with instructions

1. scaffold new Angular Elements app
2. import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js' in src\polyfills.ts
3. import 'document-register-element' in src\polyfills.ts
4. remove zone.js from src\polyfills.ts
5. add { ngZone: 'noop' } in src\main.ts

and here is a demo https://stackblitz.com/edit/angular-xb7xmc

What is the motivation / use case for changing the behavior?

To work transloco translations in Angular Elements (Web Components) applications without zone.js.

Environment

Angular version: 9.1.3

Browser:
- [X] Chrome (desktop) version 81.0.4044.129 (Official Build) (64-bit)

Others:
- @angular/elements: 9.1.3
- document-register-element: 1.14.3
- @webcomponents/webcomponentsjs: 2.4.3

[k3nsei]

@emzet, @cgatian, @itayod here is a working example https://stackblitz.com/edit/angular-hbppzv?file=src/app/app.module.ts

All the magic is here. This solution was tested on very big application. That app is configured to be zoneless and all is working as expected. The trick is to delay a bit change detection process to prevent races.

this.translocoService
  .selectTranslation()
  .pipe(
    delay(0, animationFrameScheduler),
    takeUntil(this.destroyed$)
  ).subscribe(() => this.applicationRef.tick());

[cgatian]

Oh wow, I know that @ngrx/component is going to enable a lot more apps to opportunity to drop zone. And the lack of Angular Elements without zone. That hurts.