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

Question

I'm on Anuglar v4 and had installed Angular Language Service extension and its package for VS code, neither getting any intellisense in HTML nor any error in VS code developer tools.

Overskirt

Answer 1

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

Thirtytwo

For me it seems its Webpack configuration issue, please find open issue on GitHub here: github.com/angular/angular/issues/23553 – Overskirt

In ALS v12.2.0, it has an option called "Angular: View-engine -> Use legacy View Engine language service", which I think is an equivalent of "experimental-ivy". By turning this option on, I was able to fix this issue. – Oglethorpe

Answer 2

Updating my VSCode fixed this for me. Updating VSCode also will update the Angular Language Service extension. Reload the extension and it works now

Willful

Answer 3

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.

on click of it we can see it's progress

2. 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://mcmap.net/q/478205/-angular-language-service-not-working-in-vscode]

3. 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.

4. 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

5. 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.

Overskirt

Answer 4

Faced the same issue and for me the fix was disabling the Angular Language Service Extension, then reloading the vscode and enabling back the Angular Language Service

Shammy

Answer 5

None of the solutions provided worked for me. After more investigation, I discovered that the project-wide functionality of JavaScript/TypeScript had been disabled due to the large number of JS/TS files in the project. To resolve this problem, it is necessary to exclude all unnecessary files. The following code snippet should be added to tsconfig.json or jsconfig.json file.

"compilerOptions": {
},
"exclude": [
    ".git",
    ".app-cache",
    ".npm",
    ".npm-tmp",
    "dist",
    "dist*",
    "node_modules",
    "**/dist/*",
    "**/node_modules/*"
]

Cawthon

Answer 6

Solution that worked for me: disable the Jinja extension (wholroyd.jinja).

Scissel

Answer 7

I fixed the issue by reinstalling the Angular Language Service extension

Dou

Answer 8

In my case (VS Code 1.84 on Windows, Angular 16), the VS Code built-in module that handles JavaScript and TypeScript had become disabled. I went to File -> Preferences -> Profiles (Default) -> Show Profile Content which displays a tree view with a section for Extensions which contained all of my installed extensions plus an entry for the built-in JavaScript/TypeScript handling with "Disabled" after it. Clicking on the entry showed a page for it with a button to enable it. After enabling it, the entry disappeared from the Extensions list (hence I don't have the exact wording nor can grab a screenshot).

Lydon