如何將動態外部組件加載到Angular應用程序中

Question

我遇到了Angular應用程序的問題。

我想用（aot）的Typscript構建一個角度應用程序。

目的是顯示帶有一些小部件的用戶儀表板。 小部件是角度組件。

我的應用程序附帶了一些嵌入式小部件。 但小部件應該通過像市場這樣的東西來擴展; 或手動創建。

市場應該將文件（js / ts / bunlde .. ??）下載到特定的文件夾中。

然后我的應用程序應該能夠加載新的小部件（= ng組件）並實例化它們。

我的文件夾結構（制作）

  |- index.html
  |- main.f5b448e73f5a1f3f796e.bundle.js
  |- main.f5b448e73f5a1f3f796e.bundle.js.map
  |- .... (all other files generated)
  |- externalWidgets
      |- widgetA
            |- widjetA.js
            |- widjetA.js.map
            |- assets
                 |- image.png
      |- widgetB
            |- widjetB.ts
            |- widjetB.html
            |- widjetB.css

然后在加載用戶頁面時，數據庫說有一個widgetA。 因此，目標是動態加載文件和instanciate包含的組件。

我嘗試過很多解決方案，使用“require”和“System.import”，但是當動態生成加載路徑時，兩者都失敗了。

這應該是可能的嗎？ 我可以改變我的代碼結構; 更改外部小部件..（例如，widgetB尚未轉換，...​​）

事實上，我正在尋找一個帶有Angular4 / webpack應用程序的“插件系統”。

Answer 1

我做的完全一樣。 我在NgConf的演講中解釋了細節。

首先要了解的是Webpack無法動態加載構建期間未知的模塊。 這是Webpack構建依賴關系樹並在構建期間收集模塊標識符的方式所固有的。 它完全沒問題，因為Webpack是一個模塊捆綁器，而不是模塊加載器。 所以你需要使用模塊加載器，現在唯一可行的選擇是SystemJS。

然后，應將每個插件打包為一個模塊，並將所有導出的組件添加到該模塊的entryComponents中。

在運行時，您將加載該模塊以訪問內部聲明的組件（如果它）。 你真的不需要一個模塊，但這是Angular中的一個包裝單元，所以你不能避免使用它。 現在，一旦你得到一個模塊，你必須選擇，具體取決於模塊是否是使用AOT構建的。

如果它是使用AOT構建的，您只需從模塊中獲取導出的工廠類並創建模塊實例：

System.import('path/to/module').then((module)=>{
    const moduleFactory = module.moduleFactoryClassName;
    const moduleRef = moduleFactory.create(this.parentInjector);
    const resolver = moduleRef.componentFactoryResolver;
    const compFactory = resolver.resolveComponentFactory(AComponent);
}

如果它不是使用AOT構建的，則必須使用JIT編譯器進行編譯：

System.import('path/to/module').then((module)=>{
    const moduleFactory = this.compiler.compileModuleSync(module.moduleClassName);
    const moduleRef = moduleFactory.create(this.parentInjector);
    const resolver = moduleRef.componentFactoryResolver;
    const compFactory = resolver.resolveComponentFactory(AComponent);
}

然后，您可以使用本文中介紹的技術在任何位置添加動態組件： 以下是您需要了解的有關Angular中動態組件的信息