Aktualisieren. Der Ivy-Compiler erstellt keine Datei lib-name.metadata.json in project_root/dist/lib-name .
Könnte dies das Problem sein?

+1 Ich habe das gleiche Problem

Nach Version 9 werden wir die Interna des Sprachdienstes auf die Verwendung des Ivy-Compilers umstellen. Bis dahin müsste sich der Sprachdienst auf metadata.json , um zusätzliche Informationen zu einer Direktive abzurufen.

Ja, das ist das Problem. Um dies vorerst zu beheben, müssen Sie die Produktversion Ihrer Bibliothek erstellen, die "enableIvy": false in tsconfig enthält. Dadurch wird die im dist-Ordner benötigte Metadatendatei generiert.

dh ng build lib-component --prod

Sie müssen aber auch sicherstellen, dass nach jedem eingebauten vs-Code Restart Angular Language service .

All diese Informationen sind zwischen dem vs-Code-Plugin und Angular selbst nicht leicht zu finden. Nur ein Hinweis für alle anderen, die das gleiche Problem haben.

Meine Annahme, dass

• https://github.com/angular/vscode-ng-language-service/issues/340 und
• https://github.com/angular/vscode-ng-language-service/issues/457
  sind alle verwandt.

@jiverson bezüglich Ihrer ng build lib-component --prod für mich ergibt einen Fehler An unhandled exception occurred: Configuration 'production' is not set in the workspace. und ich habe an anderer Stelle Beweise dafür gesehen, dass das Flag --prod für Bibliotheken nicht mehr relevant ist. Ich verwende jedoch @ angle / cli v8.3.25. Obwohl dieses Problem als mögliches Duplikat für # 665 bezeichnet wurde, bin ich mir nicht sicher, ob es das ist. Irgendwelche Gedanken? / cc @ayazhafiz

Irgendwelche Updates dazu? Wir haben unsere eigenen Bibliotheken entwickelt und in Efeu veröffentlicht, sogar in Prod.

Es wird daran gearbeitet, den Sprachendienst in ein Ivy-Backend zu verlagern!

Ich kann das bestätigen, wenn Sie dies tun:

• Erstellen Sie eine Bibliothek mit ng build my-library --prod und
• Strg + Umschalt + P und dann "Angular Language Server neu starten" auswählen

Die Fehler vom Typ "'xyz' ist kein bekanntes Element" werden aus dem übergeordneten Projekt der Bibliothek entfernt.

Nach meinem Verständnis liegt dies daran, dass --prod (unter anderem) eine my-library.metadata.json -Datei im Ordner dist generiert, die dann vom Sprachserver verwendet wird, um definierte Komponentenselektoren zu erkennen in meiner Bibliothek.

Nun würde man erwarten , dass , wenn ich npm publish Bibliothek gebaut mit ng build my-library --prod und dann npm install , dass Bibliothek in einen anderen Winkel App würde der Sprachserver die Metadaten - Datei in dieser installiert sehen npm-Paket (im Ordner node_modules ) und meldet nicht "'xyz' ist kein bekanntes Element".

Dies wird jedoch nicht wie erwartet funktioniert , und ich kann den gleichen Fehler in einem Projekt sehen , das hat npm install ed my-Bibliothek, auch wenn es eine Metadaten - JSON - Datei in my-Library - Ordnern in node_modules ist.

Wäre dies der gleiche Fehler wie in dieser Ausgabe oder ein anderer Fehler?

Oder gibt es eine andere (oder zusätzliche) magische Kombination von Tasten, die gedrückt werden müssen, oder Befehlen, die dem Sprachserver gegeben werden müssen, damit npm install ed Angular-Bibliotheken korrekt verarbeitet werden?

Es scheint, dass die neue Arbeitsweise von Ivy darin besteht, sich auf Metadaten aus .d.ts-Dateien und nicht mehr auf metadat.json-Dateien zu verlassen. Der einzige Grund, warum ein --prod-Build funktioniert, ist, dass Ihre tsconfig enableIvy auf false setzt (wie von angle für npm-veröffentlichte Bibliotheken empfohlen). Dies ist ein Sprachdienstproblem und kein Winkel-CLI-Problem, da der Build mit oder ohne Ivy für eine Anwendung, die die veröffentlichte Bibliothek verwendet, problemlos funktioniert.

Das Problem ist zweifach:

1. Ivy entfernt die Dateien metadata.json, die auch von ALS und anderen Tools benötigt werden
2. ALS ist derzeit nicht intelligent genug, um Informationen aus Ivy-Metadaten anstelle von .metadata.json abzurufen

Warum ist das ein sehr nerviges Thema?

• Ivy ist der richtige Weg, und Bibliotheksentwickler werden es auch schaffen.
• Wenn Sie eine Bibliothek in Ihrem Ivy-basierten Anwendungsprojekt erstellen, möchten Sie Ivy weiterhin Ende-zu-Ende in Ihrer App verwenden, während Sie noch ein guter Bürger sind, und Ihre wiederverwendbare Bibliothek auf npm veröffentlichen, damit andere sie verwenden können.
• Die meisten Entwickler verwenden den npm-Link oder verweisen die tsconfig für den Import während der App-Entwicklung auf das Verzeichnis dist der Bibliothek. Dies ist ohnehin der naheliegende Weg.
• Es ist höllisch ärgerlich, wenn vscode Dinge in Ihrer Bibliothek als unbekannt kennzeichnet.

Folgendes habe ich letztendlich getan, um dieses Problem zu umgehen, das unter den gleichen Umständen für manche Menschen akzeptabel sein kann. Es hilft Menschen nicht, die ihre publizierbaren Bibliotheken unter den gleichen Bedingungen wie ein Benutzer solcher Bibliotheken verwenden möchten (dh aus dem veröffentlichten npm-Paket):

Angenommen, Sie verwenden eine Monorepo-Struktur oder eine ähnliche Struktur, bei der der Quellcode der veröffentlichbaren Bibliothek für die Anwendung, die sie verwendet, auf konsistente Weise zugänglich ist.

Nehmen wir an, das Paket heißt 'happy-library' ...

1. Erstellen Sie (mit --prod) und veröffentlichen Sie das Bibliothekspaket wie gewohnt in npm. Sie müssen --prod verwenden und Ivy in der Build-Konfiguration deaktiviert haben.
2. Aktualisieren Sie Ihre tsconfig.json im Arbeitsbereichsstamm (oder vscode wird es nicht herausfinden ...), um diesem Paket eine Pfadzuordnung hinzuzufügen, die auf das Quellverzeichnis des Pakets verweist.
3. Importieren Sie das Paket in den Anwendungscode, als wäre es von node_modules, dh import {whatever} from 'happy-library';

    "paths": {
      "happy-library": ["libs/happy-library/src/index.ts"]
    }

Es ist nicht perfekt, aber zumindest kann ich meine eigene Bibliothek in einer End-to-End-Ivy-Anwendung verwenden, die ebenfalls von mir erstellt wurde, ohne die Fehler in vscode, während ich trotzdem die Liebe teile und sie für andere Benutzer und mich in NPM veröffentliche Sie müssen nicht ständig einen Garn / Npm-Link erstellen und debuggen, warum ALS nicht funktioniert.

Interessiert an Feedback, wenn ich etwas verpasst habe ...

PS: Voll funktionsfähiges Repo mit dieser Methode unter https://github.com/abdes/happy-coding

Wurden hier Fortschritte erzielt?

Scheint, dass dies für Beta-Tests auf Angular 11 verfügbar sein wird, die für November geplant sind.

Siehe https://github.com/angular/vscode-ng-language-service/issues/335#issuecomment -693545000

Ich verwende Angular 11 in meinem Projekt (Bibliothek ebenfalls mit Angular 11 mit dem Flag --prod erstellt) und habe das Problem von @nprasovict beschrieben . Ich habe meine Bibliothek in Gitlab-Paketen veröffentlicht. Wenn ich sie in unserem Projekt mit npm install installiere, erkennt der Angular Language Service meine exportierten Komponenten aus meiner Bibliothek nicht. Sieht so aus, als wäre es schon sehr lange ein Problem. Wann können wir damit rechnen, dass es gelöst wird?

Ich denke, ich werde vorerst nur die VSCode-Erweiterung entfernen, aber ich werde nur aus diesem Grund eine leistungsstarke Entwicklung verlieren ...

@schankam : https://github.com/angular/vscode-ng-language-service/issues/457#issuecomment -725569238

@ JonWallsten Danke, also wird es bald veröffentlicht, wenn ich es gut verstehe

Dies wurde durch den neuen Ivy-Muttersprachendienst behoben , der in

Tolle Arbeit, @kyliau!
Ich sehe viele neue Fehler in der Vorlage, wenn es um strenge Nullprüfung geht und solche, die wir verpasst haben, wirklich nett!

@kyliau Hmmmm ... das ist komisch. Ich hatte das gleiche Problem mit einer in einer Bibliothek deklarierten Direktive und löste es, indem ich dem Vorschlag folgte, die Bibliothek mit dem Schalter --prod zu erstellen. Die Sache ist, dass ich bereits auf ALS 11.1.1 bin , also müsste dies theoretisch kein Problem mehr sein, oder?
Das Projekt ist ein reguläres CLI-Multiprojekt mit einigen Bibliotheken und einer App.
Ich bin mir nicht sicher, ob ich npm verlinken soll ... Ich habe nichts Besonderes gemacht. Der Pfad der Bibliothek ist im Stammverzeichnis tsconfig.json aufgeführt.

Ich habe das gleiche Problem. Ich baue meine Bibliothek mit dem Flag --prod , sodass Ivy deaktiviert ist.
Verknüpft den Ordner dist der Bibliothek, verknüpft das Paket mit meiner App und importiert das libmodule. Aber immer noch den Fehler bekommen, dass es kein bekanntes Winkelelement ist.
Die Komponente in der Bibliothek befindet sich im Array declarations und im Array exports .

Die Komponente wird angezeigt, es wird jedoch weiterhin dieser Fehler in vscode angezeigt. getestete Versionen:

11.1.3
11.2.1
0,1100,4

Ich stimme zu, dies sollte wahrscheinlich nicht geschlossen werden @kyliau ... Ich habe ein minimal reproduzierbares Beispiel, das ich für ein anderes Problem gemacht habe, das auch dazu dienen könnte, dieses zu demonstrieren. Schauen Sie sich das an: https://github.com/vicatcu/monorepo-example-error (ursprünglich in Verbindung mit diesem SO-Beitrag veröffentlicht )

Ich werde noch einen Schritt weiter gehen, wenn ich die Option "enableIvy": false unter angularCompilerOptions in den Kommentar tsconfig.lib.json einfüge, wie ich es in diesem Zweig meines Beispiel-Repos getan habe , meine Fehler verschwinden in vscode (vorausgesetzt, mein Beispielprojekt ist immer noch auf eine Weise kaputt, die ich nicht verstehe)

Nur um zu verdeutlichen, dass es nicht ausreicht, auf v11.1.x sein, müssen Sie den Ivy-Modus aktivieren, indem Sie den Anweisungen hier folgen.
Sie sollten Ihr tsconfig.*.json nicht ändern müssen.
Die Tatsache, dass ... is not a known angular element angezeigt wurde, bedeutet, dass Sie sich nicht im Ivy-Modus befinden.
Um festzustellen, in welchem ​​Modus Sie sich befinden, rufen Sie das Bedienfeld Output und suchen Sie nach dem Angular-Sprachdienst. Es sollte Ivy erwähnen. (siehe Screenshot unten).
Ihr Projekt muss nicht Ivy verwenden, um den Ivy-Sprachdienst zu verwenden, aber Sie müssen Angular> = v9 verwenden.

Wenn nach Überprüfung aller oben genannten Punkte die Erweiterung immer noch nicht wie erwartet funktioniert, öffnen Sie bitte ein neues Problem, um die Triage zu unterstützen und das Rauschen zu reduzieren. Vielen Dank!

@kyliau danke, ich hatte das sicherlich verpasst.