fullTemplateTypeCheck doesn't seem to work with async pipe and ngIf

[pgrm]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

• given aot compiling with optimization: true and buildOptimizer: true
• given fullTemplateTypeCheck set to true in both tsconfig.json and tsconfig.app.json
• given two properties

  public readonly test = {
    a: 123,
    b: 'asdf',
    c: {
      d: 123,
      e: false
    }
  };

  public test$ = of({
    a: 123,
    b: 'asdf',
    c: {
      d: 123,
      e: false
    }
  });

• given following template (check FAILED means, that an error should have been flagged, but wasn't):

<div>
  {{ test.a }}
  {{ test.q }} <!-- checked correctly -->
  {{ test.a.w }} <!-- checked correctly -->
</div>

<div *ngIf="test$ | async as test">
  {{ test.a }}
  {{ test.q }} <!-- check FAILED -->
  {{ test.a.w }} <!-- check FAILED -->
</div>

<div>
  {{ (test$ | async)?.a }}
  {{ (test$ | async)?.q }} <!-- compiler check FAILED, VS Code Angular Language Service extension worked -->
  {{ (test$ | async)?.a.w }} <!-- compiler check FAILED, VS Code Angular Language Service extension worked -->
</div>

<div>
  {{ (test$ | async).a }}
  {{ (test$ | async).q }} <!-- checked correctly (compiler added Object is possibly 'null') -->
  {{ (test$ | async).a.w }} <!-- checked correctly (compiler added Object is possibly 'null') -->
</div>

Expected behavior

it would be great if it would work everywhere the same as in

<div>
  {{ test.a }}
  {{ test.q }} <!-- checked correctly -->
  {{ test.a.w }} <!-- checked correctly -->
</div>

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

Maybe we are building our angular application wrongly, but it's full of code similar to

<div *ngIf="test$ | async as test">
  {{ test.a }}
  {{ test.q }} <!-- check FAILED -->
  {{ test.a.w }} <!-- check FAILED -->
</div>

because we are loading most of the data from ngrx store. So that way, we're completely loosing the benefits of fullTemplateTypeCheck

Environment

$ ng --version

Angular CLI: 6.0.8
Node: 8.9.1
OS: win32 x64
Angular: 6.0.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.2.1
@angular/cli                      6.0.8
@angular/material                 6.2.1
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3
 
For Tooling issues:
- Node version: 8.9.1
- Platform:  Windows, Linux, Mac

[pauldraper]

fixed by Ivy

Yay!

But freq1: low? Is async pipe not common?

And severity1: confusing? What exactly is the workaround here to this "merely confusing" setup?

[Ploppy3]

@mhevery Will this be really fixed by Ivy?

[alxhub]

This is indeed fixed in Ivy (under the strictTemplates flag).

[thw0rted]

Are you sure it's fixed? c.f. #28164 and #34572 . (ETA: might be "fixed" but not in production yet, since #35125 isn't merged.)

[beradrian]

In which version is this fixed?

[JoostK]

@beradrian Since 9.0.5 with Ivy enabled this should be working correctly, at least in the compiler. The language service might behave slightly differently, though, there's still effort being put into unifying the compiler and the language service's type checking.