strictTemplates and strictNullChecks doesn't work well with optional chaining in templates
See original GitHub issueπ bug report
Affected Package
The issue is caused by package @angular/compiler?Is this a regression?
?
Description
- enable Ivy
- enable
strictTemplates
- enable
strictNullChecks
- use an expression like
foo?.bar.baz
in a templatefoo
is nullable,bar
is not- template compiler shows error on
baz
:Object is possibly 'undefined'.
- note that the whole chain ends if
foo
is nullish (long short circuiting), therefore accessingbaz
is always safe - disabling
strictNullChecks
makes the compile error go away and everything functions as expected without runtime error (i.e. Angularβs optional chaining also does long short circuiting)
π¬ Minimal Reproduction
https://stackblitz.com/edit/angular-ivy-pu8dk5
π₯ Exception or Error
`Object is possibly 'undefined'.`
π Your Environment
Angular Version:
@angular/animations 9.1.11
@angular/common 9.1.11
@angular/compiler 9.1.11
@angular/core 9.1.11
@angular/forms 9.1.11
@angular/platform-browser 9.1.11
@angular/platform-browser-dynamic 9.1.11
@angular/router 9.1.11
Anything else relevant?
Issue Analytics
- State:
- Created 3 years ago
- Reactions:12
- Comments:19 (8 by maintainers)
Top Results From Across the Web
Template type checking - Angular
Disable strict null checks in Angular templates completely. When strictTemplates is enabled, it is still possible to disable certain aspects of type checking....
Read more >optional chaining in Angular Template - Stack Overflow
It seems to me that you're running in strict mode which is good, but for someone that just started with TS and Angular...
Read more >Angular compilation restrictions overview
Restrictions on the compilation of Angular view templates ... as nullable in every place where you use them (e.g. by optional chaining).
Read more >Why to and How To Use Strict Mode in Angular Applications
But first, let's have a look at strictNullChecks . In most cases, all you have to do is to use the optional chaining...
Read more >Optional chaining gotcha in Angular | Dai Codes: A Blog
The optional chaining operator behaves differently in Angular templates ... All good so far, until finally in the template of the parentΒ ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
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.