typescript - Angular monorepo error TS6059: File 'ng-youtube-api.service.ngtypecheck.ts' tidak berada di bawah 'rootDir'. 'rootDir' diharapkan berisi semua file sumber

Saya telah membuat 3 pustaka/paket Angular:

  • @example/ng-youtube-player yang berisi YoutubePlayerComponent dan YoutubeApiService
  • @example/ng-dailymotion-player yang berisi DailymotionPlayerComponent dan DailymotionApiService
  • @example/ng-vimeo-player yang berisi VimeoPlayerComponent dan VimeoApiService

Sekarang saya ingin membuat sebuah pustaka yang berisi VideoPlayerComponent, menggunakan hanya paket yang menyediakan YoutubeApiService, DailymotionApiService dan VimeoApiService. Untuk tidak menyertakan komponen lain secara tidak perlu, saya ingin membagi masing-masing 3 pustaka itu, sehingga saya hanya dapat memasang kelas Service.

Anda bisa berargumen bahwa Angular menggunakan tree-shaking, jadi komponen-komponen itu tidak akan dibundel dengan aplikasi bagaimanapun, tetapi bagaimanapun saya lebih suka memiliki dependensi tersebut dipisahkan untuk ringkasnya.

Saya telah mencoba membuat monorepo yang berisi 2 pustaka dan aplikasi test, tetapi sejak saya merujuk layanan dari pustaka lain, build gagal. Saya telah membuat workspace contoh yang sangat dasar untuk mereproduksi masalah ini:

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

Build gagal dengan banyak kesalahan berikut:

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

Ada 2 masalah utama di sini:

  1. Anda harus membangun setiap proyek secara terpisah, dalam urutan yang benar
  2. Anda tidak dapat menggunakan layanan dari perpustakaan di perpustakaan lain

Saya sudah membaca pertanyaan serupa berikut, tetapi itu tidak membantu saya:

  • 'rootDir' diharapkan berisi semua berkas sumber

Kode

Kode uji saya dihosting di sini. Semua instruksi untuk mereproduksi masalah dicatat dalam blok kode di atas. Perubahan utama yang saya buat ada di tsconfig.json root:

{
  ...
  "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"
      ]
    }
  }
}

Saya sudah menyiapkan sebuah workspace yang berisi sebuah library dan aplikasi, di mana aplikasi mengonsumsi kelas dari library tanpa masalah apa pun (lihat 3 repositori di atas pertanyaan), tetapi sejak saat sebuah library mengonsumsi kelas dari library lain, build menjadi rusak.

Bagaimana saya bisa memperbaiki ini, dan memiliki satu ruang kerja dengan 2 pustaka dan sebuah aplikasi pengujian?

Jawaban #1

jika Anda menggunakan nx dan mengalami kesalahan yang dilaporkan oleh OP...

saya juga mengalami masalah ini...

itu sangat menyiksa saya... saya tidak bisa mengerti kenapa nx tidak membangun dengan benar... itu memberi saya banyak kesalahan tentang salah satu proyek yang saya referensikan @scope1/lib2 dan semua file .ts-nya berada di luar proyek yang mereferensikannya... saya juga memperhatikan bahwa dep-graph memiliki @scope1/lib2 tetapi tidak ada panah ketergantungan dari perpustakaan yang mereferensikannya...

saya menemukan perbaikan ini:

rm -rf node_modules/.cache

Saya menebak nx memiliki sesuatu di cache yang salah... setelah dihapus, dep-graph akhirnya menampilkan tautan dengan benar dan build mulai bekerja

Jawaban #2

Mungkin saya sedikit terlambat di sini, tetapi saya mengalami masalah ini dan saya hanya menggunakan Angular CLI biasa untuk mengelola workspace saya...setelah mencari BANYAK dan menelusuri dokumentasi Typescript tentang Resolusi Modul, saya percaya saya mengerti apa yang terjadi:

Pemetaan jalur adalah hal yang biasa untuk Perpustakaan Angular (terutama saat menggunakan strategi titik masuk sekunder), tetapi perilakunya agak rumit. Hal-hal menjadi lebih rumit ketika kita memiliki beberapa perpustakaan dalam workspace yang sama: kadang-kadang IDE menjadi gila dengan kesalahan; kadang-kadang semuanya terlihat baik-baik saja, tetapi rusak saat build; kadang-kadang semuanya baik-baik saja selama build perpustakaan, tetapi semuanya meledak saat membangun aplikasi/perpustakaan konsumen.

Masalahnya adalah: konsumen membutuhkan versi build dari pustaka agar dapat berfungsi dengan baik, jadi mereka seharusnya melihat ke folder dist. Cara saya menyelesaikannya adalah:

  • Simpan pemetaan waktu pengembangan (menyelesaikan ke projects/...) di tsconfig.json root
  • Tambahkan pemetaan ke artefak yang dibangun di tsconfig yang digunakan untuk membangun pustaka konsumen (tercantum dalam konfigurasi angular.json)

IDE senang, ng-packagr senang hahahahh

Salam!

Artikel terkait