Variables created in the template always have type any

[BlindDespair]

Describe the bug
With the latest version of angular language service we lost the type safety in the template when using techniques that create new variables, e.g. when using *ngFor or *ngIf="something as some".
I experienced this in all my projects while working from different machines. Here is an example:

You can clearly see that documentTypes is typed here, however documentType becomes type any:

This same issue can be seen also with *ngIf when using as, I am not sure if anything else is affected.

To Reproduce

Steps to reproduce the behavior:

1. Create any component
2. Create a dummy list and type it with something it contains
3. Create *ngFor in the template

Expected behavior
It should have the correct types.

Logs

[Info  - 4:18:23 PM] Angular language server process ID: 95617
[Info  - 4:18:23 PM] Using typescript/lib/tsserverlibrary v4.1.5 from .vscode/extensions/angular.ng-template-11.2.3/node_modules/typescript/lib/tsserverlibrary.js
[Info  - 4:18:23 PM] Using @angular/language-service/bundles/ivy v11.2.2 from .vscode/extensions/angular.ng-template-11.2.3/node_modules/@angular/language-service/bundles/ivy.js
[Info  - 4:18:23 PM] Log file: Library/Application Support/Code/logs/20210222T081547/exthost2/Angular.ng-template/nglangsvc.log
[Info  - 4:18:26 PM] Disabling language service for /frontend/tsconfig.json because it is not an Angular project ('@angular/core/core.d.ts' could not be found). If you believe you are seeing this message in error, please reinstall the packages in your package.json.
[Info  - 4:18:58 PM] Enabling Ivy language service for /frontend/tsconfig.fix.json.
[Info  - 4:19:06 PM] Enabling Ivy language service for /frontend/tsconfig.spec.json.
[Info  - 4:19:06 PM] Enabling Ivy language service for /frontend/tsconfig.app.json.
.vscode/extensions/angular.ng-template-11.2.3/node_modules/@angular/language-service/bundles/ivy.js:25584
                    throw err;
                    ^

Error: Duplicate decorated properties found on class 'SignDocumentTabComponent': selectedDocument
    at generateSetClassMetadataCall (.vscode/extensions/angular.ng-template-11.2.3/node_modules/@angular/language-service/bundles/ivy.js:28012:19)
    at ComponentDecoratorHandler.analyze (.vscode/extensions/angular.ng-template-11.2.3/node_modules/@angular/language-service/bundles/ivy.js:28909:35)
    at TraitCompiler.analyzeTrait (.vscode/extensions/angular.ng-template-11.2.3/node_modules/@angular/language-service/bundles/ivy.js:25576:40)
    at analyze (.vscode/extensions/angular.ng-template-11.2.3/node_modules/@angular/language-service/bundles/ivy.js:25542:44)
    at TraitCompiler.analyzeClass (.vscode/extensions/angular.ng-template-11.2.3/node_modules/@angular/language-service/bundles/ivy.js:25564:21)
    at visit (.vscode/extensions/angular.ng-template-11.2.3/node_modules/@angular/language-service/bundles/ivy.js:25390:26)
    at visitNodes (.vscode/extensions/angular.ng-template-11.2.3/node_modules/typescript/lib/tsserverlibrary.js:27858:30)
    at Object.forEachChild (.vscode/extensions/angular.ng-template-11.2.3/node_modules/typescript/lib/tsserverlibrary.js:28097:24)
    at visit (.vscode/extensions/angular.ng-template-11.2.3/node_modules/@angular/language-service/bundles/ivy.js:25392:22)
    at TraitCompiler.analyze (.vscode/extensions/angular.ng-template-11.2.3/node_modules/@angular/language-service/bundles/ivy.js:25394:13)
[Info  - 4:54:56 PM] Connection to server got closed. Server will restart.
[Info  - 4:54:57 PM] Angular language server process ID: 96725
[Info  - 4:54:57 PM] Using typescript/lib/tsserverlibrary v4.1.5 from .vscode/extensions/angular.ng-template-11.2.3/node_modules/typescript/lib/tsserverlibrary.js
[Info  - 4:54:57 PM] Using @angular/language-service/bundles/ivy v11.2.2 from .vscode/extensions/angular.ng-template-11.2.3/node_modules/@angular/language-service/bundles/ivy.js
[Info  - 4:54:57 PM] Log file: Library/Application Support/Code/logs/20210222T081547/exthost2/Angular.ng-template/nglangsvc.log
[Info  - 4:54:57 PM] Disabling language service for /frontend/tsconfig.json because it is not an Angular project ('@angular/core/core.d.ts' could not be found). If you believe you are seeing this message in error, please reinstall the packages in your package.json.
[Info  - 4:55:11 PM] Enabling Ivy language service for /frontend/tsconfig.fix.json.
[Info  - 4:55:16 PM] Enabling Ivy language service for /frontend/tsconfig.spec.json.
[Info  - 4:55:16 PM] Enabling Ivy language service for /frontend/tsconfig.app.json.

[anurag-roy]

I found a workaround.

Try disabling Angular: Experimental-ivy in the extension settings. It doesn't show the type on hover but at least autocomplete works.

[atscott]

The types shown by Angular Language Service reflect what you've configured the compiler to interpret. Have you turned on strictTemplates or fullTemplateTypeCheck at the very least in the angular compiler options? If not, Angular does not type check the bodies of templates.

[Jin-K]

this is the content of our tsconfig.json, and we have the issue since a couple of days:

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "paths": {
      "lodash/*": ["node_modules/@types/lodash-es/*"]
    },
    "lib": ["es2018", "dom"]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

[atscott]

Ah, I see what's happening. fullTemplateTypeCheck is not enough to apply the template context guards: https://github.com/angular/angular/blob/e12d9dec64bc3d02e58f8f85a65a939394fb9531/packages/compiler-cli/src/ngtsc/core/src/compiler.ts#L667
If your project isn't quite ready to turn on strictTemplates, the next step to get this working is to add "strictInputTypes": true: https://github.com/angular/angular/blob/e12d9dec64bc3d02e58f8f85a65a939394fb9531/packages/compiler-cli/src/ngtsc/core/src/compiler.ts#L724

[atscott]

Just a heads up, we're planning to add an informational diagnostic that would show up on structural directives when the compiler options are preventing the guard from being applied.

Edit: tracking issue in the angular/angular repo angular/angular#41042