Pemuatan Malas Modul Fitur dari folder "node_modules"

Jika seseorang dari Anda telah mencoba membuat perpustakaan sudut, ia mungkin menghadapi masalah dengan malas memuat Modul Fitur dari node_modules . Mari selami lebih dalam dan pergi melalui air yang gelap.

Membuat alat perpustakaan

Jika Anda tidak terbiasa dengan pertanyaan "Bagaimana cara membuat perpustakaan?" - Setidaknya ada dua alat untuk membuat perpustakaan sudut:

1. CLI sudut (ng-packagr di bawah tenda) ;
2. Langsung ng-paket ;

Anda dapat memperoleh detail lebih lanjut dengan mengklik tautan di atas, semua yang lain mari kita bergerak lebih jauh.

Modul Malas (Modul Fitur)

Jadi, Jika Anda sudah bekerja dengan Angular, Anda harus tahu tentang modul Angular dan untuk tujuan apa Anda membutuhkannya.

Modul biasanya harus menyimpan banyak komponen, layanan arahan yang mewakili bagian fungsionalitas swasembada tertentu. Seringkali pengembang membuat modul terpisah untuk fitur yang belum dimuat ke aplikasi sampai pengguna tidak akan pergi ke halaman tertentu.

Dan sekarang saatnya untuk Fitur Store (bukan tentang ini untuk saat ini) dan Modul fitur.

Jika Anda memasukkan modul Lazy Loaded ke beberapa modul induk, mereka tidak akan malas, karena Anda akan mendeklarasikannya ke dalam aplikasi dan pada saat kompilasi TypeScript ke dalam JavaScript Webpack akan menambahkan kode modul-modul tersebut ke dalam kumpulan utama dan aplikasi akan memuat semua kode itu saat startup.

Hanya satu cara yang benar untuk mendeklarasikan modul malas dalam perutean.

const routes: Routes = [ { path: 'reports', loadChildren: './reports/reports.module#ReportsModule' } ]; 

Jadi Anda memberikan string khusus yang sebenarnya "#" dan aplikasi akan tahu bahwa modul ini harus dimuat secara terpisah dari aplikasi utama.

Masalah dimulai

Semua berjalan dengan baik jika Modul Fitur adalah bagian dari kode sumber aplikasi Anda, tetapi bagaimana jika ini adalah perpustakaan yang dikompilasi yang diatur menggunakan npm? - Itu tidak bekerja dengan cara biasa.

Masalah utama bahwa ketika Anda mencoba mendaftar Modul Fitur tersebut dengan string biasa Anda akan menghadapi kesalahan.

 const routes: Routes = [ { path: 'reports', // will not work loadChildren: 'my-lib#ReportsModule' } ]; 

Ini disebabkan karena deklarasi semacam itu tidak kompatibel untuk modul yang dikompilasi.

Anda dapat membuat pembungkus dan kemudian mendeklarasikannya dalam router.

 import { ReportsModule } from "my-lib"; @NgModule({ imports: [ReportModule], exports: [ReportModule] }) export class ReportsWrapperModule { } const routes: Routes = [ { path: 'reports', loadChildren: './wrapper.module#ReportsWrapperModule' } ]; 

NAMUN, siapa yang tertarik untuk membuat 15 bungkus untuk 15 modul? - Bukan saya!

Kemungkinan solusi

Saya tidak akan menyembunyikan saya tidak membuang waktu menganalisis mengapa ini terjadi karena Webpack atau CLI Angular. Saya menemukan dua solusi yang mungkin.

Solusi # 1. Library dikompilasi dan Modul Fitur tidak memiliki modul fitur bersarang

Tautan untuk contoh yang berfungsi.

Langkah pertama menentukan tipe atribut LoadChildren apa

 type LoadChildren = string | LoadChildrenCallback; type LoadChildrenCallback = () => Type<any> | NgModuleFactory<any> | Promise<Type<any>> | Observable<Type<any>>; 

Menarik! Jadi, secara teori, dimungkinkan untuk menggunakan impor () untuk mengembalikan janji dengan modul yang diperlukan.
Kode selanjutnya harus baik-baik saja.

 const routes: Routes = [ { path: 'reports', loadChildren: () => import('my-lib').then((res) => res.ReportsModule) } ]; 

Oh, apa yang terjadi? - Kami melihat kesalahan di konsol ... Ya, ubah saja tsconfig.json

 { .. "module": "esNext", .. } 

Sekarang harus bekerja dengan baik.

Solusi # 2. Modul Fitur memiliki modul fitur bersarang (hanya dilakukan untuk perpustakaan yang tidak dikompilasi)

Tautan untuk contoh yang berfungsi.

1. Anda tidak harus mengkompilasi perpustakaan sebelum mengemas paket npm;

   
   

2. Karena sumber perpustakaan tidak dikompilasi, Anda harus memasukkannya ke dalam proses kompilasi aplikasi Anda. Cukup ubah tsconfig.app.json ;

   
   

    "exclude": [ "test.ts", "**/*.spec.ts", "../node_modules/**/*.spec.ts", "../node_modules/**/test.ts" ], "include": [ "*.ts", "./environments", "./app", "../node_modules/my-lib" ] 

   
   

3. Berita baik - tidak perlu menggunakan impor () ;

   
   

    const routes: Routes = [{ path: "reports", loadChildren: "my-lib#ReportsModule" }]; 

   
   

   Tadam!

   
   

PS Solusi ini diuji dengan Angular 7 saja.

Terima kasih atas perhatiannya, selamat menikmati.