Vscode-ng-language-service: Arbeiten Sie nicht mit Angular HTML Template und VS Code

Erstellt am 22. Jan. 2018  ·  41Kommentare  ·  Quelle: angular/vscode-ng-language-service

Ich bin nicht sicher, was ich falsch mache, aber ich kann nach der Installation dieser Vorlage keine Intellisense- oder Editor-Unterstützung für Angular-HTML-Vorlagen mit VS-Code erhalten. Es funktioniert einfach nicht. Ich sehe auch keine Farbcodierung oder Intellisense, alles ist für mich mit Angular HTML-Vorlagen so gut wie handgeschrieben wie im Editor.

bug

Hilfreichster Kommentar

Ich verwende Angular CLI v1.6.4
Angular Language Service: 5.2.1
TypeScript: 2.6.2

Bis vor zwei Tagen hatte ich Intellisense- und Dateireferenzlinks in meinen HTML-Vorlagen. Diese Funktionalität scheint jetzt zu fehlen. Ich denke, die neueste Version verursacht ein Problem mit meinem aktuellen Setup (ich habe gesehen, dass die Erweiterung kürzlich automatisch aktualisiert wurde).

Alle 41 Kommentare

@jontiefer hast du dir den Ausgabeabschnitt von VS Code angesehen? Dort sollten Sie Protokolle aus dem Language-Service-Plugin finden, die möglicherweise weitere Details zu Ihrem Fall enthalten.

Verwandte: # 214

Können Sie die in # 214 erwähnte Problemumgehung ausprobieren?

Ich verwende Angular CLI v1.6.4
Angular Language Service: 5.2.1
TypeScript: 2.6.2

Bis vor zwei Tagen hatte ich Intellisense- und Dateireferenzlinks in meinen HTML-Vorlagen. Diese Funktionalität scheint jetzt zu fehlen. Ich denke, die neueste Version verursacht ein Problem mit meinem aktuellen Setup (ich habe gesehen, dass die Erweiterung kürzlich automatisch aktualisiert wurde).

Ich habe die Problemumgehung in # 214 ausprobiert und es schien nichts zu ändern. Vielleicht habe ich es falsch gemacht? Ich habe nicht gesehen, dass sich die Version des Angular Language Service geändert hat, als ich müde war, sie auszuführen. Ich habe gerade yarn remove @angular/language-service und dann VSCode geschlossen und erneut geöffnet.

Folgendes bekomme ich, wenn ich VSCode in einer HTML-Datei neu öffne und dann versuche, über einen halbfertigen Variablennamen zu schweben:

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

Danach dauert getHoverAt und getCompletions immer 0 ms und gibt keine Optionen an.

@rfuhrer Haben Sie yarn install nach yarn remove , um die node_modules zu aktualisieren? Vielleicht yarn clean cache . Es hört sich so an, als ob der Sprachdienst noch vorhanden ist.
Es gibt heute ein neues Update von VSCode - wir werden sehen, ob das einen Unterschied macht

Sie müssen kein yarn install oder yarn cache clean nachdem Sie etwas entfernt haben, da das Garn Ihre node_modules tatsächlich sauber und aktuell hält. Ich habe es noch einmal überprüft und der Sprachdienstordner fehlte nach dem Entfernen und wurde wieder angezeigt, nachdem ich ihn erneut hinzugefügt hatte.
Ich verwende auch die heutige Version von VSCode.

Es scheint, als gäbe es nur eine Art Trennung zwischen HTML und .ts, weil Sie sehen können, wie der Sprachdienst in einer .ts-Datei Dinge erledigt und all die netten Intellisense-Dinge anzeigt:

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

Haben Sie dies mit 0.1.8 der Erweiterung versucht?

220 sollte dieses Problem beheben.

Ja, die Erweiterung wurde automatisch aktualisiert, wie bei @briancodes erwähnt. Ich könnte versuchen, es manuell mit VSIX zu installieren, aber auf dem Erweiterungsbildschirm wird 0,18 angezeigt

Die Tatsache, dass Angular Language Service: 5.2.1 zweimal gedruckt wird, ist ein Hinweis darauf, dass ein zweites Projekt für die Anforderung erstellt wurde. Dies ist ein Zeichen dafür, dass der Sprachdienst nicht darauf hingewiesen hat, dass das Projekt .html Datei

Was ist der templateUrl , den Sie verwenden? Wird das Projekt in AOT sauber kompiliert?

@briancodes Können Sie ein Projekt erstellen, das ich klonen kann und das dies reproduziert?

Nach dem Upgrade auf 0.1.8 funktionierte es in .html -Dateien nicht mehr. Ich werde versuchen herauszufinden, was das Problem ist :).

Es ist auch für mich kaputt:

Angular Language Service: 5.2.1
TypeScript: 2.6.2

Ich habe die Problemumgehung Nr. 214 angewendet, aber sie funktioniert immer noch nicht.

@ Chuckjaz Hallo. Ich habe ein neues Projekt mit den neuesten CLI- und Angular-Versionen erstellt (aktualisiert auf die neueste stabile CLI, die heute veröffentlicht wurde). Haben Sie auch die neueste stabile VSCode-Version

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

Ich habe die Details zu dem, was passiert, in die Datei README.md

Hinweis: Ich habe einen Zweig remove-angular-language-service hinzugefügt, in dem ich einen npm uninstall @angular/language-service . Hat ein npm cache verify , npm install und VSCode neu gestartet.

  • Das Projekt verwendet standardmäßig Typescript "typescript": "~2.5.3"
  • Die TypeScript-Version von VSCode ist 2.6.2, daher habe ich das Projekt aktualisiert, um auch 2.6.2 (gleiches Ergebnis)
  • Angular Project und VSCode wurden so geändert, dass beide TypeScript v2.5.3 (gleiches Ergebnis)

Angular Language Service: 5.2.1
Erweiterungsversion: 0.1.8
TypeScript-Version: 2.4.2, 2.6.2, 2.5.3, 2.7.0-Insider

Alles fehlgeschlagen ...... Notfall, könnte ohne es nicht funktionieren!

0.1.8 funktioniert bei mir auch nicht bei HTML-Vorlagen mit Angular 5.2.2, TypeScript 2.6.2 und VS Code 1.19.3.

Meine Problemumgehung besteht derzeit darin, den vscode-ng-language-service auf 0.1.7 zurückzusetzen. Dies finden Sie hier: https://github.com/angular/vscode-ng-language-service/releases/tag/0.1.7

Kann bestätigen, dass beim Zurücksetzen auf 0.1.7 alles wieder ordnungsgemäß funktioniert, obwohl die neueste Version von Angular, Typoskript und VSCode verwendet wird

@briancodes Ich habe https://github.com/briancodes/language-ext-issue217 geklont und es funktioniert für mich.

Ich vermute, dass es ein Problem mit Pfaden unter Windows sein könnte, also versuche ich das jetzt.

Was ist aus Interesse @ryanbuening der Prozess zum Zurücksetzen einer Erweiterung? Ich vermute, es wird von VSCode nicht sofort unterstützt

@briancodes kehren zurück,

Ich bin sicher, es ist nur ein dummer / vs \ Fehler oder etwas ähnlich Ärgerliches dank Windows erstaunlicher Pfad

@briancodes Ich habe dies in Windows reproduziert. Jetzt untersuchen.

Was ist aus Interesse @ryanbuening der Prozess zum Zurücksetzen einer Erweiterung? Ich vermute, es wird von VSCode nicht sofort unterstützt

@briancodes Sie müssen die automatische Aktualisierung von Erweiterungen deaktivieren und dann Von VSIX installieren auswählen ...

image

Es ist ein Pfadproblem und eine offensichtliche Änderung in TypeScript, die mir nicht bekannt war.

Wir übergeben das Ergebnis von path.join() direkt an TypeScript, wenn wir den Compiler initialisieren, den wir path.posix.join() aufrufen sollten.

Eine vorübergehende Umgehung besteht darin, die Zeile zu ändern:

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

zu:

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

in der Datei language-service.umd.js im Paket @angular/language-service .

Ich werde diese Änderung in @angular/language-service vornehmen und die Erweiterung aktualisieren.

@briancodes @jontiefer @ryanbuening Kann einer von Ihnen (oder jemand anderes im Thread) https://github.com/angular/vscode-ng-language-service/releases/tag/0.1.9 unter Windows mit Ihren Projekten testen?

Ich glaube, dies behebt das Windows-Problem wie oben beschrieben.

@chuckjaz Großer Erfolg!
image

@rfuhrer Danke!

@chuckjaz Ich habe nicht

Gutes Zeug! Lektion gelernt: Das nächste Mal werde ich erwähnen, dass ich unter Windows bin, wenn ich einen Kommentar mache.

Ich habe wieder das gleiche Problem.
Plattform: 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>

Vielleicht habe ich vermasselt?

Vielleicht habe ich nicht verstanden, wie dieses Plugin verwendet werden soll.
Aber ich habe gerade auf der Registerkarte "Beiträge" gesehen, dass die Dateierweiterungen für eine " .ng , .ngml und .ng.html sind .
Als ich die Erweiterung meiner Vorlagendatei von .html in .ng.html änderte, wurde die Sprache in AngularTemplate geändert und ich begann, Werte in der Intelisense zu empfangen, die ich zuvor nicht erhalten hatte. Zum Beispiel: * ngIf, * ngFor und die Komponenteneigenschaften. Außerdem kann ich jetzt per Mausklick auf Ereignisse oder Methoden klicken und in die .ts-Datei umgeleitet werden.
Aber ich verliere die Tag-Farben.

Es funktioniert jetzt. Stellen Sie einfach sicher, dass Sie keine TypeScript-Fehler haben, die in meinem Anwendungsfall aufgetreten sind

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

kann dies @chuckjaz geschlossen

Vielen Dank!

@michaeljmonte nach Änderung Typoskript-Version wie vscode; oder ändern Sie "typescript.tsdk" in "./node_modules/typescript/lib" , das Plugin funktioniert wieder; hoffe es kann dir helfen

Funktioniert immer noch nicht auf dem Mac seit Angular 6 ...

Ich habe versucht, die Erweiterung manuell zu installieren, aber es funktionierte jetzt nicht mit meinem Projekt:
Winkel 6 und Typoskript 2.7.2

Gibt es eine Lösung für dieses Problem, weil ich diese Arbeit wie zuvor benötige?

Ebenso funktioniert die Vervollständigung bei vscode für ng new app .

  • Winkel 6.1.9
  • Typoskript 2.7.2

Gleich, funktioniert nicht.

  • Ubuntu 18.04 (x64)
  • Angular CLI: 6.1.5
  • Knoten: 10.6.0
  • Typoskript 2.9.2

Haben Sie sich gefragt, ob die Erweiterung noch aktualisiert wurde? Das letzte Commit ist vor 2 Monaten (okay, es ist noch nicht veraltet;)), aber dieses Problem ist jetzt ungefähr 10 Monate alt und scheint ziemlich kritisch zu sein.

Ich arbeite überhaupt nicht in HTML-Dateien, keine Fertigstellung, keine Anlaufstelle

  • Winkel 7.0.3
  • Typoskript 3.1.6
  • VS-Code-Erweiterung: 0.1.10

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

Ich fügte hinzu

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

zu meiner tsconfig. Die Dinge scheinen angefangen zu haben (obwohl es sehr lange dauert und die CPU kontinuierlich für die Initialisierung der Sprachfunktionen verwendet wird, ist dies hoffentlich ein Einzelfall).

Ich hatte auch dieses Problem, aber schließlich stellte ich fest, dass ich in der Datei .html eine falsche Syntax festgelegt hatte (ich hatte wxml festgelegt).
Also habe ich die Syntax geändert und es funktioniert.

versuchen Sie es, kann gelöst werden

VSCode - Benutzereinstellungen

"editor.snippetSuggestions": "top",

zu

"editor.snippetSuggestions": "inline",

Schließen Sie dies, da das Problem unter https://github.com/angular/vscode-ng-language-service/issues/217#issuecomment -360890538 behoben wurde

Dieses Problem wurde aufgrund von Inaktivität automatisch gesperrt.
Bitte reichen Sie ein neues Problem ein, wenn Sie auf ein ähnliches oder verwandtes Problem stoßen.

Lesen Sie mehr über unsere Richtlinien zum automatischen Sperren von Konversationen .

_Diese Aktion wurde automatisch von einem Bot ausgeführt._

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen