Loading 3rd party scripts in an Angular typescript project build with Webpack

Question

I have an Angular project that makes use of Typescript and Webpack. It's a default Angular project template that comes with Visual Studio 2017.

It basically gives you a simple web application with a few NPM modules installed, like bootstrap and jquery.

I have an "3rd party" javascript file that can't be installed with NPM or Bower, but it does need jQuery.

The web application loads a main-client.js and main-client.vendor.js. Both are created by Webpack. The last one contains the code for Bootstrap, jQuery etc.

The scripts are included like this in my webpage (I actually have more scripts):

<script type="text/javascript" src="~/dist/main-client.js"></script>
<script type="text/javascript" src="~/dist/main-client.vendor.js"></script>
<script type="text/javascript" src="~/plugins/custom.jqueryfile.js"></script>

But the web page keeps giving me the following error:

Uncaught ReferenceError: jQuery is not defined

Below are some images that shows how the script order is setup in my project.

All files are loaded in correct order

So basically my question is: How can I load "3rd party" scripts properly that need to be loaded "globally", but also require jQuery. Is there a general place in my Typescript files somewhere? Or can it be done with Webpack?

Do you have jQuery as the first <script>? Do you use $ in your project? — Daniel Kucal
– Daniel Kucal, Commented Sep 22, 2017 at 3:09
No I don't have jQuery in a script tag. Is that really needed? Doesn't the vendor.js have jquery already in it. Since I import bootstrap in my .ts file (bootstrap automatically includes jquery, right?). — Vivendi
– Vivendi, Commented Sep 22, 2017 at 7:30

Daniel Kucal · Accepted Answer · 2017-09-22 11:54:08Z

1

The error occurs because you simply don't have jQuery included in your project. You can look for node_modules/jquery directory or type jQuery in console to check it.

As you can see in Bootstrap's package.lock file, jQuery appears only as a peer dependency.

If the 3rd party scripts you want to use have to be defined before webpack's vendor output, then I'd suggest to add usual script tag at the beginning of your index.html:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

You can also try just npm i jquery (don't forget --save flag for npm versions < 5). The plugins should wait for jQuery initialization, so it can also make it work. But then you also need to import 'jquery'; in your entry file.

answered Sep 22, 2017 at 11:54

Daniel Kucal

9,3227 gold badges46 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

Loading 3rd party scripts in an Angular typescript project build with Webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related