Adding a jQuery component to Angular 6

Question

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.

2. 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.

3. 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.

Solution

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.

Comments

[Vikas]

Have a look at this

[brohjoe]

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!