New StackOverflow Question: Lazy Loading a Library/Dependency with Angular 2 / Webpack without Router

[stacko...@mg.bodar.com]

Lazy Loading a Library/Dependency with Angular 2 / Webpack without Router

Asked by MattSidor on 2017-01-25T22:00:09Z

Reply on StackOverflow

I have a Mapbox web map in my Angular 2 application.

The map attaches itself to a <div> tag, like so:

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

I have two different libraries I can use for my web map: Mapbox GL JS, which uses WebGL, or Mapbox.js, which does not use WebGL and is more compatible with older computers and browsers.

When the user loads my application, I want to test to see if their browser can use the WebGL library. (Example here from Mapbox documentation.)

If they support it, I want to load the Mapbox GL JS library.

If they do not support it, I want to load Mapbox.js instead as a fallback.

(Vanilla Javascript example of this behavior here.)

I want to do this without loading both libraries. I only want to load one library or the other, and all of the associated code that I have written. (Each library has its own different syntax/formatting, so I cannot reuse the same associated code for either library.)

What do you think is the best strategy for doing this in an Angular 2 application using the Webpack module bundler?

NOTE: In this instance, I cannot use the router to separate the two different maps; otherwise this could be a lot easier....

Reply on StackOverflow