question-mark
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.

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 template
    • foo 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 accessing baz 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:open
  • Created 3 years ago
  • Reactions:12
  • Comments:19 (8 by maintainers)

github_iconTop GitHub Comments

7reactions
sodcommented, Jul 1, 2021

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.

1reaction
JoostKcommented, Jan 31, 2022

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found