Proposal: Provide a way to add externals to webpack config

[MrChoclate]

The issue is that if I use global script via app[0].scripts I cannot use it again in my .ts files.

Example: if I have:

      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/moment/moment.js",
        "../node_modules/fullcalendar/dist/fullcalendar.min.js"
      ],

I cannot do: import * as moment from 'moment';. If I do so, moment will become an empty object. Of course, I can use it without importing it since it is global BUT other libs that depends on moment (angular2-moment in my case) will do import * as moment from 'moment';, they will get an empty object and their code will break.
Then I cannot use this libs. (I think #1974 is related)

I cannot remove moment from scripts since I have other global scripts that depend on it (fullcalendar). Maybe there is a way to make all this scripts work without apps[0].scripts but I have not found it.

My solution is to use webpack externals https://webpack.github.io/docs/library-and-externals.html

If I add

externals: {
      'moment': 'moment'
    },

to webpack-build-common.ts it is working.

I can provide a PR adding externals from apps[0].externals to the webpack config. Is it the right solution?

[clydin]

Something to experiment with (that does not require modification of the CLI itself) is to add a vendor.ts file to the first position of scripts in angular-cli.json and remove the jquery and moment lines.

Potential contents of vendor.ts:

import * as moment from 'moment';
import * as jquery from 'jquery';

window['moment'] = moment;
window['jQuery'] = window['$'] = jquery;

[isaackehle]

I am interested in this feature as well, for this exact reason. Is this in process?

[alejoar]

@pgkehle the solution provided by @clydin works perfectly, although I am interested on this working out of the box too.

[isaackehle]

@alejoar I am working through this, but getting a lot of errors related now to jQuery not found, as my app uses bootstrap v4 and other modules. Curious if there is a working example.

bootstrap.js:8 Uncaught Error: Bootstrap's JavaScript requires jQuery

[filipesilva]

@pgkehle you can already use bootstrap4, see https://github.com/angular/angular-cli#global-library-installation. The problem shown in this issue is specific to how dependencies used in both scripts and inside your app interact.

[MrChoclate]

@clydin Your fix does not seem to work for me in Firefox 49 but works in Chrome 53.
I ran into an issue with scrolltofixed plugin (unhelpful error message). (Works with my PR)

But I had to use $('#calendar').fullCalendar in ngAfterViewChecked and not after ngAfterViewInit (for Firefox and with my PR). So maybe I misused life cycle hooks with the scrolltofixed plugin.

Anyway, either your fix does not work with Firefox or lifecycle hooks works differently between Chrome and Firefox. Did you test your fix with Firefox? When do you use jQuery plugins? ngAfterViewInit or ngAfterViewChecked?

[maxailloud]

I have the exact same issue with almost (not the same calendar package) the same case with moment.
Definitely something weird going on here.