Angular Language Service not working with VS Code, probable ways to trace the issue

I was running into this same issue. I was able to fix it by turning off the "Angular: Enable-experimental-ivy" setting. In order to turn this setting off, please do the following:

  1. Go to the extensions tab on VS Code
  2. Click the gear icon on the right side of the Angular Language Service (ALS) Extension --> Extension Settings Angular Language ServiceExtension
  3. On extension settings, disable the setting "Angular: Experimental-ivy" Please let me know if this works for you. It could also be a mismatch between your Typescript version and ALS. Apologies for any bad formatting, first time posting a response!

Even After following couple of thread on stack overflow I was not able to fix the issue, and when I found the fix thought to cover all individual steps in single post to save someone's time, if you are also facing similar issue, please check below things to rectify root cause.

Based on this angular documentation https://angular.io/guide/language-service we can just install Angular Language Extension from VS code and HTML Intellisense should work, in my case I was not getting any Intellisnense in VS code even after this installing this extension: https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

  1. When we load project/solution in vs code, it initialize Angular Language Service extension look at bottom, to check extension's successful initialization.

enter image description here

on click of it we can see it's progress

enter image description here

  1. Now go to Help -> Toggle Developer Tools (Ctrl + Shift + I) to check any error with VS Code or extension for Angular Language Service [Refer: https://stackoverflow.com/questions/54393646/angular-language-service-not-working-in-vscode]

  2. In My case till now everything looks good, as per https://angular.io/guide/language-service some latest editors, we don't need to add Angular Language Service Package to package.json, but was not able to find any specific angular version information with above statement.

  3. As I'm on still older angular version Installed relevant package npm i --save-dev @angular/[email protected], to make sure if I'm missing any required package or not

  4. Even after following above steps, I was not able to get any intellisense and still there wasn't any error in VS Code Developer Tool

  • So, I've checked in my code based on this error No definition found for 'variable' from HTML file. Seems like component is not linked with HTML file.

  • Was able to see error on my declaration of component Component 'AppComponent' must have a template or templateUrl ng even though it was provided.

  • Later was able to found that due to SystemJS/Webpack we have used template: require('./app.html') syntax which was causing issue

  • Replacing it to templateUrl: './app.html', Now HTML is able to detect to component variables, methods etc..

References:

  • https://github.com/angular/vscode-ng-language-service/issues/100 (My issue was associated with this GitHub issue) and https://github.com/angular/angular/issues/19406 (similar issue)

  • Open Issue in Angular for the same : https://github.com/angular/angular/issues/23553

Let me know if someone faced similar issue because of any other reason, I'll update this thread to save someone's time.