「TypeScript + Electron の Angular2」が将来のデスクトップ アプリ プロジェクトの要件を満たすかどうかを確認するために、少し概念実証を書こうとしています。
しかし、私は問題を抱えています...私は不可能を達成しようとしていますか、それともそれを行う方法はありますか? これが私のコンテキストです：
短縮版：
これを実行するにはどうすればよいですか：
@Injectable()
export class PluginManager {
getPluginComponentForEventType(eventtype: string): Type {
//return is angular "Type", later consumed by Dynamic Loader
var externalModule = require('../mtplugins/' + eventtype + 'plugin.ts');
return externalModule.TheRenderer;
}
}
このエラーが発生しない場合:
"../mtplugins/foorendererplugin.ts not declared as a dependency"
コンテキスト付きの長いバージョン:
コア要件は、私が呼ぶところの「動的フロントエンド プラグイン システム」のようなものです。これは、UI の一部を実行時に置き換え可能にする必要があることを意味しますが、そこに挿入されるコンポーネントを事前に知りません。
シナリオ例:
私のアプリは「foo」イベントを受け取ります：
leEvent: { eventtype: 'foo', payload: '...' }
そのため、プラグイン マネージャーに次のように伝えます。「foo」イベントをレンダリングするには、UI コンポーネントが必要です。
プラグイン マネージャーは、コンポーネントを含む「fooplugin.ts」ファイルを検索し、このファイルからコンポーネント クラスを動的にロードして、型を返します。現在 foo プラグインがない場合、ユーザーはこのファイルをプラグイン マーケットからプラグイン フォルダにダウンロードしてから、再試行できます。
次に、私のアプリは DynamicComponentLoader.loadIntoLocation を使用して、この動的に読み込まれた型を dom に統合し、コンポーネントに render(leEvent) を指示します。
angularでコンポーネントを動的にロードするこの最後の部分は問題ありません。私の問題点は、ファイルからクラスをロードするためのプラグインマネージャーメソッドです...これまでに得た最高のものはこれです:
@Injectable()
export class PluginManager {
getPluginComponentForEventType(eventtype: string): Type {
//return is angular "Type", later consumed by Dynamic Loader
var externalModule = require('../mtplugins/' + eventtype + 'plugin.ts');
return externalModule.TheRenderer;
}
}
「--module commonjs」で tsc を実行します。
メソッドを呼び出すと、「../mtplugins/foorendererplugin.ts は依存関係として宣言されていません」というメッセージが表示されます...まあ、実行時にしかわからないため、依存関係を事前に宣言することはできません。
では、実行時にのみ認識されるファイルから typescript クラスをロードする方法はありますか? Javaでは、クラスローダーでそれを行うと思うので、typescriptの対応するものが必要な気がします。私は実際に、commonjs を使用した typescript と require() がこれをサポートすることを読んだことがあると思っていたので、このメカニズムと angular の system.js の統合が噛み合っているのではないでしょうか?
angular2 と typescript と electron と node は初めてなので、基本的なことを見落としていたらご容赦ください。
編集
Louy が指摘したように、エラー メッセージは typescript 固有のものではありません。System.jsによってスローされました...
繰り返しますが、使用したいテクノロジーの学習にもう少し時間を費やすことは、常に良い投資であることがわかりました. 実際、私はここで初歩的なミスを犯しました: 異なるモジュール読み込みシステムを混同しました。実行時に外部モジュールをロードできるようにするには、CommonJS を使用する必要があると考えていましたが、実行時のロードは System.js でも十分にサポートされています。つまり、次のことを意味します。
それ以外の
require(..)
私は単に使用しなければならなかった
declare var System: any; //System.js Loader
...
System.import('./app/' + eventtype+ 'plugin.js');
次に、プラグインをアプリケーションのコアの実際のコードから独立させておくだけです（これはモジュールの混乱を引き起こします...そしてどちらにしてもアーキテクチャの臭いです）、代わりにインターフェースのみに依存します（Typescript ftw！）。
プラグ可能な angular2 UI に必要なのはこれだけです :)