Angular-cli: Allow globally loaded javascript libs

Created on 16 Aug 2016 · 7Comments · Source: angular/angular-cli

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.

1 (urgent) feature

Source

filipesilva

👍7

Most helpful comment

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.

iamyojimbo on 16 Aug 2016

👍5

All 7 comments

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.

iamyojimbo on 16 Aug 2016

👍5

@iamyojimbo very good advice, thank you!

filipesilva on 17 Aug 2016

https://github.com/angular/angular-cli/pull/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 on 19 Aug 2016

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.

filipesilva on 20 Aug 2016

👍2

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

iamyojimbo on 22 Aug 2016

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.

filipesilva on 23 Aug 2016

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._}