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.

Angular 11 - types in html files are not shown

See original GitHub issue

When editing an HTML file, the types of variables are not known, or shown. Hovering over a property of a component, just shows as “typescript”.

To Reproduce

Steps to reproduce the behavior:

  1. Create or Open a new Angular 11 application.
  2. Open the app.component.html file and hover over the {{ title }} member variable.

The type shown is just “typescript”

Expected behavior The type should show the proper Typescript type - "string’ in this case.

A clear and concise description of what you expected to happen.

Logs

Please attach two logs:

  1. Console output (Go to toolbar --> View --> Output, and copy the contents)
[Info  - 1:41:20 PM] Angular language server process ID: 18500
[Info  - 1:41:20 PM] Using typescript/lib/tsserverlibrary v4.0.5 from c:\Users\John Tsombakos\.vscode-insiders\extensions\angular.ng-template-0.1100.1\node_modules\typescript\lib\tsserverlibrary.js
[Info  - 1:41:20 PM] Using @angular/language-service v11.0.1 from c:\Users\John Tsombakos\.vscode-insiders\extensions\angular.ng-template-0.1100.1\server\node_modules\@angular\language-service\bundles\language-service.js
[Info  - 1:41:20 PM] Log file: c:\Users\John Tsombakos\AppData\Roaming\Code - Insiders\logs\20201201T134113\exthost1\Angular.ng-template\nglangsvc.log
[Info  - 1:41:33 PM] Enabling VE language service for c:/Users/John Tsombakos/source/ng11-test/tsconfig.json.

  1. Log file (Path is printed to the console output at startup)
Info 0    [13:41:20.46] Format host information updated
Info 1    [13:41:20.75] reload projects.
Info 2    [13:41:20.75] Before ensureProjectForOpenFiles:
Info 3    [13:41:20.75] After ensureProjectForOpenFiles:
Info 4    [13:41:20.75] Host file extension mappings updated
Info 5    [13:41:20.77] Angular language server process ID: 18500
Info 6    [13:41:20.77] Using typescript/lib/tsserverlibrary v4.0.5 from c:\Users\John Tsombakos\.vscode-insiders\extensions\angular.ng-template-0.1100.1\node_modules\typescript\lib\tsserverlibrary.js
Info 7    [13:41:20.77] Using @angular/language-service v11.0.1 from c:\Users\John Tsombakos\.vscode-insiders\extensions\angular.ng-template-0.1100.1\server\node_modules\@angular\language-service\bundles\language-service.js
Info 8    [13:41:20.78] Log file: c:\Users\John Tsombakos\AppData\Roaming\Code - Insiders\logs\20201201T134113\exthost1\Angular.ng-template\nglangsvc.log
Info 9    [13:41:20.213] Search path: c:/Users/John Tsombakos/source/ng11-test/src/app
Info 10   [13:41:20.214] For info: c:/Users/John Tsombakos/source/ng11-test/src/app/app.component.html :: Config file name: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 11   [13:41:20.215] Opened configuration file c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 12   [13:41:20.219] Loading new project: Creating possible configured project for c:/Users/John Tsombakos/source/ng11-test/src/app/app.component.html to open
Info 13   [13:41:20.256] Config: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json : {
 "rootNames": [
  "c:/Users/John Tsombakos/source/ng11-test/e2e/src/app.e2e-spec.ts",
  "c:/Users/John Tsombakos/source/ng11-test/e2e/src/app.po.ts",
  "c:/Users/John Tsombakos/source/ng11-test/src/main.ts",
  "c:/Users/John Tsombakos/source/ng11-test/src/polyfills.ts",
  "c:/Users/John Tsombakos/source/ng11-test/src/test.ts",
  "c:/Users/John Tsombakos/source/ng11-test/src/app/app-routing.module.ts",
  "c:/Users/John Tsombakos/source/ng11-test/src/app/app.component.spec.ts",
  "c:/Users/John Tsombakos/source/ng11-test/src/app/app.component.ts",
  "c:/Users/John Tsombakos/source/ng11-test/src/app/app.module.ts",
  "c:/Users/John Tsombakos/source/ng11-test/src/app/data.service.spec.ts",
  "c:/Users/John Tsombakos/source/ng11-test/src/app/data.service.ts",
  "c:/Users/John Tsombakos/source/ng11-test/src/app/types.ts",
  "c:/Users/John Tsombakos/source/ng11-test/src/environments/environment.prod.ts",
  "c:/Users/John Tsombakos/source/ng11-test/src/environments/environment.ts"
 ],
 "options": {
  "baseUrl": "c:/Users/John Tsombakos/source/ng11-test",
  "outDir": "c:/Users/John Tsombakos/source/ng11-test/dist/out-tsc",
  "forceConsistentCasingInFileNames": true,
  "strict": true,
  "noImplicitReturns": true,
  "noFallthroughCasesInSwitch": true,
  "sourceMap": true,
  "declaration": false,
  "downlevelIteration": true,
  "experimentalDecorators": true,
  "moduleResolution": 2,
  "importHelpers": true,
  "target": 2,
  "module": 6,
  "lib": [
   "lib.es2018.d.ts",
   "lib.dom.d.ts"
  ],
  "configFilePath": "c:/Users/John Tsombakos/source/ng11-test/tsconfig.json"
 }
}
Info 14   [13:41:20.258] Loading global plugin @angular/language-service
Info 15   [13:41:20.258] Enabling plugin @angular/language-service from candidate paths: c:\Users\John Tsombakos\.vscode-insiders\extensions\angular.ng-template-0.1100.1\server\node_modules\@angular\language-service\bundles\language-service.js,c:/Users/John Tsombakos/.vscode-insiders/extensions/angular.ng-template-0.1100.1/node_modules/typescript/lib/tsserverlibrary.js/../../..
Info 16   [13:41:20.258] Loading @angular/language-service from c:\Users\John Tsombakos\.vscode-insiders\extensions\angular.ng-template-0.1100.1\server\node_modules\@angular\language-service\bundles\language-service.js (resolved to c:/Users/John Tsombakos/.vscode-insiders/extensions/angular.ng-template-0.1100.1/server/node_modules/@angular/language-service/bundles/language-service.js/node_modules)
Info 17   [13:41:20.368] Plugin validation succeded
Info 18   [13:41:20.582] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 19   [13:41:32.314] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 1 structureChanged: true Elapsed: 11732ms
Info 20   [13:41:32.314] Project 'c:/Users/John Tsombakos/source/ng11-test/tsconfig.json' (Configured)
Info 21   [13:41:32.314] 	Files (312)

Info 22   [13:41:32.314] -----------------------------------------------
Info 23   [13:41:32.379] Starting updateGraphWorker: Project: /dev/null/autoImportProviderProject1*
Info 24   [13:41:33.106] Finishing updateGraphWorker: Project: /dev/null/autoImportProviderProject1* Version: 1 structureChanged: true Elapsed: 727ms
Info 25   [13:41:33.106] Project '/dev/null/autoImportProviderProject1*' (AutoImportProvider)
Info 26   [13:41:33.106] 	Files (69)

Info 27   [13:41:33.106] -----------------------------------------------
Info 28   [13:41:33.108] Enabling VE language service for c:/Users/John Tsombakos/source/ng11-test/tsconfig.json.
Info 29   [13:41:33.113] FileWatcher:: Triggered with c:/Users/John Tsombakos/source/ng11-test/src/app/data.service.ts 1:: WatchInfo: c:/Users/John Tsombakos/source/ng11-test/src/app/data.service.ts 500 undefined Project:  WatchType: Closed Script info
Info 30   [13:41:33.114] Elapsed:: 1ms FileWatcher:: Triggered with c:/Users/John Tsombakos/source/ng11-test/src/app/data.service.ts 1:: WatchInfo: c:/Users/John Tsombakos/source/ng11-test/src/app/data.service.ts 500 undefined Project:  WatchType: Closed Script info
Info 31   [13:41:33.121] FileWatcher:: Triggered with c:/Users/John Tsombakos/source/ng11-test/src/app/types.ts 1:: WatchInfo: c:/Users/John Tsombakos/source/ng11-test/src/app/types.ts 500 undefined Project:  WatchType: Closed Script info
Info 32   [13:41:33.121] Elapsed:: 0ms FileWatcher:: Triggered with c:/Users/John Tsombakos/source/ng11-test/src/app/types.ts 1:: WatchInfo: c:/Users/John Tsombakos/source/ng11-test/src/app/types.ts 500 undefined Project:  WatchType: Closed Script info
Info 33   [13:41:33.315] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 34   [13:41:33.321] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 2 structureChanged: false Elapsed: 6ms
Info 35   [13:41:35.632] Before ensureProjectForOpenFiles:
Info 36   [13:41:35.632] After ensureProjectForOpenFiles:
Info 37   [13:46:36.722] Search path: c:/Users/John Tsombakos/source/ng11-test/src/app
Info 38   [13:46:36.722] For info: c:/Users/John Tsombakos/source/ng11-test/src/app/app.component.ts :: Config file name: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 39   [13:46:42.872] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 40   [13:46:42.949] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 3 structureChanged: false Elapsed: 77ms
Info 41   [13:46:42.949] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 42   [13:46:45.260] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 43   [13:46:45.403] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 4 structureChanged: false Elapsed: 143ms
Info 44   [13:46:45.403] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 45   [13:46:45.689] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 46   [13:46:45.797] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 5 structureChanged: false Elapsed: 108ms
Info 47   [13:46:45.797] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 48   [13:46:45.898] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 49   [13:46:45.956] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 6 structureChanged: false Elapsed: 58ms
Info 50   [13:46:45.957] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 51   [13:46:46.226] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 52   [13:46:46.282] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 7 structureChanged: false Elapsed: 55ms
Info 53   [13:46:46.282] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 54   [13:46:46.908] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 55   [13:46:46.952] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 8 structureChanged: false Elapsed: 44ms
Info 56   [13:46:46.952] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 57   [13:46:47.523] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 58   [13:46:47.584] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 9 structureChanged: false Elapsed: 61ms
Info 59   [13:46:47.584] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 60   [13:46:48.60] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 61   [13:46:48.123] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 10 structureChanged: false Elapsed: 63ms
Info 62   [13:46:48.123] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 63   [13:46:51.488] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 64   [13:46:51.599] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 11 structureChanged: false Elapsed: 111ms
Info 65   [13:46:51.599] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 66   [13:46:52.143] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 67   [13:46:52.189] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 12 structureChanged: false Elapsed: 46ms
Info 68   [13:46:52.189] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 69   [13:46:53.172] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 70   [13:46:53.219] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 13 structureChanged: false Elapsed: 47ms
Info 71   [13:46:53.219] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 72   [13:46:54.558] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 73   [13:46:54.602] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 14 structureChanged: false Elapsed: 44ms
Info 74   [13:46:54.602] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 75   [13:46:55.128] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 76   [13:46:55.188] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 15 structureChanged: false Elapsed: 60ms
Info 77   [13:46:55.188] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 78   [13:47:1.390] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 79   [13:47:1.394] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 16 structureChanged: false Elapsed: 4ms
Info 80   [13:47:2.25] Starting updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json
Info 81   [13:47:2.28] Finishing updateGraphWorker: Project: c:/Users/John Tsombakos/source/ng11-test/tsconfig.json Version: 17 structureChanged: false Elapsed: 3ms

Screenshots

If applicable, add screenshots to help explain your problem.

image

Additional context

Add any other context about the problem here.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
xiaoxiangmoecommented, Dec 6, 2020

I tried 0.1100.2 and it doesn’t work.

This is my .vscode/settings.json

{
  "angular.experimental-ivy": true
}

This is my angularCompilerOptions

{
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}
0reactions
angular-automatic-lock-bot[bot]commented, Mar 9, 2021

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

HTML page is not visible in Angular after setting all the routes
javascript - HTML page is not visible in Angular after setting all the routes - Stack Overflow. Stack Overflow for Teams – Start...
Read more >
Displaying Data - ts - GUIDE - Angular
You can display data by binding controls in an HTML template to properties of an Angular component. In this page, you'll create a...
Read more >
Template type checking - Angular
Just as TypeScript catches type errors in your code, Angular checks the expressions and bindings within the templates of your application and can...
Read more >
TypeScript configuration - Angular
A given Angular workspace contains several TypeScript configuration files. At the root tsconfig.json file specifies the base TypeScript and Angular compiler ...
Read more >
Component styles - Angular
For every Angular component you write, you can define not only an HTML template, but also the CSS styles that go with that...
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