Angular 2、4、5、6でのプラグインアーキテクチャ/プラグインシステム/プラグイン可能なフレームワークの実装

2018年5月24日更新：元の投稿から+3バージョンのAngularになりましたが、まだ実行可能な最終的なソリューションはありません。Lars Meijdam（@LarsMeijdam）は、一見の価値のある興味深いアプローチを考え出しました。（プロプライエタリな問題のため、彼は最初にサンプルを投稿したGitHubリポジトリを一時的に削除する必要がありました。ただし、コピーが必要な場合は、直接彼にメッセージを送ることができます。詳細については、以下のコメントを参照してください。）

Angular 6の最近のアーキテクチャの変更により、ソリューションに近づくことができます。さらに、Angular Elements（https://angular.io/guide/elements）はいくつかのコンポーネント機能を提供します。

すばらしいAngularチームの誰かがこれに遭遇した場合、この機能に非常に興味を持っている他の多くの人々がいるように見えることに注意してください。バックログを検討する価値があるかもしれません。

私はでプラガブル（プラグイン）フレームワークを実装したいと思いAngular 2、Angular 4、Angular 5、またはAngular 6アプリケーション。

（このプラグイン可能なフレームワークを開発するための私の特定のユースケースは、ミニチュアコンテンツ管理システムを開発する必要があるということです。ここで詳しく説明されていないいくつかの理由によりAngular 2/4/5/6、そのシステムのほとんどのニーズにほぼ完全に適合します。）

プラグイン可能なフレームワーク（またはプラグインアーキテクチャ）とは、具体的には、サードパーティの開発者が、プライマリアプリケーションのソースコードに直接アクセスしたり、その知識を持たなくても、プラグイン可能なコンポーネントを使用してプライマリアプリケーションの機能を作成または拡張できるシステムを意味しますまたは内部の仕組み。

（「アプリケーションのソースコードや内部の仕組みに直接アクセスしたり、その知識を持たない」という表現は、中心的な目的です。）

プラグイン可能なフレームワークの例には、WordPressまたはなどの一般的なコンテンツ管理システムが含まれますDrupal。

（Drupalと同様に）理想的な状況は、これらのプラグイン可能なコンポーネント（またはプラグイン）をフォルダーに簡単に配置し、アプリケーションにそれらを自動検出または検出させ、魔法のように「機能」させることです。これをある種のホットプラグ可能な方法で、つまりアプリの実行中に行うのが最適です。

私は現在、次の5つの質問に対する回答を（あなたの助けを借りて）決定しようとしています。

1. 実用性：Angular 2/4/5/6アプリケーションのプラグインフレームワークは実用的ですか？（これまで、を使用して真にプラグイン可能なフレームワークを作成する実用的な方法はありませんでしたAngular2/4/5/6。）
2. 予想される課題：Angular 2/4/5/6アプリケーションのプラグインフレームワークの実装で遭遇する可能性のある課題は何ですか？
3. 実装戦略：Angular 2/4/5/6アプリケーションのプラグインフレームワークを実装するために使用できる特定の技術または戦略は何ですか？
4. ベストプラクティス：Angular 2/4/5/6アプリケーションのプラグインシステムを実装するためのベストプラクティスは何ですか？
5. 代替技術： プラグインフレームワークがアプリケーションで実用的でない場合、どのような比較的同等の技術（例）が、最新の非常に反応性の高いWebアプリケーションに適しているでしょうか？Angular 2/4/5/6React

一般に、次のAngular 2/4/5/6理由により、の使用は非常に望ましいです。

• 当然のことながら、非常に高速です。
• 帯域幅をほとんど消費しません（初期ロード後）
• フットプリントが比較的小さい（後AOTとtree shaking）-そしてそのフットプリントは縮小し続けています
• それは非常に機能的であり、Angularチームとコミュニティはそのエコシステムの急速な成長を続けています
• それは、次のような最高の、最新のWeb技術の多くとよく果たしているTypeScriptとObservables
• Angular 5はサービスワーカーをサポートするようになりました（https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7）
• によってGoogleサポートされているため、将来的にはサポートおよび拡張される可能性があります

Angular 2/4/5/6現在のプロジェクトで使用したいです。を使用できる場合は、おそらく（サーバー側のレンダリングに）Angular 2/4/5/6も使用します。Angular-CLIAngular Universal

上記の質問に関するこれまでの私の考えは次のとおりです。フィードバックと啓発を確認して提供してください。

• Angular 2/4/5/6アプリはパッケージを消費しますが、これは必ずしもアプリケーション内でプラグインを許可することと同じではありません。他のシステム（例Drupal：）のプラグインは、システムによって自動的に「ピックアップ」される共通モジュールディレクトリにプラグインフォルダーをドロップすることで基本的に追加できます。ではAngular 2/4/5/6、（プラグインとして）パッケージは通常を介してインストールされnpm、に追加されてから、package.json手動でアプリにインポートされapp.moduleます。これはDrupal、フォルダーをドロップしてシステムにパッケージを自動的に検出させる方法よりもはるかに複雑です。プラグインのインストールが複雑になるほど、人々がプラグインを使用する可能性は低くなります。のための方法があった場合、それははるかに良いでしょうAngular 2/4/5/6プラグインを自動的に検出してインストールします。開発者以外がAngular 2/4/5/6アプリケーションをインストールし、アプリケーションのアーキテクチャをすべて理解する必要なく、選択したプラグインをインストールできる方法を見つけることに非常に興味があります。

• 一般に、プラグ可能なアーキテクチャを提供する利点の1つは、サードパーティの開発者がシステムの機能を拡張することが非常に簡単なことです。明らかに、これらの開発者は、プラグインしているアプリケーションのコードの複雑さのすべてに精通しているわけではありません。プラグインが開発されると、それほど技術的でないユーザーでも、アプリケーションと選択したプラグインをインストールできます。ただし、Angular 2/4/5/6比較的複雑で、学習曲線が非常に長くなります。さらに複雑なものに、ほとんどの生産Angular 2/4/5/6用途にも活用Angular-CLI、Angular UniversalとWebPack。プラグインを実装している人はおそらく、これらすべてがどのように組み合わされるかについての少なくともいくつかの基本的な知識と、TypeScriptとにある程度慣れているNodeJS。サードパーティがプラグインの開発を望んでいないほど、知識要件は非常に厳しいですか？

• ほとんどのプラグインには、サーバー側のコンポーネント（プラグイン関連のデータを格納/取得するためなど）とクライアント側の出力があります。Angular 2/4/5特に（そして強く）開発者が実行時に独自のテンプレートを挿入することを阻止します。これは深刻なセキュリティリスクをもたらすためです。プラグインが対応できる多くのタイプの出力（たとえば、グラフの表示）を処理するには、ユーザーが応答ストリームに注入されるコンテンツを別の形式で作成できるようにする必要があるようです。Angular 2/4/5/6のセキュリティメカニズムを比喩的に細断せずに、このニーズにどのように対応できるのか、疑問に思います。

• ほとんどの本番Angular 2/4/5/6アプリケーションは、Ahead of Time（AOT）コンパイルを使用してプリコンパイルされています。（おそらくすべてがそうであるべきです。）事前にコンパイルされたアプリケーションにプラグインがどのように追加（または統合）されるかは不明です。最良のシナリオは、メインアプリケーションとは別にプラグインをコンパイルすることです。しかし、私はこれをどのように機能させるのか不確かです。フォールバックは、含まれているプラ​​グインを使用してアプリケーション全体を再コンパイルすることですが、選択したプラグインとともにアプリケーションを（自分のサーバーに）単にインストールしたい管理ユーザーにとっては少し複雑になります。

• Angular 2/4/5/6アプリケーション、特に事前にコンパイルされたアプリケーションでは、1つの誤ったコードまたは競合するコードがアプリケーション全体を破壊する可能性があります。Angular 2/4/5/6アプリケーションは常に最も簡単にデバッグできるとは限りません。不適切な動作をするプラグインを適用すると、非常に不愉快な体験になる可能性があります。私は現在、不正なプラグインを適切に処理するメカニズムを認識していません。

私は役立つかもしれないソリューションでgithubにリポジトリを作成しました。Angular 6ライブラリと1ベースアプリケーションを使用して、UMDバンドルライブラリを遅延読み込みします。https://github.com/lmeijdam/angular-umd-dynamic-example

何か提案があれば、遠慮なく追加してください！

🛠️Githubデモangular-plugin-architecture

多分Ivyは何かを変えることができますが、当面はAngular CLI Custom Builderを使用し、次の要件を満たすソリューションを使用します：

• AOT
• 重複コードを回避する（@ angular / core {common、forms、router}、rxjs、tslibのようなパッケージ）
• すべてのプラグインで共有ライブラリを使用しますが、各プラグインでその共有ライブラリから生成されたファクトリを出荷せず、ライブラリコードとファクトリを再利用します
• Angular CLIが提供するのと同じレベルの最適化
• 外部モジュールをインポートするために知っておく必要があるのは、バンドルファイルのパスだけです。
• コードはモジュールを認識し、プラグインをページに配置する必要があります
• サーバー側レンダリングをサポート
• 必要なときにのみモジュールをロードする

使い方は簡単です：

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

これに関する私の記事の詳細：

• Angularを使用した拡張可能な動的プラガブルエンタープライズアプリケーションの構築

私は、Angular 2+のプラグインのトピックを扱った私の本「Developing with Angular」の新しい章を公開したばかりであり、外部プラグインを構築しようとしている人々にとって大きな関心になるはずです。

キーポイント：

• プラグイン
• 文字列名に基づくコンポーネントの構築
• 外部ソースからの設定の読み込み
• アプリケーションルートを動的に変更する
• 外部プラグイン
• プラグインライブラリの作成
• アプリケーションへのプラグインの読み込み
• プラグインコンテンツを含む動的ルート

この本は無料で入手でき、「欲しいものを支払う」モデルがあります。自由にコピーを入手してください。

動作するプラグインシステムを使用したアプリケーションの例（githubリポジトリを設立してくれたGijsに感謝！）https://github.com/PacktPublishing/Mastering-Angular-2-Components/tree/master/angular-2-components-chapter-10 based電子ブックのマスタリング角度2コンポーネント

• コアアプリコンポーネントを拡張するプラグインアーキテクチャ
• ファイルプラグインシステム（コア構成ファイルを編集せずにプラグインディレクトリ/ファイルを単に追加するため、またはアプリケーションを再コンパイルする必要があるため！）
• プラグインをロードして動的に使用する
• オンザフライでプラグインをアクティブ/非アクティブにする基本的なプラグインマネージャーを構築する

乾杯、ニクラス

あなたが探しているのは、遅延モジュール読み込みです。以下にその例を示します。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;
    }
  }
}

ベスト...トム

ブートストラップ時に他のモジュールをロードしてコンパイルするためのハックを作成しましたが、循環依存の問題を解決していません

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

次に、AppModuleにこれを追加します。

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

仕事でエンタープライズアプリケーションのRAD環境を開発するためにも、角度2/4のプラグインシステムを探していました。いくつかの調査の後、私はデータベースに格納された（ただし、ファイルシステムにある可能性がある）疑似角度コンポーネントのコレクションを実装することを決定しました。

データベースデータベースに格納されているコンポーネントはng-dynamicに基づいて おり、主要なコンポーネントの実装は次のようになります。

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

            });

        });

    }

外部JavaScriptコードは角度コンポーネントに似ています。

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

};

そして、コンポーネントのテンプレートは角度テンプレートのようなものです：

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

ネストすることもできます：

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

完璧ではありませんが、カスタムコンポーネントの開発者は、angular2 / 4と同様のフレームワークを持っています。

「手動」で行うことができます。webpackは外部（プラグイン）モジュールについて何も知らないため、それらをバンドルに含めることはできません。だから私がやったことは、webpackによって生成されたコードを見て、main.bundle.jsに次のコードのパイを見つけたことです。

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

その配列が何を含んでいるかを調べてみましょう：

1. "./dashboard/dashboard.module"-これは、遅延ロードするモジュール魔女のルーティングURLです。例：{path： 'dashboard'、loadChildren： './dashboard/dashboard.module#DashboardModule'}
2. "../../../../../src/app/dashboard/dashboard.module.ts"-これは、エントリポイント（コンストラクタ）が取得するエントリポイントです。
3. "dashboard.module" -chunk.jsのない実際のファイル名（例：dashboard.module.chunk.js）

したがって、理論的には、マッププロパティにエントリを追加してルーティングを構成し、パターンに従うと、プラグインシステムを使用できます。ここでの課題は、そのマッププロパティのエントリを追加または削除する方法です。もちろん、角度コードからは実行できません。外部ツールで実行する必要があります。

ABP、Angular、ASP.NET Coreを使用してプラグインアーキテクチャを実装しようとしました：https : //github.com/chanjunweimy/abp_plugin_with_ui

基本的に、私はさまざまな角度アプリケーションを使用して角度プラグインを開発し、それらを動的に一緒に追加しました。

私がそれを達成する方法に関する詳細情報：

2つのangular cliアプリケーションがあり、1つはメインのangular cliアプリケーションで、もう1つはプラグインのangular cliアプリケーションです。Angular-cliプラグインアーキテクチャアプローチで直面している問題は、それらを統合する方法です。

今、私がしたことは、両方のアプリケーションでng-buildを実行し、それらを "wwwroot"フォルダーに入れてから、ASP.NETコア2.0サーバーでホストすることです。このアイデアを示すより単純なリポジトリは、Angular Multiple Appです：https : //github.com/chanjunweimy/angular-multiple-app

abp_plugin_with_uiは、バックエンドとAngular CLIの両方を含むプラグインの開発に取り組むリポジトリです。バックエンドでは、aspnetboilerplateフレームワークを利用しました。これは、フロントエンドが複数のangular-cliアプリケーションを使用して開発されています。

メインアプリケーションをプラグインアプリケーションと統合するには、両方のアプリケーションで "ng-build"を実行する必要があります（プラグインアプリケーションのhrefにも変更する必要があることに注意してください）。次に、プラグインのビルドされたコンテンツを移動します。角度cliアプリケーション、メインアプリケーションの「wwwroot」フォルダー。これをすべて完了したら、「dotnet run」を実行してASP.NET Core 2.0 Webアプリケーションにサービスを提供し、「ng build」によって生成された静的ファイルをホストできます。

うまくいけば、それが役立ちます。コメントは大歓迎です！^^

少し外れたトピックですが、UIコンポーネントライブラリは、プラグインを検索する一部の読者にとって興味があるかもしれません。
ます。https //medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the -angular-cli-and-ng-packagr-53b2ade0701e

NativeScriptは、ビルドインUIプラグインを持っています
https://docs.nativescript.org/plugins/building-plugins
これらのプラグインは、角度ラッパーが必要です。
https://docs.nativescript.org/plugins/angular-plugin

私は現在あなたと同じ探求の中にあり、AngularのPluggable / Themableバージョンを作成しようとしていますが、それはささいな問題ではありません。

私は実際にかなり良い解決策を見つけて、Genius Denys Vuyika著「Developing with Angular」を読んでいます。彼は実際にかなり良い解決策を説明し、本の356ページで外部プラグインについて話し、Rollup.jsを使用していますをしてその後、彼はアプリケーションの外部で以前に構築された外部プラグインを動的にロードするプロセスを行います。

この結果を達成するのに役立つ他の2つのライブラリ/プロジェクトもあります （Nrwlからの）Agnularのng-packagrおよびNx拡張機能は、後者を実装するために結び付けられており、予想したほどスムーズではなく、角度は単純でしたそのために構築されていないので、Angularのコアのいくつかを回避する必要があり、NX pplはその中で最高のものの1つです。

オープンソースプロジェクトの始まりに過ぎず、Django + Mongo + Angularを使用しています（WebDjangularを呼び出しており、この答えに対する可能なアプローチの1つは、DjangoがいくつかのJSON構成ファイルを作成してビルドする必要があるということです新しいプラグインまたはテーマがインストールおよびアクティブ化されるたびにアプリケーション。

すでに達成したことは、データベースから、プラグインのようにコンポーネントのタグを使用でき、コンポーネントが画面に印刷されることです！繰り返しますが、プロジェクトは非常に初期の段階にあり、アーキテクチャはWordpressに少し基づいており、私たちの夢を実現するために実行する必要がある多くのテストがあります：D

本がお役に立てば幸いです。Rollup.jsを使用すると、この重要な問題を解くことができます。

プラグイン拡張可能なアプリケーションをangularで構築する方法について、Paul Ionescuからの良い記事を見つけました。

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

彼はgithubでサンプルアプリケーションも参照しています：https : //github.com/ionepaul/angular-plugin-architecture