Can't Find JQuery When Running 'ng test

Question

I have created a project using new angular-cli version and I made the project up and running. When I run ng serve and ng build command it works perfectly without giving any errors. But when I tried to run ng test it shows me errors like this.

theme.provider.ts (53,31): Property 'removeClass' does not exist on type 'JQuery'.
theme.provider.ts (64,35): Property 'addClass' does not exist on type 'JQuery'.
theme.provider.spec.ts (7,30): Cannot find name '$'.

I have added JQuery in the following way to the angular-cli.json

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

Then I have imported JQuery to my main module via this way

import 'jquery';

Are there any missing steps in the above configurations?

Answer 1

Assuming you have @types/jquery installed, try adding jquery to the list of types in tsconfig.spec.json (it should already have jasmine and node in the list).

---

Also, when you add jquery.min.js to the scripts list in angular-cli.json, it ends up in your scripts.bundle.js. When you then do import 'jquery'; in your main module it also ends up in your vendor.bundle.js, so you have added the code twice.

Instead of doing import 'jquery';, just add jquery to your compilerOptions types list in tsconfig.app.json (or create one "types": ["jquery"]). You will then be able to reference the global jquery object without importing it a second time.