Allow globally loaded javascript libs

[filipesilva]

Some javascript libraries need to be loaded on the global scope, especially older ones. A great, common example is bootstrap, which needs jquery to be globally available.

Different build systems have different ways to allow this. Webpack has several alternatives to shimming modules, and so does SystemJS.

Angular-CLI needs to provide a way to load these files in order to provide interop with the simplest way of loading javascript files.

[iamyojimbo]

In case anyone really needs this NOW, in Webpack, the solution is to do:

window['jQuery'] = require('jquery')
window['Chart'] = require('chart.js')

I do this in my main.ts file because I assumed this needs to be done before the dependencies are loaded (as some of them have checks to see if jQuery is there before you even call a function).

I don't know if this works with SystemJS too.

[filipesilva]

@iamyojimbo very good advice, thank you!

[filipesilva]

#1747 adds instructions on how to use libs that need global scope using @iamyojimbo's technique.

It should be enough for now but if people start having more problems with libs, we can add more functionality to address global scripts.

[filipesilva]

We looked into it a bit more and decided to take another approach to the global libs issue. We decided to provide a config item to specify javascript files that should be loaded outside of the module ecosystem, as if they were in a script tag.

We feel this should make it easier for people to add libs since they won't have to poke around for the exports, and also make it more compatible with all kinds of libs.

[iamyojimbo]

@filipesilva by, "poke around the the exports", what do you mean exactly?

[filipesilva]

Using your method, you need to know the exact names of the needed exports. For jquery this is jQuery and $. These are well known enough but for many libraries that isn't so clear, so a user would have to look into the source to figure out what exports they should put in window.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}