Using ?. in template does not narrow type #47077
Description
Which @angular/* package(s) are the source of the bug?
compiler, core, language-service
Is this a regression?
No
Description
with strict mode on for TypeScript
"compilerOptions": {
"strict": true,
...
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 the template, 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>
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/angular-ivy-gpknqn?file=src/app/app.component.ts
Please provide the exception or error you saw
Argument of type 'string | null' is not assignable to parameter of type 'string'.
Type 'null' is not assignable to type 'string'.
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 14.1.1
Node: 14.16.0
Package Manager: npm 6.14.11
OS: win32 x64
Angular: 14.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1401.1
@angular-devkit/build-angular 14.1.1
@angular-devkit/core 14.1.1
@angular-devkit/schematics 14.1.1
@schematics/angular 14.1.1
rxjs 7.5.6
typescript 4.6.4
Anything else?
I'm pretty sure there are actually more problems with regards to ?. operator in templates and will try to provide as many as I am able to find while fixing the project I work on currently