Support zoneless applications

[emzet]

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

[ArielGueta]

The directive works fine:

<ng-container *transloco="t">
  {{ t('HELLO') }}
</ng-container>

[ArielGueta]

Both calls markForCheck internally, so I don't know why the pipe doesn't work. To me, it seems like an Angular related thing.

[emzet]

@ArielGueta I would like to use pipe, not directive. Problem is related to pipe. Maybe you are right, and it is not transloco problem but Angular...

[emzet]

@ArielGueta update:
see the demo, I have updated the template with directive and it does not work either also in my app it behaves same.

[emzet]

Same behavior with ngx-translate lib, demo here: https://stackblitz.com/edit/angular-nuvqxb

[ArielGueta]

Same behavior with ngx-translate lib, demo here: https://stackblitz.com/edit/angular-nuvqxb

So it doesn't relate to Transloco.

There is some weird behavior in stackblitz. I open your blitz and when I press space in the editor it works:

[emzet]

@ArielGueta
it does not work at all and it si not weird behavior in stackblitz. It "works" only if you edit something -> automatic HMR on stackblitz -> some kind of change detection. In real life it does not work either pipe nor directive.

[itayod]

Hi @emzet currently we are not supporting applications that runs without zone. If you like you can open a pr to support zoneless applications

[emzet]

Hi @itayod, I think that it is very poor explanation. I appreciate if you can explain why this decision (and what about future?). Is this related to this library or is it issue of Angular itself? How should I open PR to support it, if some other hints how to do that are missing? I studied code of transloco pipe and also ngx pipe, but can not found out where problem can be... maybe some more proactivity from your side... I think it is essential to support Angular application without zone.js, especially in case of Angular Elements, where this zone.js should be omited, when one need to use more Angular Element applications on one website/page

[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.

[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());