Vscode-ng-language-service: Neu exportierte Modulkomponenten, die vom Sprachdienst in HTML-Vorlagen nicht erkannt wurden

Können Sie mir einen Link zu einem Repository senden, das dieses Problem reproduziert, oder eine ZIP-Datei anhängen, die ich entpacken kann, um dies zu demonstrieren?

Überprüfen Sie, ob genau dieses Problem in VSCode aufgetreten ist, indem Sie der gleichen Empfehlung (Modul zum Erstellen und Anwenden spezifischer Materialien) folgen wie bei @ tsvetan-ganev.

@chuckjaz , hier ist ein komprimiertes Projekt, das ich von plnkr heruntergeladen habe, weil ich nicht herausfinden konnte, wie ich den Link zum eigentlichen Projekt dort teilen kann. Entschuldigen Sie die Unannehmlichkeiten, aber ich habe buchstäblich 20 Minuten damit verbracht, einen Link zu meinem Projekt zu teilen.
ng-material.zip

@ tsvetan-ganev Ich konnte das Problem mit der von Ihnen bereitgestellten ZIP-Datei nicht reproduzieren, da sie kein vollständiges Projekt enthält. Können Sie eine Datei mit gültigen Dateien package.json und tsconfig.json einfügen?

Ich habe einen verwandten Fehler gefunden, https://github.com/angular/angular/issues/15969. Dies lag daran, dass @angular/animations nicht neben @angular/material installiert wurde.

Ich denke, der Sprachdienst wendet die tsconfig compilerOptions nicht korrekt an. Ich habe dort eine Pfadzuordnung und Module, die mit dieser Zuordnung importiert wurden, werden nicht erkannt, was für mich zu dem hier beschriebenen Problem führt.

@chuckjaz : Ich habe das Problem hier reproduziert: https://github.com/mjamin/vscode-ng-language-service-repro

Die Datei tsconfig.json definiert eine Pfadzuordnung , die in BarModule . Die in diesem Modul deklarierte Komponente wird vom Sprachdienst in app.component.html nicht erkannt

@mjamin hast du schon einen fix?

Ich habe auch dieses Problem. Es scheint immer dann aufzutreten, wenn es gemeinsam genutzte Module gibt, die Sie ebenfalls in jede Komponente importieren. Es sieht so aus, als würde der Dienst Definitionen ignorieren, die von importierten Modulen bereitgestellt werden, die erneut exportiert werden. Ich habe ein freigegebenes Modul erstellt, das importierte und deklarierte Elemente (einschließlich CommonModule, ein fragliches Modul) erneut exportiert. Wenn ich dieses Modul in andere Module importiere, versteht Angular (4) die Importe, aber der Angular Language Service kann sie nicht finden CommonModule oder meine benutzerdefinierte Komponente, obwohl sie in mein freigegebenes Modul exportiert werden.

@chuckjaz @mjamin Ich habe das Problem anders reproduziert und festgestellt, dass es (glaube ich) der Beschreibung https://github.com/Nerketur/shared-ng-module-test besser entspricht

Es scheint nichts mit Compileroptionen zu tun zu haben, da dieses gesamte Projekt standardmäßig alles verwendet.

Wenn Sie sagten, dass ALS CommonModule / Ihre benutzerdefinierte Komponente nicht finden kann, bedeutet dies, dass die automatische Vervollständigung von ALS nicht funktioniert, wenn Sie versuchen, die CommonModule / benutzerdefinierte Komponente zu verwenden?

Die automatische Vervollständigung funktioniert nicht und rote Fehlerlinien werden mit dem Fehler angezeigt:
"[Angular]
'App-Test' ist kein bekanntes Element:

1. Wenn 'App-Test' eine Angular-Komponente ist, stellen Sie sicher, dass sie Teil dieses Moduls ist.
2. Wenn 'App-Test' eine Webkomponente ist, fügen Sie 'CUSTOM_ELEMENTS_SCHEMA' zu den '@ NgModule.schemas' dieser Komponente hinzu, um diese Nachricht zu unterdrücken. "

(mit dem Repo, das ich gerade zur Verfügung gestellt habe)

Ich bin gerade dabei, dieses Projekt auf die Verwendung der neuen Typoskript-Plugin-Architektur zu konvertieren, und habe diese Fehler nur langsam behoben. Das tut mir leid.

Ich werde den Rückstand überwinden, sobald wir die Plugin-Architektur sortiert haben.

@ Chuckjaz keine Sorge. Ich bin dankbar, dass Sie sich so viel Mühe geben. Es kommt dorthin;)

Gibt es eine Problemumgehung dafür?

Auch mit diesem Problem. Ich frage mich nur, ob es ein Update gibt, da ich dieses Plugin gerne weiter verwenden würde.

Ich denke, dies behebt das Problem: https://github.com/angular/vscode-ng-language-service/issues/108

Verwenden Sie einfach relative Pfade, wenn Sie alles importieren, einschließlich gemeinsam genutzter Module, und importieren Sie diese gemeinsam genutzten Module selbst, dh alle Importe sollten relative Pfade haben. Und dann werden die Reexporte erkannt.

@ tx8821 das hat funktioniert danke. Gut genug für jetzt! Ich bin nur froh, dass ich es wieder verwenden kann, bei weitem das beste Feature von v4!

@ tx8821 danke für die lösung! Dies ist jedoch keine Lösung, sondern nur eine weitere Krücke im Code. Wartet auf echte Lösung

Wenn Sie das gleiche Problem haben, würden wir gerne einen Fix sehen, anstatt relative Pfade zu verwenden (ugh!). Vielen Dank für Ihre bisherige harte Arbeit! :) :)

Ionic 4 Multi-App (Monorepo) hat mich hierher gebracht.
Leider benötigt Ionic für jede App eine package.json. Mit anderen Worten: Ich habe 3 Projekte in einem. 2 Apps und der Root. Jedes Paket json ist mehr oder weniger gleich. Wie auch immer ... das ist meine Arbeitsbereichsstruktur (Snippet):

root
|- apps
|  |- app1
|  |  |- package.json
|  |  |- tsconfig.json
|  |- app2
|     |- package.json
|     |- tsconfig.json
|- lib
|  |- (export stuff like components)
|- package.json
|- tsconfig.json
|- angular.json (with all apps defined)

tsconfig.json einer App:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "paths": {
      "@lib/*": ["../../lib/*"]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Ich kann die HelloWorldComponent aus lib importieren.
Aber in HTML bekomme ich den Fehler:

'app-hello-world' is not a known element:
1. If 'app-hello-world' is an Angular component, then verify that it is part of this module.
2. If 'app-hello-world' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.Angular

Der Angular-Language-Service sollte funktionieren, da die HelloWorldComponent in app.module.ts deklariert ist. Seltsam. Vielleicht liegt es daran, dass sich der Ordner außerhalb der App src befindet? Der Aliaspfad @lib ist nur eine Verknüpfung. Ich habe es auch ohne direkten Import der Komponente versucht. Immer noch Fehler.

Vielleicht sollte dies ein neues Problem sein?

Wir haben benutzerdefinierte Logik zum Erkennen und Parsen von tsconfig.json implementiert und dabei Pfadzuordnungen verpasst.
Dies ist bei der heute veröffentlichten neuen Erweiterung nicht mehr der Fall.
Da die ursprüngliche Ausgabe älter als zwei Jahre ist, möchte ich sie schließen.
Bitte melden Sie ein neues Problem an, wenn in der neuen Erweiterung noch ein ähnliches Verhalten vorliegt.
Vielen Dank!

Verwandte https://github.com/angular/vscode-ng-language-service/issues/14#issuecomment -577942244

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