Lazy Загрузка библиотеки/Зависимость с угловым 2/Webpack без маршрутизатора

Question

У меня есть веб-карта Mapbox в моем приложении Angular 2.

Карта привязывается к <div> тега, например так:

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

У меня есть две разные библиотеки, я могу использовать для моего веб-карты: Mapbox GL JS, который использует WebGL или Mapbox.js, который не использует WebGL и более совместим со старыми компьютерами и браузерами.

Когда пользователь загружает мое приложение, я хочу проверить, может ли его браузер использовать библиотеку WebGL. (Example here from Mapbox documentation.)

Если они поддерживают его, я хочу загрузить библиотеку Mapbox GL JS.

Если они не поддерживают его, я хочу загрузить Mapbox.js вместо этого в качестве резервной копии.

(Vanilla Javascript example of this behavior here.)

Я хочу, чтобы это сделать без загрузки обе библиотеки. Я только хочу загрузить одну библиотеку или другую, и весь связанный код, который я написал. (Каждая библиотека имеет свой собственный синтаксис/форматирование, поэтому я не могу повторно использовать один и тот же связанный код для любой библиотеки.)

Как вы думаете, лучшая стратегия для этого в приложении Angular 2 с помощью пакета модулей Webpack?

ПРИМЕЧАНИЕ: В этом случае я не могу использовать маршрутизатор для разделения двух разных карт; в противном случае это может быть намного проще ....

Answer 1

Хорошее решение (для Webpack) является использование либо System.import или require.ensure, как описано в этом ответе: https://stackoverflow.com/a/34489991/3403895

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

Эта ссылка также, кажется, хороший учебник для т его: Code Splitting in Angular 2 with Webpack 2 (http://blog.waffle.io/code-splitting-angular-2-webpack-2/)

Большое спасибо увещевать и ЯМЗ