Menerapkan arsitektur plugin / sistem plugin / kerangka pluggable di Angular 2, 4, 5, 6

Pembaruan 5/24/2018: Kami sekarang +3 versi Angular dari pos asli saya dan masih belum memiliki solusi final yang bisa diterapkan. Lars Meijdam (@LarsMeijdam) telah datang dengan pendekatan yang menarik yang tentunya patut dilihat. (Karena masalah kepemilikan, ia harus menghapus sementara repositori GitHub tempat ia memposting sampelnya. Namun, Anda dapat mengirim pesan kepadanya secara langsung jika Anda ingin salinannya. Silakan lihat komentar di bawah ini untuk info lebih lanjut.)

Perubahan arsitektur terbaru di Angular 6 memang membawa kita lebih dekat ke solusi. Selain itu, Elemen Sudut ( https://angular.io/guide/elements ) menyediakan beberapa fungsionalitas komponen - meskipun tidak cukup seperti yang saya jelaskan di posting ini.

Jika ada orang dari tim Angular yang luar biasa menemukan ini, harap perhatikan bahwa tampaknya ada banyak orang lain yang juga sangat tertarik dengan fungsi ini. Mungkin layak dipertimbangkan untuk jaminan simpanan.

Saya ingin menerapkan pluggable (plug-in) kerangka dalam Angular 2, Angular 4, Angular 5, atau Angular 6aplikasi.

(Kasus penggunaan spesifik saya untuk mengembangkan kerangka kerja pluggable ini adalah bahwa saya perlu mengembangkan sistem manajemen konten mini. Untuk sejumlah alasan yang tidak perlu diuraikan di sini, Angular 2/4/5/6sangat cocok untuk sebagian besar kebutuhan sistem itu.)

Dengan kerangka kerja pluggable (atau arsitektur plug-in), secara khusus saya maksudkan sistem yang memungkinkan pengembang pihak ketiga untuk membuat atau memperluas fungsionalitas aplikasi primer melalui penggunaan komponen pluggable tanpa memiliki akses langsung ke atau pengetahuan kode sumber aplikasi utama atau kerja batin .

(Ungkapan tentang " tanpa memiliki akses langsung ke atau pengetahuan tentang kode sumber aplikasi atau pekerjaan dalam " adalah tujuan inti.)

Contoh kerangka kerja pluggable termasuk sistem manajemen konten umum seperti WordPressatau Drupal.

Situasi yang ideal (seperti dengan Drupal) adalah sederhana untuk dapat menempatkan komponen-komponen yang dapat dicolokkan ini (atau plug-in) ke dalam folder, membuat aplikasi mendeteksi secara otomatis atau menemukannya, dan secara ajaib "bekerja". Setelah ini terjadi dalam semacam hot-pluggable, yang berarti ketika aplikasi sedang berjalan, akan lebih optimal.

Saat ini saya mencoba menentukan jawaban ( dengan bantuan Anda ) untuk lima pertanyaan berikut.

1. Kepraktisan: Apakah kerangka kerja plugin untuk suatu Angular 2/4/5/6aplikasi bahkan praktis? (Sampai sekarang, saya belum menemukan cara praktis untuk membuat kerangka kerja yang benar-benar dapat dicocokkan dengan Angular2/4/5/6.)
2. Tantangan yang Diharapkan: Tantangan apa yang mungkin dihadapi seseorang dalam mengimplementasikan kerangka kerja plugin untuk suatu Angular 2/4/5/6aplikasi?
3. Strategi Implementasi: Teknik atau strategi spesifik apa yang dapat digunakan untuk mengimplementasikan kerangka kerja plugin untuk suatu Angular 2/4/5/6aplikasi?
4. Praktik Terbaik: Apa praktik terbaik untuk menerapkan sistem plugin untuk Angular 2/4/5/6aplikasi?
5. Teknologi Alternatif: Jika kerangka kerja plugin tidak praktis dalam suatu Angular 2/4/5/6aplikasi, teknologi apa yang relatif setara (mis. React) Mungkin cocok untuk aplikasi Web modern yang sangat reaktif ?

Secara umum, penggunaan Angular 2/4/5/6sangat diinginkan karena:

• secara alami sangat cepat - sangat menyenangkan.
• ini mengkonsumsi bandwidth yang sangat sedikit (setelah beban awal)
• ia memiliki jejak yang relatif kecil (setelah AOTdan tree shaking) - dan jejak itu terus menyusut
• ini sangat fungsional, dan tim Angular dan komunitas terus tumbuh pesat dalam ekosistemnya
• ini bekerja dengan baik dengan banyak teknologi Web terbaik dan terbaru seperti TypeScriptdanObservables
• Angular 5 sekarang mendukung pekerja layanan ( https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7 )
• didukung oleh Google, kemungkinan akan didukung dan ditingkatkan hingga masa depan

Saya sangat ingin menggunakan Angular 2/4/5/6untuk proyek saya saat ini. Jika saya dapat menggunakan Angular 2/4/5/6, saya juga akan menggunakan Angular-CLIdan mungkin Angular Universal(untuk rendering sisi server.)

Inilah pemikiran saya, sejauh ini, mengenai pertanyaan di atas. Harap tinjau dan berikan umpan balik dan pencerahan Anda.

• Angular 2/4/5/6aplikasi mengkonsumsi paket - tetapi ini tidak selalu sama dengan mengizinkan plugin dalam suatu aplikasi. Plugin di sistem lain (misalnya Drupal) pada dasarnya dapat ditambahkan dengan menjatuhkan folder plugin ke direktori modul umum di mana ia secara otomatis "diambil" oleh sistem. Dalam Angular 2/4/5/6, sebuah paket (seperti plugin mungkin) biasanya diinstal melalui npm, ditambahkan ke package.json, dan kemudian diimpor secara manual ke dalam aplikasi - seperti pada app.module. Ini jauh lebih rumit daripada Drupalmetode menjatuhkan folder dan memiliki sistem yang secara otomatis mendeteksi paket. Semakin rumit menginstal plugin, semakin kecil kemungkinan orang akan menggunakannya. Akan jauh lebih baik jika ada jalan untuk ituAngular 2/4/5/6untuk secara otomatis mendeteksi dan menginstal plugin. Saya sangat tertarik untuk menemukan metode yang memungkinkan non-pengembang untuk menginstal Angular 2/4/5/6aplikasi dan menginstal plugin apa pun yang dipilih tanpa harus memahami semua arsitektur aplikasi.

• Secara umum, salah satu manfaat dari menyediakan arsitektur pluggable, adalah sangat mudah bagi pengembang pihak ke-3 untuk memperluas fungsionalitas sistem. Jelas, pengembang ini tidak akan terbiasa dengan semua seluk-beluk kode untuk aplikasi yang mereka gunakan. Setelah plugin dikembangkan, pengguna lain yang bahkan kurang teknis dapat menginstal aplikasi dan plugin yang dipilih. Namun, Angular 2/4/5/6ini relatif rumit dan memiliki kurva belajar yang sangat panjang. Untuk hal-hal menyulitkan lanjut, sebagian besar produksi Angular 2/4/5/6aplikasi juga memanfaatkan Angular-CLI, Angular Universaldan WebPack. Seseorang yang menerapkan plugin mungkin harus memiliki setidaknya beberapa pengetahuan dasar tentang bagaimana semua ini cocok bersama - bersama dengan pengetahuan kerja yang kuat tentangTypeScriptdan keakraban yang wajar dengan NodeJS. Apakah persyaratan pengetahuan sangat ekstrem sehingga tidak ada pihak ketiga yang ingin mengembangkan plugin?

• Sebagian besar plugin kemungkinan memiliki beberapa komponen sisi server (misalnya untuk menyimpan / mengambil data terkait plugin) serta beberapa output sisi klien. Angular 2/4/5secara khusus (dan sangat) mencegah pengembang dari menyuntikkan templat mereka sendiri pada saat runtime - karena ini menimbulkan risiko keamanan yang serius. Untuk menangani banyak jenis output yang dapat ditampung oleh plugin (misalnya tampilan grafik), tampaknya memungkinkan pengguna untuk membuat konten yang disuntikkan ke aliran respons, dalam satu bentuk yang lain, mungkin diperlukan. Saya bertanya-tanya bagaimana mungkin untuk mengakomodasi kebutuhan ini tanpa Angular 2/4/5/6mekanisme keamanan yang sobek-sobek .

• Sebagian besar Angular 2/4/5/6aplikasi produksi sudah dikompilasi menggunakan kompilasi Ahead of Time( AOT). (Mungkin semua harus.) Saya tidak yakin bagaimana plugin dapat ditambahkan ke (atau diintegrasikan dengan) aplikasi yang telah dikompilasi. Skenario terbaik akan melibatkan kompilasi plugin secara terpisah dari aplikasi utama. Namun, saya tidak yakin bagaimana membuat ini bekerja. Sebuah fallback mungkin untuk mengkompilasi ulang seluruh aplikasi dengan plugin yang disertakan tetapi hal itu sedikit mempersulit pengguna administratif yang hanya ingin menginstal aplikasi (di servernya sendiri) bersama dengan plugins yang dipilih.

• Dalam suatu Angular 2/4/5/6aplikasi, terutama yang sudah dikompilasi sebelumnya, satu bagian kode yang salah atau bertentangan dapat merusak seluruh aplikasi. Angular 2/4/5/6aplikasi tidak selalu paling mudah untuk di-debug. Penerapan plugin yang berperilaku buruk dapat menghasilkan pengalaman yang sangat tidak menyenangkan. Saat ini saya tidak mengetahui mekanisme untuk menangani plugin yang berperilaku buruk.

Saya membuat repositori di github dengan solusi yang mungkin bisa membantu. Ia menggunakan Angular 6 libraries dan 1 aplikasi basis yang memuat pustaka UMD yang dibundel dengan malas; https://github.com/lmeijdam/angular-umd-dynamic-example

Jika Anda memiliki saran, silakan tambahkan!

🛠️ Github demo sudut-plugin-arsitektur

Mungkin Ivy dapat mengubah sesuatu tetapi untuk saat ini saya menggunakan solusi yang menggunakan Angular CLI Custom Builder dan memenuhi persyaratan berikut:

• AOT
• hindari kode duplikat (paket seperti @ angular / core {common, form, router}, rxjs, tslib)
• menggunakan pustaka bersama di semua plugin tetapi JANGAN KAPAL pabrik yang dihasilkan dari pustaka bersama di setiap plugin tetapi gunakan kembali kode pustaka dan pabrik
• tingkat optimasi yang sama dengan yang diberikan CLI Angular kepada kami
• untuk mengimpor modul eksternal kita hanya perlu mengetahui satu hal: jalur file bundel mereka
• kode kita harus mengenali modul dan menempatkan plugin ke halaman
• mendukung rendering sisi server
• muat modul hanya saat dibutuhkan

Penggunaannya sederhana seperti:

ng build --project plugins --prod --modulePath=./plugin1/plugin1.module#Plugin1Module 
         --pluginName=plugin1 --sharedLibs=shared --outputPath=./src/assets/plugins

Lebih lanjut tentang ini di artikel saya:

• Membangun Aplikasi Enterprise Pluggable Dinamis yang dapat dikembangkan dengan Angular

Saya baru saja menerbitkan bab baru untuk buku saya " Developing with Angular " yang membahas topik plugin di Angular 2+ dan harus menarik bagi orang-orang yang mencoba membangun plugin eksternal.

Poin-poin penting:

• Plugin
• Komponen bangunan berdasarkan nama string
• Memuat konfigurasi dari sumber eksternal
• Mengubah rute aplikasi secara dinamis
• Plugin eksternal
• Membuat pustaka plugin
• Memuat plugin ke dalam aplikasi
• Rute dinamis dengan konten plugin

Buku ini gratis untuk didapatkan, dan memiliki model "bayar apa yang Anda inginkan". Jangan ragu untuk mengambil salinannya dan berharap itu bisa membantu.

Contoh aplikasi dengan sistem plugin yang berfungsi (terima kasih kepada Gijs karena telah mendirikan repo github!) Https://github.com/PacktPublishing/Mastering-Angular-2-Components/tree/master/angular-2-components-chapter-10 based based pada eBook Mastering Angular 2 Components

• arsitektur plugin untuk memperluas komponen aplikasi inti
• sistem plugin file (untuk hanya menambahkan direktori plugin / file tanpa mengedit file konfigurasi inti atau kebutuhan untuk mengkompilasi ulang aplikasi Anda!)
• muat dan gunakan plugin secara dinamis
• membangun pengelola plugin yang belum sempurna untuk mengaktifkan / menonaktifkan plugin saat itu juga

Cheers, Niklas

Apa yang Anda cari adalah pemuatan modul yang malas. Berikut ini contohnya: http://plnkr.co/edit/FDaiDvklexT68BTaNqvE?p=preview

import {Component} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'my-app',
  template: `
    <a [routerLink]="['/']">Home</a> | 
    <a [routerLink]="['/app/home']">App Home</a> |
    <a [routerLink]="['/app/lazy']">App Lazy</a>

    <hr>
    <button (click)="addRoutes()">Add Routes</button>

    <hr>
    <router-outlet></router-outlet>
  `
})
export class App {
  loaded: boolean = false;
  constructor(private router: Router) {}

  addRoutes() {
    let routerConfig = this.router.config;

    if (!this.loaded) {
      routerConfig[1].children.push({
        path: `lazy`,
        loadChildren: 'app/lazy.module#LazyModule'
      });

      this.router.resetConfig(routerConfig);
      this.loaded = true;
    }
  }
}

Terbaik ... Tom

Saya membuat hack untuk memuat dan mengkompilasi modul lain dalam waktu bootstrap, tetapi saya belum memecahkan masalah dependensi siklik

 const moduleFile: any = require(`./${app}/${app}.module`),
                    module = moduleFile[Object.keys(moduleFile)[0]];

 route.children.push({
     path: app,
     loadChildren: (): Promise<any> => module
 });
 promises.push(this.compiler.compileModuleAndAllComponentsAsync(module));

lalu di AppModule tambahkan ini:

{
        provide: APP_INITIALIZER,
        useFactory: AppsLoaderFactory,
        deps: [AppsLoader],
        multi: true
},

Saya mencari sistem plugin dalam sudut 2/4 juga untuk mengembangkan lingkungan RAD untuk aplikasi perusahaan di tempat kerja. Setelah beberapa penelitian, saya memutuskan untuk mengimplementasikan kumpulan komponen pseudo-Angular yang disimpan dalam database (tetapi bisa dalam sistem file).

Komponen yang disimpan dalam basis data database didasarkan pada ng-dynamic dan implementasi komponen utama mirip dengan ini:

declare var ctx: any;

@Component({
    selector: 'my-template',
    template: `
<div>
    <div *dynamicComponent="template; context: { ctx: ctx };"></div>
</div>
  `,
    providers: [EmitterService],

})

export class MyTemplateComponent implements OnMount, AfterViewInit, OnChanges {


    // name
    private _name: string;
    get name(): string {
        return this._name;
    }
    @Input()
    set name(name: string) {
        this._name = name;        
        this.initTemplate();
    }

    template: string;
    ctx: any = null;

    private initTemplate() {

        this.templateSvc.getTemplate(this.name).subscribe(res => {
            // Load external JS with ctx implementation
            let promise1 = injectScript(res.pathJs);
            // Load external CCS
            let promise2 = injectScript(res.pathCss);

            Promise.all([promise1, promise2]).then(() => {

                // assign external component code
                this.ctx = ctx; //

                // sets the template
                this.template = res.template;

                this.injectServices();

                if (this.ctx && this.ctx.onInit) {
                    this.ctx.onInit();
                }

            });

        });

    }

Kode javascript eksternal mirip dengan komponen sudut:

var ctx = {

// injected    
_httpService: {},
_emitterService: null,

// properies
model: {
    "title": "hello world!",
},


// events
onInit() {
    console.log('onInit');
},

onDestroy() {
    console.log('onDestroy');
},

onChanges(changes) {
    console.log('changes', changes);
},

customFunction1() {
    console.log('customFunction1');
},

childTemplateName: string = 'other-component'; 

};

Dan templat komponen seperti templat sudut:

<a (click)="customFunction1()">{{ ctx.model.title }}</a>
<input [(ngModel)]="ctx.model.title" type="text" />

Dan bisa juga bersarang:

<a (click)="customFunction1()">{{ ctx.model.title }}</a>
<my-template [name]="childTemplateName"></my-template>

Meskipun tidak sempurna, para pengembang komponen kustom memiliki kerangka kerja yang serupa daripada di angular2 / 4.

Itu bisa dilakukan, "secara manual". Karena webpack tidak tahu apa-apa tentang modul eksternal (plug-in), ia tidak dapat memasukkannya dalam bundel. Jadi yang saya lakukan adalah melihat kode yang dihasilkan oleh webpack dan saya menemukan pai kode ini di main.bundle.js:

var map = {
"./dashboard/dashboard.module": ["../../../../../src/app/dashboard/dashboard.module.ts","dashboard.module"]}; 

Mari kita periksa isi array itu:

1. "./dashboard/dashboard.module" - ini URL adalah routing dari penyihir modul kita ingin beban malas misalnya: {path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule'}
2. "../../../../../src/app/dashboard/dashboard.module.ts" - ini adalah titik masuk (kontraktor) dari
3. "dashboard.module" - nama file aktual tanpa chunk.js (misalnya: dashboard.module.chunk.js )

Jadi secara teori, jika Anda menambahkan entri ke properti peta mengkonfigurasi perutean Anda dan mengikuti pola, Anda dapat memiliki sistem plug-in. Sekarang tantangannya adalah bagaimana menambah atau menghapus entri dari properti peta itu. Jelas itu tidak dapat dilakukan dari kode sudut, itu harus dilakukan untuk alat eksternal.

Saya mencoba menerapkan arsitektur plugin yang memanfaatkan ABP, Angular, dan ASP.NET Core: https://github.com/chanjunweimy/abp_plugin_with_ui

Pada dasarnya, saya mengembangkan plugin sudut menggunakan aplikasi sudut yang berbeda, kemudian saya menambahkannya secara dinamis.

Informasi lebih lanjut tentang cara saya mencapainya:

Saya memiliki 2 aplikasi angular-cli, 1 adalah aplikasi cli angular utama, dan yang lainnya adalah aplikasi plugin angular cli. Masalah yang kita hadapi dalam pendekatan arsitektur plugin Angular-cli adalah bagaimana kita mengintegrasikannya.

Saat ini, yang saya lakukan adalah, saya menjalankan ng-build pada kedua aplikasi, dan meletakkannya di folder "wwwroot", yang kemudian di-host di server 2.0 core ASP.NET. Repositori sederhana yang menunjukkan ide ini adalah Angular Multiple App: https://github.com/chanjunweimy/angular-multiple-app

abp_plugin_with_ui adalah repositori yang berfungsi untuk mengembangkan plugin yang berisi cli backend dan Angular. Untuk backend, saya menggunakan kerangka aspnetboilerplate, yang frontend dikembangkan menggunakan beberapa aplikasi angular-cli.

Agar aplikasi utama terintegrasi dengan aplikasi plugin, kita harus menjalankan "ng-build" pada kedua aplikasi (perhatikan bahwa kita juga harus mengubah ke href dari aplikasi plugin), lalu kita memindahkan konten plugin yang dibangun aplikasi cli sudut, ke folder utama aplikasi "wwwroot". Setelah mencapai semua ini, kita kemudian dapat menjalankan "dotnet run" untuk melayani Aplikasi Web ASP.NET Core 2.0 untuk meng-host file statis yang dihasilkan oleh "ng build".

Semoga bermanfaat. Setiap komentar dipersilahkan! ^^

Sedikit topik, tetapi perpustakaan Komponen UI dapat menarik bagi beberapa pembaca, yang mencari plugin:
https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the -angular-cli-and-ng-packagr-53b2ade0701e

NativeScript memiliki Plugin UI bawaan:
https://docs.nativescript.org/plugins/building-plugins
Plugin itu memerlukan Pembungkus Angular:
https://docs.nativescript.org/plugins/angular-plugin

Saya saat ini dalam pencarian yang sama seperti Anda, mencoba untuk membuat Versi Anggun Pluggable / Themable, dan itu bukan masalah sepele.

Saya Sebenarnya Menemukan Solusi yang Cukup Bagus, membaca buku Developing with Angular oleh Genius Denys Vuyika , dia sebenarnya di buku itu menjelaskan solusi yang cukup bagus, dia berbicara tentang plugin Eksternal pada halaman 356 buku dan Menggunakan Rollup.js untuk mencapai solusinya, ia kemudian memproses untuk memuat plugin eksternal secara dinamis yang sebelumnya dibangun di luar aplikasi Anda.

Ada juga dua pustaka / proyek lain yang membantu Anda mencapai hasil ini ng-packagr dan ekstensi Nx untuk Agnular (dari Nrwl) kami ingin menerapkan yang terakhir, dan saya akan mengatakan itu tidak semulus yang kami perkirakan, angular sederhana tidak dibangun untuk itu, jadi kami harus mengerjakan beberapa inti tentang bagaimana Angular, dan NX ppl adalah salah satu yang terbaik di atasnya.

Kami hanya pada awal Proyek Sumber Terbuka kami, kami menggunakan Django + Mongo + Angular, (Kami memanggil WebDjangular dan salah satu pendekatan kami yang mungkin untuk jawaban ini, adalah bahwa Django harus menulis beberapa file konfigurasi JSON dan membangun aplikasi setiap kali plugin atau tema baru dipasang dan diaktifkan.

Apa yang sudah kita capai adalah, dari database kita dapat menggunakan tag untuk komponen seperti pada plugin, dan komponen akan dicetak di layar! Sekali lagi proyek ini dalam tahap yang sangat awal, kami mendasarkan arsitektur kami sedikit pada Wordpress, dan kami memiliki banyak tes lagi yang harus dilakukan untuk mencapai impian kami: D

Saya harap buku ini dapat membantu Anda, dan menggunakan Rollup.js saya tahu Anda akan dapat memecahkan masalah yang tidak sepele ini.

Saya menemukan artikel bagus dari Paul Ionescu tentang cara membuat aplikasi plugin yang dapat diperluas dalam sudut.

https://itnext.io/how-to-build-a-plugin-extensible-application-architecture-in-angular5-736890278f3f

Dia juga merujuk contoh aplikasi di github: https://github.com/ionepaul/angular-plugin-architecture