Reproduction in angular 12.1 https://github.com/sod/ng-strict-issue1 / https://github.com/sod/ng-strict-issue1/blob/master/src/app/app.component.ts

Right now as soon as you use the operator in the template, angular forces you to use it everywhere in that statement, even though, nested structures may be guaranteed to not be undefined by the types.

@JoostK any updates on this?

I think I have similar issue

stackblitz: link

export type AccessibleValue<T> =
  | { isAccessible: true; value: T }
  | {
      isAccessible: false;
      value: null;
    };

evaluates to string correctly in typescript

 if (this.testValue.accessible?.isAccessible) {
      this.stringOnlyToTest = this.testValue.accessible.value; 
    }

but in tempalte it throws

Argument of type 'string | null' is not assignable to parameter of type 'string'.
Type 'null' is not assignable to type 'string'.

<p *ngIf="testValue.accessible?.isAccessible">
{{ testValue.accessible.value | stringOnlyPipe }} <span></span> 
</p>

Perhaps this tree reshaping logic from the compiler should be duplicated in the typechecker. Or maybe perform it once - before even passing the AST to compiler and typechecker.

Indeed, the AST restructuring logic happens in the compiler’s output emitter, i.e. the transform from “expression AST” to “output AST”. The typechecker generates TypeScript AST nodes directly from “expression AST” nodes, so it hasn’t gone through that transformation.

FYI I did attempt expanding the translation in the type-checker at one point but never got to finish it; I should have a look at that again.

still an issue on angular 11, I’m bypassing it without using optional chaining, like *ngIf="foo && foo.bar.baz"