Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ngIf with async pipe causes new template type checking errors when template variables are used in rc.5

See original GitHub issue

🐞 bug report

Affected Package

@angular/common

Is this a regression?

Yes, it wasn’t an issue in Angular 9.0.0-rc.4.

Description

Template

<ng-container *ngIf="componentViewer.componentDocItem | async; let docItem">
  <span class="cdk-visually-hidden" tabindex="-1" #initialFocusTarget>
    Examples for {{docItem.id}}
  </span>
  <example-viewer *ngFor="let example of docItem.examples"
                  [example]="example"></example-viewer>
</ng-container>

There are errors for

src/app/pages/component-viewer/component-examples.html:3:20 - error TS2531: Object is possibly 'null'.

3     Examples for {{docItem.id}}
                     ~~~~~~~~~~

  src/app/pages/component-viewer/component-viewer.ts:132:16
    132   templateUrl: './component-examples.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ComponentExamples.
src/app/pages/component-viewer/component-examples.html:5:34 - error TS2531: Object is possibly 'null'.

5   <example-viewer *ngFor="let example of docItem.examples" [example]="example"></example-viewer>
                                   ~~~~~~~~~~~~~~~~

  src/app/pages/component-viewer/component-viewer.ts:132:16
    132   templateUrl: './component-examples.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ComponentExamples.

Solutions?

It’s complaining about docItem.id and docItem.examples where docItem might be null in these cases. But it seems to be ignoring the fact that this template won’t be rendered if docItem is null. It appears that the type narrowing is not working properly in this case?

The tests in PR https://github.com/angular/angular/pull/33997 don’t cover the use case where the Async Pipe is used with let. But <ng-container *ngIf="componentViewer.componentDocItem | async as docItem"> also seems to trigger this error.

How do you recommend developers solve this very common use case?

Answer so far is that this is a bug that needs to be resolved for v9.

🔬 Minimal Reproduction

Here is the workaround that I had to apply to get our repo building again after the breaking change in Angular 9.0.0-rc.5.

🔥 Exception or Error

src/app/pages/component-viewer/component-examples.html:3:20 - error TS2531: Object is possibly 'null'.

3     Examples for {{docItem.id}}
                     ~~~~~~~~~~

  src/app/pages/component-viewer/component-viewer.ts:132:16
    132   templateUrl: './component-examples.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ComponentExamples.
src/app/pages/component-viewer/component-examples.html:5:34 - error TS2531: Object is possibly 'null'.

5   <example-viewer *ngFor="let example of docItem.examples" [example]="example"></example-viewer>
                                   ~~~~~~~~~~~~~~~~

  src/app/pages/component-viewer/component-viewer.ts:132:16
    132   templateUrl: './component-examples.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ComponentExamples.

🌍 Your Environment

Angular Version:


Angular CLI: 9.0.0-rc.6
Node: 12.13.0
OS: darwin x64

Angular: 9.0.0-rc.7
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.0-rc.6
@angular-devkit/build-angular      0.900.0-rc.6
@angular-devkit/build-optimizer    0.900.0-rc.6
@angular-devkit/build-webpack      0.900.0-rc.6
@angular-devkit/core               9.0.0-rc.6
@angular-devkit/schematics         9.0.0-rc.6
@angular/cdk                       9.0.0-rc.5
@angular/cdk-experimental          9.0.0-rc.5
@angular/cli                       9.0.0-rc.6
@angular/components-examples       9.0.0-rc.5-sha-8796d7cc6
@angular/google-maps               9.0.0-rc.5
@angular/material                  9.0.0-rc.5
@angular/material-experimental     9.0.0-rc.5
@angular/material-moment-adapter   9.0.0-rc.5
@angular/youtube-player            9.0.0-rc.5
@ngtools/webpack                   9.0.0-rc.6
@schematics/angular                9.0.0-rc.6
@schematics/update                 0.900.0-rc.6
rxjs                               6.5.3
typescript                         3.6.4
webpack                            4.41.2

Anything else relevant?

@JoostK has been investigating this and has posted some comments about this here