Angular Error TS6059: File xxx is not under ‘rootDir’ lösen

Wenn man in Angular ein Monorepo erstellt und mit mehreren Libraries arbeitet, kann es passieren das man diesen Fehler bekommt wenn eine Library versucht auf Dateien der anderen Library zuzugreifen.

Beispielsweise wurde von uns eine Bibliothek automatisch von Swagger erstellt, welche alle API-Funktionen enthielt, während wir unsere eigene für von verschiedenen Unterprojekten gemeinsam genutzte Funktionen hatten. Wollten wir jedoch in unserer eigenen Bibliothek auch die API-Funktionen von Swagger verwenden, kam dieser Fehler.

Anders als man eventuell erwartet, kann man das rootDir jedoch auch nicht in der tsconfig einstellen. Es ergibt sich anscheinend automatisch mit dem Verzeichnis, in dem sich das in ng-package.json eingestellt „entryFile“ befindet. Sehen wir uns dazu ein Beispiel an:

App
- apps
-- app1
- libs
-- lib1
--- src
---- index.ts
--- ng-package.json (entryFile = 'src/index.ts')
-- lib2
--- ng-package.jsonCode-Sprache: JavaScript (javascript)

Lib1 möchte jetzt gerne z.B. Model-Definitionen von Lib2 verwenden. Da in ng-package.json das entryFile definiert ist mit der index.ts in libs/lib1/src, wird das rootDir der Library 1 automatisch auf dieses Verzeichnis gesetzt. Es müssen sich deshalb alle Dateien, welche für den Build verwendet werden dürfen, auch in diesem Verzeichnis befinden. Da Lib2 sich aber nicht dort befindet, kommt der Fehler:

error TS6059: File ‘/home/user/App/libs/lib2/src/util.ts’ is not under ‘rootDir’ ‘/home/user/App/libs/lib1/src’. ‘rootDir’ is expected to contain all source files

Lösung

Eine Möglichkeit, dieses Problem zu lösen, ist es statt der index.ts eine neue Datei z.B. ’shared-index.ts‘ im Verzeichnis /libs zu erstellen und diese als entryFile anzugeben. Die shared-index.ts enthält dann folgende Zeile:

import './lib1/src/index.ts';Code-Sprache: JavaScript (javascript)

Da sich dieses entryFile nun über lib1 und lib2 befindet, setzt der Compiler /libs als rootDir und beschwert sich nun nicht mehr, dass Files aus lib2 nicht im rootDir sind.

Die Struktur sieht nun folgendermaßen aus:

App
- apps
-- app1
- libs
- shared-index.ts
-- lib1
--- src
---- index.ts
--- ng-package.json (entryFile = '../shared-index.ts')
-- lib2
--- ng-package.jsonCode-Sprache: JavaScript (javascript)

Vielen Dank auch an https://medium.com/@thearunmalik/angular-monorepo-multiple-libs-and-rootdir-issue-7b8270cbc167, wo wir diese Lösung gelesen haben.

Falls jemand einen anderen Lösungsansatz weiß, würde ich mich über ein kurzes Mail freuen!