Vscode-ng-language-service: Doest Not Work with Angular HTML Template and VS Code

[jontiefer]

I'm not sure what I am doing wrong, but I cannot get any intellisense or editor support for Angular HTML templates with VS Code after installing this template.. It simply does not work. Neither do I see any color coding or intellisense, everything is pretty much hand-typed like in notepad right now for me with Angular HTML templates.

[tkoenig89]

@jontiefer did you have a look at the output section of VS Code? There you should find logs from the Language-Service plugin, which might give more details on your case.

[ankemp]

Related: #214

[chuckjaz]

Can you try the work around mentioned in #214?

[briancodes]

I'm using Angular CLI v1.6.4
Angular Language Service: 5.2.1
TypeScript: 2.6.2

Up until two days ago I had intellisense and file reference links in my HTML templates. That functionality seems to be missing now. Think the latest release is causing some issue with my current setup (saw that the extension auto updated recently)

[rfuhrer]

I tried the workaround in #214 and it didn't seem to change anything. Maybe I did it wrong? I didn't see the Angular Language Service version change both times I tired to run it. I just ran yarn remove @angular/language-service and then closed VSCode and reopened it again.

Here's what I get freshly opening VSCode on a html file and then trying to hover on a half completed variable name:

Search path: c:/git/PrimeCore/Prime.Core/ClientApp/app/vendor/tool-view
Config file name: c:/git/PrimeCore/Prime.Core/tsconfig.json
Angular Language Service: 5.2.1
TypeScript: 2.6.2
getTemplateReferences: 3446ms
Add recursive watcher for: c:/git/PrimeCore/Prime.Core
Opened configuration file c:/git/PrimeCore/Prime.Core/tsconfig.json
getTemplateReferences: 0ms
Angular Language Service: 5.2.1
TypeScript: 2.6.2
getTemplateReferences: 27ms
getDiagnostics: 4ms
getHoverAt: 0ms
getHoverAt: 1ms

after that, getHoverAt and getCompletions always takes 0ms and doesn't give any options.

[briancodes]

@rfuhrer Did you run yarn install after the yarn remove to update the node_modules? Maybe yarn clean cache. It sounds like the language service is still present.
There's a new update of VSCode out today - will see if that makes any difference

[rfuhrer]

You don't have to do a yarn install or yarn cache clean after removing something as yarn actually keeps your node_modules clean and up to date. I double checked and the language service folder was missing after the remove and reappeared after I re-added it.
I'm also running today's release of VSCode.

It seems like there's just some kind of disconnect between the HTML and the .ts cause you can see the language service doing stuff while inside a .ts file and it's showing all the nice intellisense stuff:

Search path: c:/git/PrimeCore/Prime.Core/node_modules/@angular/material/dialog/typings
Config file name: c:/git/PrimeCore/Prime.Core/tsconfig.json
getTemplateReferences: 0ms
getTemplateReferences: 0ms
getTemplateReferences: 0ms
getCompletions: 1ms
getDiagnostics: 0ms
getHoverAt: 0ms
getHoverAt: 1ms
getCompletions: 0ms

[chuckjaz]

Have you tried this with 0.1.8 of the extension?

220 should address this issue.

[rfuhrer]

Yeah it auto updated the extension as @briancodes mentioned. I could manually try installing it with the VSIX but it says 0.18 in the extension screen

[chuckjaz]

The fact that Angular Language Service: 5.2.1 is printed twice is an indication that a second project was created for the request. It is a sign that the language service did not that the .html file was referenced by the project.

What is the templateUrl value you are using? Does the project compile cleanly in AOT?

[chuckjaz]

@briancodes Can you produce a project that I can clone that reproduces this?

[kukjevov]

Same here, after upgrade to 0.1.8, it stopped working in .html files. I am goint to try to find out what is the problem :).

[m-ghaoui]

It's broken for me as well:

Angular Language Service: 5.2.1
TypeScript: 2.6.2

I've applied the workaround #214 but it still doesn't work.

[briancodes]

@chuckjaz Hi. I created a new project with the latest CLI and Angular versions (updated to the latest stable released CLI today). Also have the latest stable VSCode version

https://github.com/briancodes/language-ext-issue217

I put in the details of what is occuring in the README.md file

Note: I added a branch remove-angular-language-service where I did an npm uninstall @angular/language-service. Did an npm cache verify, npm install, and restarted VSCode.

• project uses Typescript "typescript": "~2.5.3" by default
• VSCode's TypeScript version is 2.6.2, so I updated project to also use 2.6.2 (same result)
• Changed Angular Project and VSCode to both use TypeScript v2.5.3 (same result)

[snys98]

Angular Language Service: 5.2.1
Extension Version: 0.1.8
TypeScript Version: 2.4.2, 2.6.2 ,2.5.3, 2.7.0-insider

All failed...... emergency, could not working without it!

[ryanbuening]

0.1.8 isn't working for me either on HTML templates with Angular 5.2.2, TypeScript 2.6.2, and VS Code 1.19.3.

My workaround currently is reverting vscode-ng-language-service to 0.1.7 found here: https://github.com/angular/vscode-ng-language-service/releases/tag/0.1.7

[rfuhrer]

Can confirm that reverting to 0.1.7 made everything work properly again despite being on the latest version of angular, typescript and VSCode

[chuckjaz]

@briancodes I cloned https://github.com/briancodes/language-ext-issue217 and it works for me.

I suspect that it might be an issue with paths on Windows so I am trying that now.

[briancodes]

Out of interest @ryanbuening , what's the process for reverting an extension? I'm guessing it's not supported by VSCode out of the box

[rfuhrer]

@briancodes revert, bang out #223 in 5 minutes and call it 0.1.9 😄. This extension should just be made version 1.0 it's so damn useful and the "experimental" tag might scare some more conservative users. 🎉

I'm sure it's just a stupid / vs \ error or something equally annoying thanks to windows amazing pathing

[chuckjaz]

@briancodes I reproduced this in Windows. Investigating now.

[ryanbuening]

Out of interest @ryanbuening , what's the process for reverting an extension? I'm guessing it's not supported by VSCode out of the box

@briancodes You need to Disable Auto Updating Extensions and then select Install from VSIX...

[chuckjaz]

It is a path issue and an apparent change in TypeScript I was unaware of.

We pass the result of path.join() directly to TypeScript when initializing the compiler we should be calling path.posix.join().

A temporary work around is to change the line:

containingFile = path.join(this.options.basePath, 'index.ts');

to:

containingFile = path.posix.join(this.options.basePath, 'index.ts');

in the file language-service.umd.js in the @angular/language-service package.

I will make this change in @angular/language-service and update the extension.

[chuckjaz]

@briancodes @jontiefer @ryanbuening Can one of you (or anyone else on the thread) test https://github.com/angular/vscode-ng-language-service/releases/tag/0.1.9 on Windows using your projects?

I believe this fixes the Windows issue as described above.

[rfuhrer]

@chuckjaz Great Success!

[chuckjaz]

@rfuhrer Thanks!

[briancodes]

@chuckjaz I didn't realised how much I relied on this language extension until it stopped working:-) Great job

[m-ghaoui]

Good stuff! Lesson learned: Next time I'll mention I'm on Windows when making a comment.

[michaeljmonte]

Having this same problem again.
Platform: Windows

PS C:\Dev\Programming\Ang5Tutorial\angular-tour-of-heroes> npm list @angular/language-service
[email protected] C:\Dev\Programming\Ang5Tutorial\angular-tour-of-heroes
`-- @angular/[email protected]

PS C:\Dev\Programming\Ang5Tutorial\angular-tour-of-heroes> npm list typescript
[email protected] C:\Dev\Programming\Ang5Tutorial\angular-tour-of-heroes
+-- @angular/[email protected]
| +-- @angular-devkit/[email protected]
| | `-- [email protected]
| `-- @schematics/[email protected]
|   `-- [email protected]
`-- [email protected]

PS C:\Dev\Programming\Ang5Tutorial\angular-tour-of-heroes>

Maybe I goofed?

[cvgaviao]

Maybe I didn't understand how this plugin should be used.
But I just saw in the Contributions tab that the File Extensions for an 'Angular Template' are .ng, .ngml and .ng.html.
When I changed the extension of my template file from .html to .ng.html, the language have changed to AngularTemplate and I started to receive values in the intelisense that I was not receiving before. for example: *ngIf, *ngFor and the component properties. Also I can now crtl-click on events or methods and be redirected to .ts file.
But I loose the tag colors.

[Hotell]

It works now. Just make sure you have no TypeScript errors which was issue in my usecase

https://github.com/Hotell/react-tools-for-better-angular-apps/pull/2

can this be closed @chuckjaz ?

thanks!

[Inori-Lover]

@michaeljmonte after change typescript version same as vscode's; or change "typescript.tsdk" to "./node_modules/typescript/lib", the plugin work again; hope it can help you

[Borongaj]

Still not work on Mac since Angular 6...

[thovo]

I tried to install the extension manually but it didn't work with my project now:
Angular 6 and Typescript 2.7.2

Is there any work around this issue because I need this work like before ?

[bouillonpi]

Same here, the completion does not work on vscode for a ng new app.

• Angular 6.1.9
• Typescript 2.7.2

[WESquad-spires]

Same, not working.

• Ubuntu 18.04 (x64)
• Angular CLI: 6.1.5
• Node: 10.6.0
• Typescript 2.9.2

Was wondering if the extension was still updated? Last commit is 2 months ago (okay it's not outdated yet ;)) but this issue is about 10 months old now and it seems to be a quite critical one.

[coffeymatt]

Not working for me in HTML files at all, no completion, no go-to

• Angular 7.0.3
• Typescript 3.1.6
• VS Code extension: 0.1.10

edit: Ok, as per:
https://angular.io/guide/language-service#installing-in-your-project

I added

"plugins": [ {"name": "@angular/language-service"} ]

to my tsconfig. Things seem to have started working (though it's spend a very long time and continuous cpu on initialize ts language features, hopefully that's a one off).

[chenxxzhe]

I had this problem too, but finally I found that I set wrong syntax in .html file (I had set wxml).
so I changed the syntax, and it work.

[JiaHongL]

try it, may be solved

VSCode - User Settings

"editor.snippetSuggestions": "top",

to

"editor.snippetSuggestions": "inline",

[kyliau]

Closing this, since issue was solved in https://github.com/angular/vscode-ng-language-service/issues/217#issuecomment-360890538

[angular-automatic-lock-bot[bot]]

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._}