feat(compiler): Add extended diagnostic to warn when missing let on n… #46683

jessicajaniuk · 2022-07-02T00:10:14Z

…gForOf

In the case that a user accidentally forgot the let keyword, they dont get a very clear indicator of there being a problem.
They get an issue in the template iteration at runtime. This diagnostic will warn the user when the let keyword is missing.

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

Bugfix
Feature
Code style update (formatting, local variables)
Refactoring (no functional changes, no api changes)
Build related changes
CI related changes
Documentation content changes
angular.io application / infrastructure changes
Other... Please describe: Adding an extended template diagnostic

What is the current behavior?

The user gets no warning about missing the let keyword in ngFor and instead gets an unhelpful error at runtime.

Issue Number: resolves #14641

What is the new behavior?

The template diagnostic will warn the user ahead of time.

Does this PR introduce a breaking change?

Yes
No

Other information

packages/compiler-cli/src/ngtsc/typecheck/extended/checks/missing_ngforof_let/index.ts

...cli/src/ngtsc/typecheck/extended/test/checks/missing_ngforof_let/missing_ngforof_let_spec.ts

…gForOf In the case that a user accidentally forgot the let keyword, they dont get a very clear indicator of there being a problem. They get an issue in the template iteration at runtime. This diagnostic will warn the user when the let keyword is missing.

atscott

reviewed-for: public-api

alxhub

Reviewed-for: public-api

alxhub · 2022-07-07T20:04:35Z

This PR was merged into the repository by commit 33ce388.

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/animations](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fanimations/14.0.6/14.1.0) | | [@angular/common](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fcommon/14.0.6/14.1.0) | | [@angular/compiler](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fcompiler/14.0.6/14.1.0) | | [@angular/compiler-cli](https://github.com/angular/angular) | devDependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fcompiler-cli/14.0.6/14.1.0) | | [@angular/core](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fcore/14.0.6/14.1.0) | | [@angular/forms](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fforms/14.0.6/14.1.0) | | [@angular/platform-browser](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser/14.0.6/14.1.0) | | [@angular/platform-browser-dynamic](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser-dynamic/14.0.6/14.1.0) | --- ### Release Notes <details> <summary>angular/angular</summary> ### [`v14.1.0`](https://github.com/angular/angular/blob/HEAD/CHANGELOG.md#1410-2022-07-20) [Compare Source](angular/angular@14.0.7...14.1.0) #### Deprecations ##### core - The `createNgModuleRef` is deprecated in favor of newly added `createNgModule` one. - The bit field signature of `inject()` has been deprecated, in favor of the new options object. Correspondingly, `InjectFlags` is deprecated as well. ##### animations | Commit | Type | Description | | -- | -- | -- | | [55308f2df5](angular/angular@55308f2) | feat | add `provideAnimations()` and `provideNoopAnimations()` functions ([#46793](angular/angular#46793)) | ##### common | Commit | Type | Description | | -- | -- | -- | | [4a2e7335b1](angular/angular@4a2e733) | feat | make the `CommonModule` pipes standalone ([#46401](angular/angular#46401)) | | [a7597dd080](angular/angular@a7597dd) | feat | make the CommonModule directives standalone ([#46469](angular/angular#46469)) | ##### compiler | Commit | Type | Description | | -- | -- | -- | | [33ce3883a5](angular/angular@33ce388) | feat | Add extended diagnostic to warn when missing let on ngForOf ([#46683](angular/angular#46683)) | | [6f11a58040](angular/angular@6f11a58) | feat | Add extended diagnostic to warn when text attributes are intended to be bindings ([#46161](angular/angular#46161)) | | [9e836c232f](angular/angular@9e836c2) | feat | warn when style suffixes are used with attribute bindings ([#46651](angular/angular#46651)) | ##### compiler-cli | Commit | Type | Description | | -- | -- | -- | | [93c65e7b14](angular/angular@93c65e7) | feat | add extended diagnostic for non-nullable optional chains ([#46686](angular/angular#46686)) | | [131d029da1](angular/angular@131d029) | feat | detect missing control flow directive imports in standalone components ([#46146](angular/angular#46146)) | | [6b8e60c06a](angular/angular@6b8e60c) | fix | improve the missingControlFlowDirective message ([#46846](angular/angular#46846)) | ##### core | Commit | Type | Description | | -- | -- | -- | | [e8e8e5f171](angular/angular@e8e8e5f) | feat | add `createComponent` function | | [b5153814af](angular/angular@b515381) | feat | add `reflectComponentType` function | | [96c6139c9a](angular/angular@96c6139) | feat | add ability to set inputs on ComponentRef ([#46641](angular/angular#46641)) | | [a6d5fe202c](angular/angular@a6d5fe2) | feat | alias `createNgModuleRef` as `createNgModule` ([#46789](angular/angular#46789)) | | [71e606d3c3](angular/angular@71e606d) | feat | expose EnvironmentInjector on ApplicationRef ([#46665](angular/angular#46665)) | | [19e6d9ccd3](angular/angular@19e6d9c) | feat | import AsyncStackTaggingZone if available ([#46693](angular/angular#46693)) | | [a7a14df5f8](angular/angular@a7a14df) | feat | introduce `EnvironmentInjector.runInContext` API ([#46653](angular/angular#46653)) | | [fa52b6e906](angular/angular@fa52b6e) | feat | options object to supersede bit flags for `inject()` ([#46649](angular/angular#46649)) | | [af20112222](angular/angular@af20112) | feat | support the descendants option for ContentChild queries ([#46638](angular/angular#46638)) | | [945a3ad359](angular/angular@945a3ad) | fix | Fix `runInContext` for `NgModuleRef` injector ([#46877](angular/angular#46877)) | | [bb7c80477b](angular/angular@bb7c804) | fix | make parent injector argument required in `createEnvironmentInjector` ([#46397](angular/angular#46397)) | ##### http | Commit | Type | Description | | -- | -- | -- | | [82acbf919b](angular/angular@82acbf9) | feat | improve error message for nullish header ([#46059](angular/angular#46059)) | ##### router | Commit | Type | Description | | -- | -- | -- | | [53ca936366](angular/angular@53ca936) | feat | Add ability to create `UrlTree` from any `ActivatedRouteSnapshot` ([#45877](angular/angular#45877)) | | [de058bba99](angular/angular@de058bb) | feat | Add CanMatch guard to control whether a Route should match ([#46021](angular/angular#46021)) | | [6c1357dd7d](angular/angular@6c1357d) | feat | Add stable cancelation code to `NavigationCancel` event ([#46675](angular/angular#46675)) | | [a4ce273e50](angular/angular@a4ce273) | feat | Add the target `RouterStateSnapshot` to `NavigationError` ([#46731](angular/angular#46731)) | | [abe3759e24](angular/angular@abe3759) | fix | allow to return `UrlTree` from `CanMatchFn` ([#46455](angular/angular#46455)) | | [e8c7dd10e9](angular/angular@e8c7dd1) | fix | Ensure `APP_INITIALIZER` of `enabledBlocking` option completes ([#46026](angular/angular#46026)) | | [ce20ed067f](angular/angular@ce20ed0) | fix | Ensure Route injector is created before running CanMatch guards ([#46394](angular/angular#46394)) | | [6a7b818d94](angular/angular@6a7b818) | fix | Ensure target `RouterStateSnapshot` is defined in `NavigationError` ([#46842](angular/angular#46842)) | | [f94c6f433d](angular/angular@f94c6f4) | fix | Expose CanMatchFn as public API ([#46394](angular/angular#46394)) | | [e8ae0fe3e9](angular/angular@e8ae0fe) | fix | Fix cancellation code for canLoad rejections ([#46752](angular/angular#46752)) | ##### upgrade | Commit | Type | Description | | -- | -- | -- | | [e9cb0454dc](angular/angular@e9cb045) | feat | more closely align `UpgradeModule#bootstrap()` with `angular.bootstrap()` ([#46214](angular/angular#46214)) | #### Special Thanks AleksanderBodurri, Alex Rickabaugh, Andrew Kushnir, Andrew Scott, Cédric Exbrayat, Dmitrij Kuba, Dylan Hunn, George Kalpakas, Jessica Janiuk, JiaLiPassion, Joey Perrott, John Vandenberg, JoostK, Keith Li, Or'el Ben-Ya'ir, Paul Gschwendtner, Pawel Kozlowski, SyedAhm3r, arturovt, mariu, markostanimirovic and mgechev  ### [`v14.0.7`](https://github.com/angular/angular/blob/HEAD/CHANGELOG.md#1407-2022-07-20) [Compare Source](angular/angular@14.0.6...14.0.7) ##### animations | Commit | Type | Description | | -- | -- | -- | | [5bdbb6285b](angular/angular@5bdbb62) | fix | make sure falsy values are added to \_globalTimelineStyles ([#46863](angular/angular#46863)) | ##### compiler | Commit | Type | Description | | -- | -- | -- | | [41253f9c46](angular/angular@41253f9) | fix | inputs/outputs incorrectly parsed in jit mode ([#46813](angular/angular#46813)) | ##### core | Commit | Type | Description | | -- | -- | -- | | [4e77c7fbf3](angular/angular@4e77c7f) | fix | do not invoke jasmine `done` callback multiple times with `waitForAsync` | #### Special Thanks Andrew Kushnir, Andrew Scott, Bob Watson, Cédric Exbrayat, Doug Parker, George Kalpakas, Jessica Janiuk, Kristiyan Kostadinov, Paul Gschwendtner, acvi, dario-piotrowicz, jnizet and piyush132000  </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, click this checkbox. --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1472 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

angular-automatic-lock-bot · 2022-08-07T16:06:12Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

jessicajaniuk force-pushed the ngfor-diagnostic branch 2 times, most recently from 4d8c7d0 to c3eca5d Compare July 2, 2022 00:18

jessicajaniuk added area: compiler Issues related to `ngc`, Angular's template compiler feature Issue that requests a new feature target: minor This PR is targeted for the next minor release labels Jul 2, 2022

ngbot bot modified the milestone: Backlog Jul 2, 2022

jessicajaniuk force-pushed the ngfor-diagnostic branch 3 times, most recently from 03169cc to 0cb00ac Compare July 6, 2022 15:50

jessicajaniuk marked this pull request as ready for review July 6, 2022 16:10

pullapprove bot requested a review from alxhub July 6, 2022 16:10

alxhub approved these changes Jul 6, 2022

View reviewed changes

pullapprove bot requested review from AndrewKushnir, atscott and pkozlowski-opensource July 6, 2022 16:55

jessicajaniuk force-pushed the ngfor-diagnostic branch from 0cb00ac to eae5b07 Compare July 6, 2022 17:16

atscott reviewed Jul 6, 2022

View reviewed changes

...cli/src/ngtsc/typecheck/extended/test/checks/missing_ngforof_let/missing_ngforof_let_spec.ts Show resolved Hide resolved

pullapprove bot requested a review from dylhunn July 6, 2022 17:47

jessicajaniuk force-pushed the ngfor-diagnostic branch 2 times, most recently from 23a2c1c to 69284fb Compare July 6, 2022 20:25

jessicajaniuk force-pushed the ngfor-diagnostic branch from 69284fb to f0aa84e Compare July 6, 2022 20:34

atscott approved these changes Jul 6, 2022

View reviewed changes

alxhub approved these changes Jul 6, 2022

View reviewed changes

jessicajaniuk removed request for pkozlowski-opensource, dylhunn and AndrewKushnir July 6, 2022 23:05

jessicajaniuk added the action: merge The PR is ready for merge by the caretaker label Jul 6, 2022

alxhub closed this in 33ce388 Jul 7, 2022

This was referenced Aug 1, 2022

build(deps-dev): bump @angular/compiler from 12.2.4 to 14.1.0 numbersprotocol/capture-lite#1885

Closed

build(deps-dev): bump @angular/language-service from 12.2.4 to 14.1.0 numbersprotocol/capture-lite#1879

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 7, 2022

jessicajaniuk deleted the ngfor-diagnostic branch January 27, 2023 16:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(compiler): Add extended diagnostic to warn when missing let on n… #46683

feat(compiler): Add extended diagnostic to warn when missing let on n… #46683

jessicajaniuk commented Jul 2, 2022

atscott left a comment

alxhub left a comment

alxhub commented Jul 7, 2022

angular-automatic-lock-bot bot commented Aug 7, 2022

feat(compiler): Add extended diagnostic to warn when missing let on n… #46683

feat(compiler): Add extended diagnostic to warn when missing let on n… #46683

Conversation

jessicajaniuk commented Jul 2, 2022

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

atscott left a comment

Choose a reason for hiding this comment

alxhub left a comment

Choose a reason for hiding this comment

alxhub commented Jul 7, 2022

angular-automatic-lock-bot bot commented Aug 7, 2022