Website-Suche

typescript - Angular-Monorepo Fehler TS6059: Datei 'ng-youtube-api.service.ngtypecheck.ts' befindet sich nicht unter 'rootDir'. 'rootDir' soll alle Quelldateien enthalten

Ich habe 3 Angular-Bibliotheken/Packages erstellt:

  • @example/ng-youtube-player enthält eine YoutubePlayerComponent und YoutubeApiService
  • @example/ng-dailymotion-player, das eine DailymotionPlayerComponent und einen DailymotionApiService enthält
  • @example/ng-vimeo-player enthält eine VimeoPlayerComponent und einen VimeoApiService

Jetzt wollte ich eine Bibliothek erstellen, die eine VideoPlayerComponent enthält, wobei ich nur die Pakete verwende, die den YoutubeApiService, DailymotionApiService und VimeoApiService bereitstellen. Um die anderen Komponenten nicht unnötig einzuschließen, möchte ich die 3 Bibliotheken jeweils aufteilen, sodass ich nur die Service-Klassen installieren kann.

Man könnte argumentieren, dass Angular Tree-Shaking verwendet, sodass die Komponenten sowieso nicht mit der Anwendung gebündelt werden, aber trotzdem hätte ich diese Abhängigkeiten lieber aus Gründen der Übersichtlichkeit getrennt.

Ich habe versucht, ein Monorepo einzurichten, das 2 Bibliotheken und eine Testanwendung enthält, aber sobald ich einen Service aus einer anderen Bibliothek referenziere, schlägt der Build fehl. Ich habe eine sehr einfache Beispiel-Workspace erstellt, um das Problem zu reproduzieren:

git clone https://github.com/PieterjanDeClippel/angular-monorepo-test
cd angular-monorepo-test
npm install
ng build @mintplayer/ng-youtube-api
ng build @mintplayer/ng-youtube-player
ng build ng-youtube-player-demo

All projects compile successfully
Now go to the NgYoutubePlayerComponent and uncomment the injection parameter in the constructor (line 16)

ng build @mintplayer/ng-youtube-player

Der Build schlägt mit einer Menge der folgenden Fehler fehl:

✖ Compiling with Angular sources in Ivy partial compilation mode.
projects/mintplayer/ng-youtube-api/src/lib/ng-youtube-api.service.ts:1:1 - error TS6059: File 'C:/Users/user/source/repos/Tmp/mintplayer-ng-youtube-player/projects/mintplayer/ng-youtube-api/src/lib/ng-youtube-api.service.ngtypecheck.ts' is not under 'rootDir' 'C:\Users\user\source\repos\Tmp\mintplayer-ng-youtube-player\projects\mintplayer\ng-youtube-player\src'. 'rootDir' is expected to contain all source files.
1 import { Injectable } from '@angular/core';
 
projects/mintplayer/ng-youtube-api/src/public-api.ts:1:1 - error TS6059: File 'C:/Users/user/source/repos/Tmp/mintplayer-ng-youtube-player/projects/mintplayer/ng-youtube-api/src/public-api.ngtypecheck.ts' is not under 'rootDir' 'C:\Users\user\source\repos\Tmp\mintplayer-ng-youtube-player\projects\mintplayer\ng-youtube-player\src'. 'rootDir' is expected to contain all source files.

Es gibt hier 2 Hauptprobleme:

  1. Du musst jedes Projekt separat in der richtigen Reihenfolge bauen
  2. Sie können keine Dienste aus Bibliotheken in anderen Bibliotheken verwenden

Ich habe die folgende ähnliche Frage bereits gelesen, aber sie hat mir nicht weitergeholfen:

  • 'rootDir' soll alle Quelldateien enthalten

Code

Mein Testcode ist hier gehostet. Alle Anweisungen zur Reproduktion des Problems sind im obigen Codeblock angegeben. Die Hauptänderungen, die ich vorgenommen habe, befinden sich in der Root-tsconfig.json:

{
  ...
  "compilerOptions": {
    ...,
    "paths": {
      "@mintplayer/ng-youtube-api": [
        "projects/mintplayer/ng-youtube-api/src/public-api.ts"
      ],
      "@mintplayer/ng-youtube-player": [
        "projects/mintplayer/ng-youtube-player/src/public-api.ts"
      ]
    }
  }
}

Ich habe bereits einen Arbeitsbereich eingerichtet, der eine Bibliothek und eine Anwendung enthält, wobei die Anwendung Klassen aus der Bibliothek ohne Probleme verwendet (siehe die 3 Repositories oben in der Frage), aber ab dem Moment, in dem eine Bibliothek Klassen aus einer anderen Bibliothek verwendet, ist der Build fehlerhaft.

Wie kann ich das beheben und einen einzigen Arbeitsbereich mit 2 Bibliotheken und einer Testanwendung haben?

Antwort #1

wenn Sie nx verwenden und die vom OP gemeldeten Fehler haben...

Ich bin auch auf dieses Problem gestoßen...

Es hat mich fertiggemacht... Ich konnte nicht herausfinden, warum nx nicht richtig gebaut hat... Es hat mir Unmengen von Fehlern über eines meiner referenzierten Projekte @scope1/lib2 gegeben und alle seine .ts-Dateien befanden sich außerhalb des Projekts, das es referenzierte... Ich habe auch bemerkt, dass das Dep-Graph @scope1/lib2 hatte, aber kein Abhängigkeits-Pfeil von der referenzierenden Bibliothek vorhanden war...

Ich habe diese Lösung gefunden:

rm -rf node_modules/.cache

Ich vermute, dass NX etwas Falsches im Cache hatte... nachdem ich es gelöscht habe, zeigte der Abhängigkeitsgraph die Verbindung endlich richtig an und der Build begann zu funktionieren.

Antwort #2

Vielleicht bin ich hier ein bisschen spät, aber ich hatte dieses Problem hier und ich benutze nur das normale Angular CLI, um meinen Workspace zu verwalten... nach viel Suche und dem Durchgehen der Typescript-Dokumentation zur Modulauflösung glaube ich, dass ich verstanden habe, was vor sich geht:

Pfadzuordnung ist eine gewöhnliche Sache für Angular-Bibliotheken (besonders bei Verwendung einer Strategie mit sekundären Einstiegspunkten), aber ihr Verhalten ist etwas knifflig. Die Dinge werden noch komplizierter, wenn wir mehrere Bibliotheken im selben Arbeitsbereich haben: Manchmal spielt die IDE verrückt mit Fehlern; manchmal sieht alles gut aus, bricht aber beim Build zusammen; manchmal ist während des Builds der Bibliothek alles in Ordnung, aber alles explodiert, wenn die Verbraucher-App/Bibliothek gebaut wird.

Das Problem ist: Verbraucher benötigen die gebaute Version der Bibliotheken, um richtig zu funktionieren, daher sollten sie sich den dist-Ordner ansehen. Die Lösung, die ich gefunden habe, war:

  • Behalte Entwicklungszeit-Zuordnungen (aufgelöst zu projects/...) in der Root-tsconfig.json
  • Fügen Sie Zuordnungen zu erstellten Artefakten in der tsconfig hinzu, die zum Erstellen der Consumer-Bibliothek verwendet wird (in den Konfigurationen der angular.json aufgeführt)

Die IDE ist glücklich, ng-packagr ist glücklich hahahahh

Prost!

Verwandte Artikel