Angular 4 with Webpack 2, dynamically loading scripts

Question

I am just dabbling with Angular 4 with Webpack 2 on a project.

I am attempting to load some scripts during ngOnInit and am running into some problems.

Problem 1.)

I have the following code within my ngOnInit:

System.import(`../../node_modules/jquery/dist/jquery.js`);
System.import(`../../node_modules/jquery-validation/dist/jquery.validate.js`);
System.import(`../../node_modules/jquery-validation/dist/additional-methods.js`);
System.import(`assets/js/regular-expressions.js`);

When i do this, all the assets appear to load but I get an error of:

Uncaught (in promise): ReferenceError: $ is not defined

$ should be defined in the jQuery file. Why is the regular-expressions.js file not aware that jQuery has been loaded?

Problem 2.)

Ultimately, I need to load dynamically load the scripts (as they are not needed on every page).

I have the following code:

let script = 'assets/js/' + scripts[i].replace(/^\/|\/$/g, '');
/* The following two lines output the same exact text to the console */
console.log('assets/js/regular-expressions.js');
console.log('' + script + '');

/* The following hard-coded line works (as in the script is loaded, raising the $ issue mentioned above */
System.import('assets/js/regular-expressions.js');

/* The following line with a variable throws an error of "Cannot find module 'assets/js/regular-expressions.js'." */
System.import('' + script + '');

I am not understanding why there is a difference in behavior. Especially if the value being passed to System.import is exactly the same.

I'm a little confused as to why you're doing this. You state that you "need to load dynamically load the scripts (as they are not needed on every page)", although why not just go `System.import("...")` at the top of the components that require the scripts, and then load the component when needed? — Fizzix, Apr 20 '17 at 04:29
Because this one component pulls content (and what scripts need to be loaded) from a Firebase database. — eat-sleep-code, Apr 20 '17 at 05:02
You need to do System.imports in a script tag within your index file when bootstraping your app. — Yeysides, Apr 25 '17 at 13:24
You do System.import('app') once in index and have all other imports in your main app module or feature modules that the dependencies are needed in. — Yeysides, Apr 25 '17 at 14:42
I am not sure I am following you. As you will note in my question, the script locations that will be called are stored in a database. — eat-sleep-code, Apr 25 '17 at 15:24

score 3 · Accepted Answer · edited May 23 '17 at 12:34

I ended up figuring out this was pretty much a (pretty big) limitation of webpack. I get the idea of tree-shaking, etc. but WebPack really should allow developers the OPTION of loading a script at runtime.

I ended up using this method now: https://stackoverflow.com/a/37844389/3389346

This isn't the greatest because it requires an application wide dependence on jQuery. I will go back and correct it if the WebPack folks ever decided to allow developers the option of one-off loading a script.

Angular 4 with Webpack 2, dynamically loading scripts

1 Answers1

Linked