2

I'm having problems embedding a jQuery cascading dropdown component to my Angular 6 project. I got an error when attempting to run ng serve:

Error: ENOENT: no such file or directory, open C:\nodeprojects\node_modules\jquery\dist\jquery.min.js.


Here are the steps I took to add jQuery to Angular 6:

  1. Ran

npm install jquery

' and verified jquery.min.js was in that path listed above.

  1. Modified angular.json (Angular 6 no longer has an 'angular-cli.json' file) and added the relative path to the jquery.min.js file in the 'scripts []' section.

  2. I'm using app.component as the target component. In app.component.ts, I entered, declare var $: any; and entered the jquery custom component function inside export class AppComponent implements OnInit().

The jquery component I am trying to embed into Angular is located at https://jsfiddle.net/brohjoe/zgc0n1q5/1/

The HTML was entered into app.component.html. I deleted references to the script src because the minified jquery library was listed in angular.json as mentioned and the custom.js code was embedded in app.component.ts as mentioned above.

After running localhost:4200, the only ui elements that will display are the dropdowns with no data.

Vikas
  • 11,859
  • 7
  • 45
  • 69
brohjoe
  • 854
  • 4
  • 17
  • 39
  • 2
    Have a look at [this](https://stackoverflow.com/a/50294196/5695162) – Vikas Jun 10 '18 at 05:33
  • Thank you Vikas. That site helped. I had two leading dots in the path to the jQuery library, but the node_modules directory and the angular.json file are on the same level, so removing the leading dots fixed the problem. Compiled with no errors! – brohjoe Jun 10 '18 at 06:49

3 Answers3

6

Make sure you upgraded the latest Angular CLI version. To check, run ng --version command.

npm install -g @angular/cli@latest

To download Bootstrap package in your project node_modules, use this command. It will also include related jQuery.

npm install --save bootstrap

or simply jQuery 

npm install jquery --save

No look for "Angular.json" file and edit this script under "Projects:{...}" like bellow:

    "styles": [
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.js",
      "node_modules/bootstrap/dist/js/bootstrap.js"
    ]

Then you can import jquery file into your app.module.ts file like the way:

import * as $ from 'jquery';

After all done above those tasks, If you have same error, check your "package.json" file to make sure whether packages are installed.

Subarata Talukder
  • 5,407
  • 2
  • 34
  • 50
0

I wanted to load a customized jquery-ui.min.js located in my src folder via "scripts": ["src/jquery-ui.min.js"] of angular.json like OPTION 1 suggests, but for some angular routing configurations this doesn't work (see issue).

In this case OPTION 2 works: add the script with an absolute url as script tag to the body of your src/index.html file.

Katja
  • 727
  • 8
  • 8
0

Refering following Link: Medium.com - How to include and use jQuery in Angular CLI project

Answer for Angular 4+ application.

First install jQuery using npm as follows

npm install jquery — save

Second go to the angular.json file at the root of your Angular CLI project folder, and find the scripts: [] property, and include the path to jQuery as follows

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

Note: If you want to use bootstrap or https://materializecss.com in your application or if you already have in your project.

make sure to include jQuery before including the bootstrap javascript file as follows. Since bootstrap’s and Materializecss javascript file requires jQuery.

I have used Materializecss and also added CSS file into style.

       "styles": [
          "./node_modules/materialize-css/dist/css/materialize.css",
          "src/styles.css"
        ],
        "scripts": ["./node_modules/jquery/dist/jquery.min.js",
        "./node_modules/materialize-css/dist/js/materialize.js"]
Deva
  • 1,851
  • 21
  • 22