microsoft / vs-ng-language-service

Visual Studio extension for the Angular Language Service
MIT License
43 stars 15 forks source link

Can't seem to get IntelliSense in component template files #69

Closed l3vi4than closed 9 months ago

l3vi4than commented 9 months ago

I can't seem to have the extension working with VS Angular project templates (no IntelliSense in component.html). Is there anything special I need to do? I'm running the most recent version of the extension with VS 2022 (v17.8.2). The Angular Language Server process is running.

Info: Angular language server process ID: 25192
Info: Logging is turned off. To enable, run command 'Open Angular server log'.
Info: Using typescript/lib/tsserverlibrary v5.2.2 from ...\node_modules\typescript\lib\tsserverlibrary.js
Info: Using @angular/language-service v17.0.0-rc.3 from ...\node_modules\@angular\language-service\index.js
Info: Enabling language service for e:/WorkShop/angular/Separation/Separation/tsconfig.json.

It doesn't work with the old "merged" project template that has both Angular and ASP.NET Core in a single project as well as the newer templates that have two separate projects in a single solution.

Just a clean freshly created solution in VS22+ after installing the Extension. Checked with both Resharper enabled and disabled. I'm not getting field/property names in {{ }} blocks, at all.

Any clues/ideas or suggestions how to diagnose it further?

MariaSolOs commented 9 months ago

@l3vi4than hmm strange, I cannot reproduce the issue: image

To be sure, did you run npm install at the root of the project directory after creating it?

l3vi4than commented 9 months ago

Otherwise, I would not be able to run the project itself, and it works just fine. So yes, I did, but I verified just-in-case:

e:\WorkShop\angular\Separation\Separation>npm install

up to date, audited 1102 packages in 2s
MariaSolOs commented 9 months ago

@l3vi4than that's very strange indeed. Let me ask a couple more questions:

  1. Do you have TypeScript installed globally? (i.e. you used npm install -g typescript).
  2. Are you able to get any IntelliSense in component.html files after opening a TypeScript file?
  3. Besides completion, do you notice some other feature not working as expected (like colorization)?
MariaSolOs commented 9 months ago

@l3vi4than Also please check that you have this setting enabled in Tools/Options: image

l3vi4than commented 9 months ago

@MariaSolOs I have verified that typescript was installed globally, it was, defensively updated it to a newer version:

C:\Users\Maly>npm list -g
C:\Users\Maly\AppData\Roaming\npm
+-- @angular/cli@16.2.6
+-- @openapitools/openapi-generator-cli@2.7.0
`-- typescript@5.2.2
C:\Users\Maly>npm install -g typescript
changed 1 package in 1s
C:\Users\Maly>npm list -g
C:\Users\Maly\AppData\Roaming\npm
+-- @angular/cli@16.2.6
+-- @openapitools/openapi-generator-cli@2.7.0
`-- typescript@5.3.3

This did not help.

Then I checked the LSP setting, it was not checked, I enabled it and restarted VS. This did not help as well.

After all that I inspected if the colorization feature works:

As you might notice I infact had both TS and template files opened.

The odd thing is that I even have a hint when hovering the variable in the template editor: image

And I can as well navigate to the field with F12. Just the Ctrl-Space drop-down is empty and if I add a dot after temp, it does not provide hint for string members as well. image

For reference purposes, though nothing fancy is here, it's nearly just an empty template freshly created with VS:

app.component.html

<div>Hello world! {{ temp }}</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  temp: string = "Temp";

  constructor(private http: HttpClient) {
  }

  ngOnInit(): void {
    this.http.get<string>('http://localhost:5031/weatherforecast').subscribe(result => {
      console.log(result);
    }, error => console.error(error));
  }
}

Update

After applying all your suggestions I tried disabling Resharper again. The Ctrl-Space IntelliSense dropdown started working, it seems it's some kind of a clash with Resharper. I've updated Resharper to the latest version as well. Please put this investigation on hold, for now, I will check with JetBrains, see if they have any suggestiong and come back to. Obviously, I need both extensions active 😄.

MariaSolOs commented 9 months ago

Sounds good, I will close this for now because it doesn't sound like an issue with this extension.