Açısal 2, 4, 5, 6'da bir eklenti mimarisi / eklenti sistemi / takılabilir çerçeve uygulama

Güncelleme 5/24/2018: Artık orijinal yayınımdan Angular'ın +3 sürümüyüz ve hala son bir uygulanabilir çözümümüz yok. Lars Meijdam (@LarsMeijdam) kesinlikle görülmeye değer ilginç bir yaklaşım ortaya koydu. (Tescilli sorunlar nedeniyle, GitHub deposunu örneğini ilk olarak gönderdiği geçici olarak kaldırması gerekiyordu. Ancak, bir kopyasını istiyorsanız doğrudan ona mesaj gönderebilirsiniz. Daha fazla bilgi için lütfen aşağıdaki yorumlara bakın.)

Açısal 6'daki son mimari değişiklikler bizi bir çözüme yaklaştırıyor. Ek olarak, Açısal Öğeler ( https://angular.io/guide/elements ) bazı bileşen işlevleri sağlar - ancak bu yazıda başlangıçta tarif ettiğim gibi değil.

İnanılmaz Angular ekibinden herhangi biri bununla karşılaşırsa, lütfen bu işleve çok ilgi duyan başka birçok insan var gibi görünüyor. Birikmiş işler için düşünmeye değer olabilir.

Bir de takılabilir (plug-in) bir çerçeve uygulamak istiyoruz Angular 2, Angular 4, Angular 5ya da Angular 6uygulama.

(Bu takılabilir çerçeveyi geliştirmek için benim özel kullanım durumum, minyatür bir içerik yönetim sistemi geliştirmem gerektiğidir. Burada ayrıntılı olarak açıklanmamış birkaç nedenden ötürü Angular 2/4/5/6, bu sistemin çoğu gereksinimi için neredeyse mükemmel bir seçimdir.)

Takılabilir çerçeve (veya eklenti mimarisi) ile, özellikle üçüncü taraf geliştiricilerin , birincil uygulamanın kaynak koduna doğrudan erişmeden veya bilgi sahibi olmadan takılabilir bileşenler kullanarak birincil uygulamanın işlevselliğini oluşturmasına veya genişletmesine izin veren bir sistemi kastediyorum. veya iç işler .

(" Uygulamanın kaynak koduna veya iç çalışmalarına doğrudan erişmeden veya bilgi sahibi olmadan " ifadesi temel bir hedeftir.)

Takılabilir çerçevelere örnek olarak WordPressveya gibi yaygın içerik yönetim sistemleri verilebilir Drupal.

İdeal durum (Drupal'da olduğu gibi), bu takılabilir bileşenleri (veya eklentileri) bir klasöre yerleştirmek, uygulamanın otomatik olarak algılanmasını veya keşfetmesini ve sihirli bir şekilde "çalışmasını" sağlamaktır. Bunun bir tür çalışırken takılabilir şekilde gerçekleşmesi, yani uygulama çalışırken optimum olacaktır.

Şu anda aşağıdaki beş sorunun yanıtlarını ( sizin yardımınızla ) belirlemeye çalışıyorum .

1. Pratiklik: Bir Angular 2/4/5/6uygulama için eklenti çerçevesi pratik mi? (Şimdiye kadar, gerçekten takılabilir bir çerçeve oluşturmak için pratik bir yol bulamadım Angular2/4/5/6.)
2. Beklenen Zorluklar: Bir uygulama için eklenti çerçevesinin uygulanmasında hangi zorluklarla karşılaşılabilir Angular 2/4/5/6?
3. Uygulama Stratejileri: Bir Angular 2/4/5/6uygulama için bir eklenti çerçevesi uygulamak için hangi spesifik teknikler veya stratejiler kullanılabilir ?
4. En İyi Uygulamalar: Bir uygulama için bir eklenti sistemi uygulamak için en iyi Angular 2/4/5/6uygulamalar nelerdir?
5. Alternatif Teknolojiler: Eğer bir eklenti çerçevesidir değil bir pratik Angular 2/4/5/6uygulamada ne nispeten eşdeğer teknolojileri (örn React) bir uygun olabilecek çağdaş yüksek reaktif Web uygulaması ?

Genel olarak, kullanımı Angular 2/4/5/6çok arzu edilir çünkü:

• doğal olarak son derece hızlı - çok şaşırtıcı.
• çok az bant genişliği tüketir (ilk yükten sonra)
• nispeten az yer kaplar (sonra AOTve sonra tree shaking) - ve bu ayak izi küçülmeye devam eder
• son derece işlevseldir ve Açısal ekip ve topluluk ekosisteminde hızlı büyümeye devam etmektedir
• gibi en iyi ve en yeni Web teknolojilerinin birçoğuyla iyi oynar TypeScriptveObservables
• Açısal 5 artık servis çalışanlarını destekliyor ( https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7 )
• tarafından desteklenerek Google, gelecekte desteklenecek ve geliştirilecektir.

Angular 2/4/5/6Mevcut projem için çok kullanmak istiyorum. Kullanabiliyorsam Angular 2/4/5/6, Angular-CLIve muhtemelen de Angular Universal(sunucu tarafı oluşturma için) kullanacağım .

İşte yukarıdaki sorularla ilgili düşüncelerim. Lütfen görüşlerinizi ve aydınlanmanızı gözden geçirin ve sağlayın.

• Angular 2/4/5/6uygulamalar paketleri tüketir - ancak bu, bir uygulama içinde eklentilere izin vermekle aynı şey değildir. Diğer sistemlerde (örn. Drupal) Bir eklenti , eklenti klasörünü sistem tarafından otomatik olarak "alındığı" ortak bir modüller dizinine bırakarak eklenebilir. İçinde Angular 2/4/5/6, bir paket (eklenti olarak olabilir) genellikle üzerinden yüklenir npm, eklenir package.jsonve sonra uygulamaya olduğu gibi manuel olarak içe aktarılır app.module. Bu, Drupalbir klasörü bırakma ve sistemin paketi otomatik olarak algılamasını sağlama yönteminden çok daha karmaşıktır . Bir eklenti kurmak ne kadar karmaşıksa, insanların bunları kullanma olasılığı o kadar az olur. Bir yol olsaydı çok daha iyi olurduAngular 2/4/5/6eklentileri otomatik olarak algılamak ve yüklemek için. Geliştiricilerin Angular 2/4/5/6uygulamayı yüklemesine ve uygulamanın tüm mimarisini anlamadan seçilen herhangi bir eklentiyi yüklemesine izin veren bir yöntem bulmakla çok ilgileniyorum .

• Genel olarak, takılabilir bir mimari sağlamanın faydalarından biri, 3. taraf geliştiricilerin sistemin işlevselliğini genişletmesinin çok kolay olmasıdır. Açıkçası, bu geliştiriciler, taktıkları uygulama için kodun tüm karmaşıklıklarına aşina olmayacaklardır. Eklentiler geliştirildikten sonra, daha az teknik kullanıcılar bile uygulamayı ve seçilen eklentileri yükleyebilir. Bununla birlikte, Angular 2/4/5/6nispeten karmaşıktır ve çok uzun bir öğrenme eğrisine sahiptir. Ayrıca komplike şeyler için çoğu üretim Angular 2/4/5/6uygulamaları da kullanmak Angular-CLI, Angular Universalve WebPack. Bir eklenti uygulayan birinin, muhtemelen bunların hepsinin nasıl birbirine uyduğuna dair en azından bazı temel bilgilere sahip olması gerekir.TypeScriptve makul bir aşinalık NodeJS. Bilgi gereklilikleri, hiçbir üçüncü tarafın eklenti geliştirmek istemeyeceği kadar aşırı mı?

• Çoğu eklenti, bazı istemci tarafı çıktılarının yanı sıra bazı sunucu tarafı bileşenlerine (örneğin, eklentiyle ilgili verileri depolamak / almak için) sahip olacaktır. Angular 2/4/5özellikle (ve şiddetle) geliştiricilerin çalışma sırasında kendi şablonlarını enjekte etmelerini önler - bu ciddi bir güvenlik riski oluşturur. Bir eklentinin barındırabileceği birçok çıktı türünü işlemek için (örneğin, bir grafiğin görüntülenmesi), kullanıcıların yanıt akışına enjekte edilen içeriği bir biçimde başka bir biçimde oluşturmasına izin verilmesi muhtemelen gerekli görünmektedir. Angular 2/4/5/6Güvenlik mekanizmasını mecazi olarak parçalamadan bu ihtiyaca nasıl cevap verilebileceğini merak ediyorum .

• Çoğu üretim Angular 2/4/5/6uygulaması Ahead of Time( AOT) derlemesi kullanılarak önceden derlenmiştir . (Muhtemelen hepsi olmalıdır.) Önceden derlenmiş uygulamalara eklentilerin nasıl eklenebileceğinden (veya bunlarla entegre olabileceğinden) emin değilim. En iyi senaryo, eklentileri ana uygulamadan ayrı olarak derlemeyi içerir. Ancak, bunun nasıl yapılacağından emin değilim. Geri dönüş, tüm uygulamayı dahil edilen eklentilerle yeniden derlemek olabilir, ancak bu, seçilen eklentilerle birlikte uygulamayı (kendi sunucusunda) yüklemek isteyen bir yönetici kullanıcı için işleri biraz karmaşık hale getirir.

• Bir Angular 2/4/5/6uygulamada, özellikle önceden derlenmiş bir uygulamada, tek bir hatalı veya çakışan kod parçası tüm uygulamayı kırabilir. Angular 2/4/5/6uygulamalar her zaman hata ayıklaması en kolay yöntem değildir. Kötü niyetli eklentilerin uygulanması çok hoş olmayan deneyimlerle sonuçlanabilir. Şu anda kötü davranılmış eklentileri incelikle işlemek için bir mekanizmanın farkında değilim.

Github'da yardımcı olabilecek bir çözümle bir havuz oluşturdum. UMD paket kitaplıklarını tembel olarak yükleyen Açısal 6 kitaplık ve 1 temel uygulama kullanır; https://github.com/lmeijdam/angular-umd-dynamic-example

Herhangi bir öneriniz varsa, lütfen eklemek için çekinmeyin!

İth️ Github demo açısal-eklenti mimarisi

Belki Ivy bir şeyi değiştirebilir ama şu an Angular CLI Custom Builder kullanan ve aşağıdaki gereksinimleri karşılayan çözümü kullanıyorum:

• AOT
• yinelenen kodlardan kaçının (@ angular / core {common, formlar, yönlendirici}, rxjs, tslib gibi paketler)
• tüm eklentilerde paylaşılan kitaplığı kullanın ancak her eklentide bu paylaşılan kitaplıktan oluşturulan fabrikaları GÖNDERMEYİN, bunun yerine kitaplık kodunu ve fabrikalarını yeniden kullanın
• Açısal CLI'nın bize sağladığı optimizasyonla aynı
• harici modülleri içe aktarmak için sadece tek bir şey bilmemiz gerekir: paket dosya yolu
• kodumuz modülü tanımalı ve eklentiyi sayfaya yerleştirmelidir
• sunucu tarafı oluşturma desteği
• modülü sadece gerektiğinde yükleyin

Kullanımı basit:

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

Makalemde bunun hakkında daha fazla bilgi:

• Açısal ile Genişletilebilir Dinamik Takılabilir Kurumsal Uygulama Oluşturma

" Açısal ile Geliştirme " kitabım için , Açısal 2+'deki eklentiler konusunu ele alan ve harici eklentiler oluşturmaya çalışan insanlar için büyük bir ilgi duyması gereken yeni bir bölüm yayınladım .

Anahtar noktaları:

• eklentiler
• Dize adlarına dayalı bileşenler oluşturma
• Harici kaynaklardan yapılandırma yükleme
• Uygulama yollarını dinamik olarak değiştirme
• Harici eklentiler
• Eklenti kitaplıkları oluşturma
• Eklentileri uygulamaya yükleme
• Eklenti içeriğine sahip dinamik rotalar

Kitap ücretsizdir ve "istediğinizi öde" modeline sahiptir. Bir kopyasını almaktan çekinmeyin ve yardımcı olacağını umun.

Çalışan bir eklenti sistemi ile örnek uygulama (github deposunu kurduğu için Gijs'e teşekkürler!) Https://github.com/PacktPublishing/Mastering-Angular-2-Components/tree/master/angular-2-components-chapter-10 based eKitap üzerinde Mastering Açısal 2 Bileşenlerinin

• temel uygulama bileşenlerini genişletmek için eklenti mimarisi
• dosya eklenti sistemi (herhangi bir çekirdek yapılandırma dosyasını düzenlemeden veya uygulamanızı yeniden derlemeniz gerekmeden eklenti dizinleri / dosyaları eklemek için!)
• eklentileri yükleme ve dinamik olarak kullanma
• anında eklentileri etkinleştirmek / devre dışı bırakmak için temel bir eklenti yöneticisi oluşturmak

Şerefe, Niklas

Aradığınız tembel modül yükleme. İşte bir örnek: 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;
    }
  }
}

En ... Tom

Önyükleme zamanında yük ve diğer modülleri derlemek için bir hack yaptım, ancak döngüsel bağımlılıklar sorununu çözmedim

 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));

sonra AppModule'de şunu ekleyin:

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

İşyerinde bir kurumsal uygulama için bir RAD ortamı geliştirmek için açısal 2/4'te bir eklenti sistemi arıyordum. Biraz araştırma yaptıktan sonra, sözde Angular bileşenlerinin saklandığı (ancak dosya sisteminde olabilir) bir veritabanı koleksiyonu uygulamaya karar verdim.

Veritabanı veritabanında depolanan bileşenler ng-dynamic tabanlıdır ve ana bileşen uygulaması şuna benzer:

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();
                }

            });

        });

    }

Dış javascript kodu açısal bileşenlere benzer:

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'; 

};

Ve bileşenlerin şablonları açısal şablonlar gibidir:

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

Ve ayrıca yuvalanmış olabilir:

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

Mükemmel olmasa da, özel bileşenlerin geliştiricileri açısal2 / 4'tekine benzer bir çerçeveye sahiptir.

"Manuel" olarak yapılabilir. Webpack harici (eklentiler) modülü hakkında hiçbir şey bilmediğinden, bunları paketlere ekleyemez. Ne yaptım, webpack tarafından oluşturulan koda bakmak ve main.bundle.js kod bu turta bulundu:

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

Bu dizinin ne içerdiğini inceleyelim:

1. "./dashboard/dashboard.module" - bu, tembel yükleme yapmak istediğimiz modül cadının yönlendirme URL'sidir: {path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule'}
2. "../../../../../src/app/dashboard/dashboard.module.ts" - bu giriş noktasıdır (yapıcı)
3. "dashboard.module" - chunk.js içermeyen gerçek dosya adı (örneğin: dashboard.module.chunk.js )

Dolayısıyla teoride, map özelliğine giriş eklerseniz yönlendirmenizi yapılandırın ve deseni takip edin, bir eklenti sisteminiz olabilir. Şimdi meydan okuma, o harita özelliğine girişlerin nasıl ekleneceği veya kaldırılacağıdır. Açıkça açısal koddan yapılamaz, harici araç için yapılmalıdır.

ABP, Angular ve ASP.NET Core kullanarak bir eklenti mimarisi uygulamaya çalıştım: https://github.com/chanjunweimy/abp_plugin_with_ui

Temel olarak, farklı açısal uygulamalar kullanarak açısal eklentiler geliştirdim, sonra bunları dinamik olarak bir araya getirdim.

Nasıl başarım hakkında daha fazla bilgi:

Ben 2 açısal-cli uygulama var, 1 ana açısal cli uygulama, ve başka bir eklenti açısal cli uygulama. Angular-cli eklenti mimarisi yaklaşımında karşılaştığımız sorun onları nasıl entegre ettiğimizdir.

Şu anda yaptığım şey, her iki uygulamada da ng-build'i çalıştırdım ve daha sonra bir ASP.NET core 2.0 sunucusunda barındırılan bir "wwwroot" klasörüne koydum. Bu fikri gösteren daha basit bir havuz Açısal Çoklu Uygulamadır: https://github.com/chanjunweimy/angular-multiple-app

abp_plugin_with_ui, hem arka ucu hem de Açısal klibi içeren bir eklenti geliştirmeye çalışan bir havuzdur. Arka uç için, ön ucun çoklu açısal klips uygulaması kullanılarak geliştirilen aspnetboilerplate çerçevesini kullandım.

Ana uygulamanın eklenti uygulamasıyla entegre olması için, uygulamanın her ikisinde de "ng-build" komutunu çalıştırmamız gerekir (eklenti uygulamasının href'inde de değişmemiz gerektiğini unutmayın), sonra eklentinin yerleşik içeriğini taşıyoruz açısal cli uygulaması, ana uygulama "wwwroot" klasörüne. Tüm bunları başardıktan sonra, "ng build" tarafından oluşturulan statik dosyaları barındırmak için ASP.NET Core 2.0 Web Uygulaması sunmak için "dotnet run" çalıştırabilir.

Umarım yardımcı olur. Herhangi bir yorum açığız! ^^

Biraz konu dışı, ancak eklenti arayan bazı okuyucuların UI Bileşen kütüphaneleri ilgisini çekebilir:
https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the -angular-cli-ve-ng-packagr-53b2ade0701e

NativeScript'in yerleşik UI Eklentileri vardır:
https://docs.nativescript.org/plugins/building-plugins
Bu eklentilerin bir Açısal Sarıcıya ihtiyacı vardır:
https://docs.nativescript.org/plugins/angular-plugin

Şu anda seninle aynı görevdeyim, Açısal / Temsil Edilebilir Açısal Versiyonu yapmaya çalışıyorum ve bu önemsiz bir sorun değil.

Aslında oldukça iyi çözümler buldum , Genius Denys Vuyika tarafından Angular ile geliştirme kitabını okudum , aslında kitapta oldukça iyi bir çözüm açıklıyor, kitabın 356 sayfasındaki Harici eklentilerden bahsediyor ve ulaşmak için Rollup.js'yi kullanıyor daha sonra uygulamanızın dışında oluşturulmuş harici eklentileri dinamik olarak yüklemek için işlem yapar.

Ayrıca bu sonucu elde etmenize yardımcı olan diğer iki kütüphane / proje var (Agnr için ng-packagr ve Nx uzantıları (Nrwl'den) , ikincisini uygulamak için bağlıyız ve tahmin ettiğimiz kadar pürüzsüz değil, açısal basitti bunun için inşa edilmedi, bu yüzden Angular'ın ve NX ppls'in bunun en iyilerinden biri olduğu konusunda bazı çekirdekler üzerinde çalışmalıyız.

Sadece Açık Kaynak Projemizin başlangıcındayız, Django + Mongo + Angular kullanıyoruz, ( WebDjangular'ı çağırıyoruz ve bu cevaba olası yaklaşımlarımızdan biri, Django'nun bazı JSON yapılandırma dosyaları yazması ve yeni bir eklenti veya tema her yüklendiğinde ve etkinleştirildiğinde.

Daha önce başardığımız şey, veritabanından eklenti gibi bileşenler için etiketleri kullanabiliriz ve bileşen ekrana yazdırılır! Yine proje çok erken aşamalarda, mimarimizi biraz Wordpress'e dayandırıyoruz ve hayalimize ulaşmak için daha çok testimiz var: D

Umarım Kitap size yardımcı olabilir ve Rollup.js'yi kullanarak bu önemsiz sorunu çözebileceğinizi biliyorum.

Paul Ionescu'dan açısal olarak eklenti genişletilebilir bir uygulamanın nasıl oluşturulacağı hakkında iyi bir makale buldum.

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

Ayrıca github'daki örnek bir uygulamaya da başvuruyor: https://github.com/ionepaul/angular-plugin-architecture