Angular language service not working in vscode

Question

The Angular language service does not work in VSCode. In HTML there is no intellisense when using F12 to go to component.

The tsconfig.json gives no errors when opened in VSCode.

Spur

Answer 1

Reason: Angular Language service may not work because of Experimental ivy gets Enables

Solution : we need to disable that or uncheck the box by going into extension settings.

Dekko

Great works like charm. I even disabled the prompting. Now I realized experimental features can be dangerous try on your own risk. – Improbable

@LuisAlfredoSerranoDíaz after disabling, u need to reload the vs code. – Dekko

The fact that this solved my issue - two years later - makes me incredibly sad. – Vermillion

Answer 2

For all other google'ers that end up here the upcoming days: There is a bug in version v0.1100.3 and downgrading to version v0.1100.2 is the solution for many:

https://github.com/angular/vscode-ng-language-service/issues/1063

You can install another version directly in VSCode:

Insectivore

Oh my gosh, works like a charm! I wasted 2h x.x Thanks!! – Venous

This was the solution for my problem. – Antiphony

Funny, we are way past this version, every time I get a notification of an upvote I know the latest version is still broken :) – Insectivore

The same bug has been introduced again in version 14.2.0. For me, 14.1.0 works fine. So, downgraded to 14.1.0. – Zooplankton

Answer 3

I use Angular Language Service version 12.2.0. The solution that worked for me is to enable legacy view engine language service.

Update

Now, I am using Angular Language Service version 13.0. It showed errors when I updated Angular to version 13.0, but, when I deselected the use legacy view engine option, the errors are gone.

Prolongation

Answer 4

You can try to restart Angular Language Service.

Press CTRL+SHITFT+P for opening the Command Palette. Search for Angular: Restart Angular Language Service Here you can find the feature request and the pull request on github.

Cashmere

For recent Angular version (above 13), that's probably the right answer! – Kyphosis

CTRL + SHIFT + P in windows – Eternity

Answer 5

The problem was a trailing comma in the tsconfig.json. Which is allowed in vscode. but can't parsed as json. With Help - Toggle Developer Tools it shows the message in a browser console.

The problem was solved after removing the trailing comma and restart vsCode / project

Spur

i had the same problem, removing the invalid trailing comma solved it! – Degeneration

This answer still works 3 years later. Can't believe it was this! – Bedding

Answer 6

From This Medium Article: Angular Language Service is not Working?

1. You need to make sure VS Code does not auto — update the extension version as it does, so we put “extensions.autoUpdate”: false in your user settings (works in user level settings only — not available on project level settings ).

To edit your settings in settings.json , start by opening the Command Palette with CMD/CTRL + SHIFT + P . From the Command Palette, you have a choice between two commands that edit your settings: The Open Settings (JSON) command will let you directly edit the settings JSON file.

2. Then right click on the extensions and select Install another version:

Gannie

Answer 7

In may case, this was due to a conflict with another extension. I uninstalled some of the extensions (specifically nunjucks) and restarted VSCode, then intellisense on HTML came back.

Shastashastra

Answer 8

From https://github.com/angular/vscode-ng-language-service/issues/1753:

Based on the few comments here for project version, the issue is limited to older projects. We make a best effort to be backwards compatible, but this is not always possible. For older projects, I have pinpointed the breakage to the commit which updated the TypeScript version. This necessary for the extension to work with 14.2. Older projects should install a previous version of the language service that has a bundled TypeScript version compatible with the project. Again, backwards compatibility is a goal but not always possible. The extension version always aims to be compatible with the corresponding version of Angular (14.2 compatible with 14.2, 11 compatible with 11). You can always go back and install the matching extension version for your project (or a newer version with more features, provided it's still compatible). Closing as working as expected.

TL;DR - the solution will depend on the version of your Angular project. You will need to find the latest version of Angular Language Service that works with your project. In my case, I am on Angular v10.1.0, and the latest version that worked for me was v11.2.14. I went down by major versions.

Keep going back versions via Uninstall > Install Another Version... on the extension page until you find the version that works for you.

Asymmetric

Same here, thanks! – Kimberliekimberlin

Answer 9

For me the solution was to disable Experimental-ivy in Angular Language Service extention->settings:

Petite

Answer 10

I'm using Angular 12.2.5 and Angular Language Service 12.2.0. Nothing from above worked in my case, so what I tried as a last resort was to just:

1. uninstall it
2. restart VS Code
3. then re-install it

And that did the trick! Now intellisense is properly working again in html files.

Caudal

Answer 11

For me (working on an old Angular project), it was because the template was imported like this:

import * as template from './<compontent-name>.component.html';

@Component({
    template: template as any,
...

I fixed it by removing the import and use templateUrl instead of template:

@Component({
    templateUrl: './<compontent-name>.component.html',
...

Thatch

Answer 12

For me (in 2023) what worked was deleting the Angular language service, then restarting the vscode, then installing the extension again. Its important that when the vscode ask if you want to install all the recommended extensions you answer install.

Controversy

Answer 13

I uninstalled visual code and then installed it and it was solved (I have a mac by the way)

Emilio

Answer 14

try it , may be solved

VSCode - User Settings

"editor.snippetSuggestions": "top",

to

"editor.snippetSuggestions": "inline",

Campstool