Angular 5 - memuat modul (yang tidak diketahui pada waktu kompilasi) secara dinamis saat run-time

Apakah mungkin Angular 5 memuat modul/komponen yang tidak diketahui pada waktu kompilasi, tetapi saat runtime secara dinamis?

Saya kira ini tidak akan berhasil menggunakan webpack tetapi mungkin menggunakan system.js?

Sunting:

Ide keseluruhannya adalah untuk membangun aplikasi berbasis plugin di mana masing-masing plugin dimasukkan ke dalam folder plugin, sudut akan mengambilnya secara otomatis, tanpa harus mengkompilasi ulang dan menerapkan seluruh aplikasi sudut. Di mana plugin adalah bagian fungsi yang terpisah. Tentu saja ada navigasi rute, dll. Artinya, setelah sudut memahami ada plugin baru, ia harus menambahkan beberapa navigasi dinamis sehingga pengguna dapat menavigasi ke plugin, dll.


person user2818430    schedule 02.02.2018    source sumber


Jawaban (2)


Meskipun ada kerumitan yang terlibat, Anda bisa mencobanya. Tergantung pada basis kode Anda, saya kira. Router memperlihatkan properti config, menyimpan konfigurasi saat ini, dan metode resetConfig(routes: Routes) untuk mengatur ulang konfigurasi. Anda dapat memulai dari sana, dan menambahkan, katakanlah, komponen dengan cepat.

Namun, komponennya harus dapat dijangkau. Mungkin dibuat secara dinamis, seperti yang disebutkan dalam jawaban lain. Atau, konfigurasi Anda dapat menyertakan sesuatu seperti ini:

constructor(private router: Router) {}

private addPlugin(routePath, pluginName, pluginPath) {
    const currentConfig = this.router.config;
    currentConfig.push({
        path: routePath,
        loadChildren: `precompiled-modules/${pluginPath}#${pluginName}`,
    });
    this.router.resetConfig(currentConfig);
}

Anda harus mendapatkan pluginPath dan pluginName entah bagaimana - mungkin menghitungnya berdasarkan konvensi, mungkin pembantu backend kecil yang mendapatkan ini, mungkin arraynya sudah dikonfigurasikan sebelumnya dan sudah dimuat atau serupa. Saya juga berasumsi Anda akan memiliki sistem pengujian yang sangat bagus, untuk memastikan plugin Anda "kompatibel". Dan terakhir, ajari webpack/systemjs cara menyiapkan modul. Secara keseluruhan, hal ini bukannya tidak mungkin, namun memerlukan beberapa landasan.

Meski begitu, Angular 6 sudah dekat, dan bersamaan dengan itu, Angular Elements. Elemen akan menyediakan cara untuk mengkompilasi modul Anda sebagai komponen web dan "mengekspornya", sehingga dapat digunakan di mana saja (tidak harus di aplikasi Angular). Pikirkan plugin jQuery - ada basis jQuery.min.js yang perlu Anda muat, tetapi selain itu Anda tidak memikirkannya lagi, Anda cukup menggunakan elemen baru Anda. Ini mirip dengan Angular Elements - Anda mengekspor apa yang pada dasarnya merupakan komponen Web. Ada bagian "loader" (setara dengan jquery.min.js), dan bundel Elemen Anda. Namun komponen Anda hanyalah simpul HTML lainnya, dengan properti, atribut, pengikatan, peristiwa, Anda tidak peduli lagi, sama seperti Anda tidak peduli dengan input.

Mungkin layak untuk ditunggu, lihat dan putuskan sendiri.

person Zlatko    schedule 19.02.2018
comment
Anda membuat ini berfungsi saat runtime? Saya mencoba beberapa solusi tetapi webpack (cli) membuat chunkfiles untuk setiap referensi modul yang disebutkan di properti loadChildren. Jika saya akan memperluas router ketika saya sudah dalam runtime, saya mendapatkan pengecualian modul tidak ditemukan dan aplikasi gagal. Angular Elements terlihat sangat menjanjikan untuk memuat elemen dengan cepat! Namun dalam proyek kami, ini terutama merutekan ke 'Modul' yang baru dan/atau diperbarui - person Lars Meijdam; 03.05.2018
comment
Tidak, saya tidak mencobanya pada build produksi. Mengenai Angular Elements, sudah ada sekarang, tetapi bundelnya cukup besar (misalnya 1MB). Sedangkan untuk webpack, Anda harus membuat konfigurasi dan bermain cukup banyak untuk mendapatkan bundel yang tepat yang dapat dimuat dengan cara ini, dan Anda harus mengajari bundel utama tentang tambahan ini. Itu mungkin melibatkan beberapa pekerjaan manual juga. Mungkin tidak layak untuk sebagian besar kasus, tetapi jika Anda salah satu kasus yang layak melakukannya, maka ada baiknya juga mengotak-atik semuanya secara manual. - person Zlatko; 03.05.2018
comment
Terima kasih! Akan mendalami lebih dalam, sementara itu saya juga memposting pertanyaan tentang ini stackoverflow.com/questions/50149016/. Memang kalau soal AE, ukuran filenya masih cukup besar, tapi masih terbilang 'muda' :) - person Lars Meijdam; 03.05.2018

Anda dapat melihat Pemuatan Komponen Dinamis: https://angular.io/guide/dynamic-component-loader

Ini memungkinkan Anda menambahkan komponen secara dinamis saat runtime.

person DeborahK    schedule 02.02.2018
comment
Apakah ini akan berfungsi untuk skenario ini ketika saya membangun aplikasi sudut, menerapkannya, dan kemudian membangun satu komponen, memasukkannya ke dalam folder aplikasi dan aplikasi sudut akan mengambilnya tanpa harus mengkompilasi ulang seluruh aplikasi dan menerapkan ulang? - person user2818430; 02.02.2018
comment
P.S. Terima kasih atas kursus Angular yang luar biasa di Pluralsight :) - person user2818430; 02.02.2018
comment
Pernahkah Anda melihat diskusi di sini: stackoverflow.com/questions/41438198/ - person DeborahK; 02.02.2018
comment
Saya membuat repositori di github dengan solusi yang mungkin bisa membantu. Ia menggunakan perpustakaan Angular 6 dan 1 aplikasi dasar yang memuat perpustakaan yang dibundel UMD dengan malas; github.com/lmeijdam/angular-umd-dynamic-example Jika sudah ada saran, silakan menambahkan! - person Lars Meijdam; 09.05.2018