使用Angular 2 / Webpack延遲加載庫/依賴關系而不使用路由器

Question

我的Angular 2應用程序中有一個Mapbox Web地圖。

地圖將自身附加到<div>標記，如下所示：

<div id="map"></div>

我有兩個不同的庫可用於我的Web地圖： Mapbox GL JS ，它使用WebGL，或Mapbox.js ，它不使用WebGL，並且與舊的計算機和瀏覽器更兼容。

當用戶加載我的應用程序時，我想測試他們的瀏覽器是否可以使用WebGL庫。 （ 這里的例子來自Mapbox文檔。 ）

如果他們支持它，我想加載Mapbox GL JS庫。

如果他們不支持它，我想加載Mapbox.js作為后備。

（ Vanilla這個行為的Javascript示例。 ）

我想這樣做而不加載兩個庫。 我只想加載一個庫或另一個庫，以及我編寫的所有相關代碼。 （每個庫都有自己不同的語法/格式，因此我無法為這兩個庫重用相同的關聯代碼。）

您認為使用Webpack模塊捆綁器在Angular 2應用程序中執行此操作的最佳策略是什么？

注意：在這種情況下，我不能使用路由器來分隔兩個不同的地圖; 否則這可能會容易得多....

Answer 1

一個好的解決方案（對於Webpack）是使用System.import或require.ensure ，如本答案中所述： https ： require.ensure

System.import方法：

export class MyAppComponent {
  constructor(){
    System.import('path/to/your/module').then(refToLoadedModule => {
      refToLoadedModule.someFunction();
    }
  );
}

require.ensure方法：

export class MyAppComponent {
  constructor() {
     require.ensure(['path/to/your/module'], require => {
        let yourModule = require('path/to/your/module');
        yourModule.someFunction();
     }); 
  }
}

這個鏈接似乎也是一個很好的教程： 使用Webpack 2在Angular 2中進行代碼拆分（http://blog.waffle.io/code-splitting-angular-2-webpack-2/）

非常感謝Harangue和ymz