typescript - Angular monorepo chyba TS6059: Súbor 'ng-youtube-api.service.ngtypecheck.ts' nie je pod 'rootDir'. Očakáva sa, že 'rootDir' bude obsahovať všetky zdrojové súbory

Vytvoril som 3 knižnice/balíky pre Angular:

  • @example/ng-youtube-player obsahujúci YoutubePlayerComponent a YoutubeApiService
  • @example/ng-dailymotion-player obsahujúci DailymotionPlayerComponent a DailymotionApiService
  • @example/ng-vimeo-player obsahujúci VimeoPlayerComponent a VimeoApiService

Teraz som chcel vytvoriť knižnicu obsahujúcu VideoPlayerComponent, používajúc iba balíky poskytujúce YoutubeApiService, DailymotionApiService a VimeoApiService. Aby som nezahŕňal ostatné komponenty zbytočne, chcem rozdeliť tie 3 knižnice každú, aby som mohol nainštalovať len triedy Service.

Dalo by sa tvrdiť, že Angular používa tree-shaking, takže komponenty ani tak nebudú zabalené do aplikácie, ale aj tak by som radšej mal tieto závislosti oddelené pre stručnosť.

Skúsil som nastaviť monorepo obsahujúce 2 knižnice a testovaciu aplikáciu, ale od momentu, keď odkazujem na službu z inej knižnice, zostavovanie zlyhá. Vytvoril som veľmi jednoduché ukážkové pracovné prostredie, aby som problém reprodukoval:

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

Kompilácia zlyháva s množstvom nasledujúcich chýb:

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

Tu sú dva hlavné problémy:

  1. Musíte vybudovať každý projekt samostatne, v správnom poradí
  2. Nemôžete používať služby z knižníc v iných knižniciach

Už som si prečítal nasledujúcu podobnú otázku, ale nepomohla mi:

  • Očakáva sa, že 'rootDir' bude obsahovať všetky zdrojové súbory

Kód

Môj testovací kód je umiestnený tu. Všetky pokyny na reprodukovanie problému sú uvedené v bloku kódu vyššie. Hlavné zmeny, ktoré som urobil, sú v koreňovom súbore 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"
      ]
    }
  }
}

Už som nastavil pracovný priestor obsahujúci knižnicu a aplikáciu, kde aplikácia bez problémov používa triedy z knižnice (pozri 3 repozitáre na vrchu otázky), ale od momentu, keď knižnica používa triedy z inej knižnice, je build poškodený.

Ako môžem toto opraviť a mať jedno pracovné prostredie s 2 knižnicami a testovacou aplikáciou?

Odpoveď č. 1

ak používate nx a máte chyby, o ktorých informoval pôvodný príspevok...

tiež som sa stretol s týmto problémom...

Zabíjalo ma to... nevedel som prísť na to, prečo nx nekompiloval správne... dávalo mi to množstvo chýb ohľadom jedného z mojich referencovaných projektov @scope1/lib2 a všetkých jeho .ts súborov, že sú mimo projektu, ktorý ich referencoval... tiež som si všimol, že dep-graph mal @scope1/lib2, ale nebola tam žiadna šípka závislosti z referencujúcej knižnice...

našiel som toto riešenie:

rm -rf node_modules/.cache

Tipujem, že nx mal v cache niečo nesprávne... po vymazaní sa dep-graph konečne správne zobrazil a build začal fungovať.

Odpoveď č. 2

Možno som tu trochu neskoro, ale zažíval som tento problém a používam len bežný Angular CLI na správu môjho pracovného priestoru... po veľkom hľadaní a prechádzaní dokumentácie TypeScriptu o riešení modulov, verím, že som pochopil, čo sa deje:

Mapovanie ciest je bežná vec pre Angular knižnice (najmä pri použití stratégie sekundárnych vstupných bodov), ale jeho správanie je trochu zložité. Veci sa ešte viac komplikujú, keď máme viacero knižníc v rovnakom pracovnom priestore: niekedy IDE začne ukazovať množstvo chýb; niekedy veci vyzerajú v poriadku, ale zlyhajú počas zostavovania; niekedy je všetko v poriadku počas zostavovania knižnice, ale všetko sa pokazí pri zostavovaní aplikácie/knižnice používateľa.

Problém je: spotrebitelia potrebujú zostavenú verziu knižníc, aby správne fungovali, takže by sa mali pozerať na priečinok dist. Riešenie, ktoré som našiel, bolo:

  • Udržiavajte mapovania počas vývoja (resolving na projects/...) v koreňovom tsconfig.json
  • Pridajte mapovania k vytvoreným artefaktom v tsconfig používanom na zostavenie knižnice spotrebiteľa (uvedenej v konfiguráciách angular.json)

IDE je šťastné, ng-packagr je šťastné hahahahh

Na zdravie!

Súvisiace články