typescript - Angular monorepo fel TS6059: Filen 'ng-youtube-api.service.ngtypecheck.ts' ligger inte under 'rootDir'. 'rootDir' förväntas innehålla alla källfiler

Jag har skapat 3 Angular-bibliotek/paket:

  • @example/ng-youtube-player som innehåller en YoutubePlayerComponent och YoutubeApiService
  • @example/ng-dailymotion-player som innehåller en DailymotionPlayerComponent och DailymotionApiService
  • @example/ng-vimeo-player som innehåller en VimeoPlayerComponent och VimeoApiService

Nu ville jag skapa ett bibliotek som innehåller en VideoPlayerComponent, med enbart paketen som tillhandahåller YoutubeApiService, DailymotionApiService och VimeoApiService. För att inte inkludera de andra komponenterna onödigt vill jag dela upp de tre biblioteken var för sig, så att jag endast kan installera Service-klasserna.

Man skulle kunna hävda att Angular använder tree-shaking, så komponenterna kommer ändå inte att paketeras med applikationen, men ändå skulle jag helst vilja ha de beroendena separerade för korthetens skull.

Jag har försökt sätta upp ett monorepo som innehåller 2 bibliotek och en testapplikation, men från det ögonblick jag refererar till en tjänst från ett annat bibliotek misslyckas bygget. Jag har skapat ett mycket grundläggande exempel på arbetsyta för att reproducera problemet:

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

Bygget misslyckas med massor av följande fel:

✖ 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.

Det finns 2 huvudproblem här:

  1. Du måste bygga varje projekt separat, i rätt ordning
  2. Du kan inte använda tjänster från bibliotek i andra bibliotek

Jag har redan läst följande liknande fråga, men det hjälpte mig inte:

  • 'rootDir' förväntas innehålla alla källfiler

Kod

Min testkod är värd här. Alla instruktioner för att reproducera problemet är noterade i kodblocket ovan. De viktigaste ändringarna jag gjorde finns i roten 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"
      ]
    }
  }
}

Jag har redan satt upp ett arbetsutrymme som innehåller ett bibliotek och en applikation, där applikationen använder klasser från biblioteket utan några problem (se de 3 lagrarna ovanför frågan), men från det ögonblick biblioteket använder klasser från ett annat bibliotek, går bygget sönder.

Hur kan jag fixa detta och ha ett enda arbetsutrymme med 2 bibliotek och en testapplikation?

Svar #1

om du använder nx och har de fel som rapporterats av op...

jag stötte också på detta problem...

det tog livet av mig... jag kunde inte lista ut varför nx inte byggde rätt... det gav mig massor av fel om ett av mina refererade projekt @scope1/lib2 och alla dess .ts-filer som var utanför projektet som refererade det... jag märkte också att dep-graph hade @scope1/lib2 men det fanns ingen beroendepil från det refererande biblioteket...

jag hittade den här lösningen:

rm -rf node_modules/.cache

Jag gissar att nx hade något i cachen som var fel... efter att ha raderat det visade dep-grafen äntligen länken korrekt och bygget började fungera

Svar #2

Kanske är jag lite sen här, men jag upplevde det här problemet och jag använder bara vanlig Angular CLI för att hantera mitt arbetsutrymme... efter att ha sökt MYCKET och gått igenom Typescripts dokumentation om modulupplösning, tror jag att jag förstod vad som pågick:

Sökvägskartläggning är en vanlig sak för Angular-bibliotek (speciellt när man använder en strategi med sekundära ingångspunkter), men dess beteende är lite knepigt. Saker blir ännu mer komplicerade när vi har flera bibliotek i samma arbetsyta: ibland blir IDE:n galen med fel; ibland ser allt bra ut, men går sönder under byggprocessen; ibland är allt okej under bibliotekets bygg, men allt exploderar när konsumentappen/biblioteket byggs.

Problemet är: konsumenterna behöver den byggda versionen av biblioteken för att fungera korrekt, så de bör titta på dist-mappen. Sättet jag löste detta på var:

  • Behåll utvecklingstidmappningar (som pekar på projects/...) i roten tsconfig.json
  • Lägg till kartläggningar till byggda artefakter i tsconfig som används för att bygga konsumentbiblioteket (listade i angular.json-konfigurationer)

IDE:n är glad, ng-packagr är glad hahahahh

Skål!

Relaterade artiklar