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
– Fizzix, Commented Apr 20, 2017 at 4:29
Because this one component pulls content (and what scripts need to be loaded) from a Firebase database. — eat-sleep-code
– eat-sleep-code, Commented Apr 20, 2017 at 5:02
You need to do System.imports in a script tag within your index file when bootstraping your app. — Yeysides
– Yeysides, Commented Apr 25, 2017 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
– Yeysides, Commented Apr 25, 2017 at 14:42

Community · Accepted Answer · 2017-05-23 12:34:33Z

3

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.

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Apr 25, 2017 at 20:37

eat-sleep-code

4,88516 gold badges58 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 4 with Webpack 2, dynamically loading scripts

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related