Jquery not working in angular 6 Error: ENOENT: no such file or directory, open '...\node_modules\jquery\dist\jquery.min.js'

Question

I am in process migrating Angular 5 project to Angular 6.

While starting application by

npm start 

getting the below error

 ** Angular Live Development Server is listening on localhost: 9000,  open your browser on http://localhost:9000/ ** 91% additional asset processing scripts-webpack-plugin× ｢wdm｣:  Error: ENOENT: no such file or directory,open'\trunk\node_modules\jquery\dist\jquery.min.js' 

I tried

npm install jquery --save npm install @types/jquery --save 

Nothing is working

I checked my node modules folder I can able to see the jquery file

Pasted my package.json and angular.json below

package.json

"dependencies": { "@angular/animations": "^6.0.0", "@angular/common": "^6.0.0", "@angular/compiler": "^6.0.0", "@angular/core": "^6.0.0", "@angular/forms": "^6.0.0", "@angular/http": "^6.0.0", "@angular/platform-browser": "^6.0.0", "@angular/platform-browser-dynamic": "^6.0.0", "@angular/router": "^6.0.0", "@ng-bootstrap/ng-bootstrap": "^2.0.0", "bootstrap": "^4.1.1", "core-js": "^2.5.4", "font-awesome": "^4.7.0", "jquery": "^3.3.1", "@types/jquery": "^3.3.1", "popper.js": "^1.14.3", "rxjs": "^6.0.0", "zone.js": "^0.8.26"  }, "devDependencies": { "@angular/compiler-cli": "^6.0.0", "@angular-devkit/build-angular": "~0.6.0", "typescript": "~2.7.2", "@angular/cli": "~6.0.0", "@angular/language-service": "^6.0.0", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.2.1", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~1.4.2", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.3.0", "ts-node": "~5.0.1", "tslint": "~5.9.1" } 

angular.json

"styles": [           "src/styles.css",           "../node_modules/bootstrap/dist/css/bootstrap.min.css",           "./assets/css/font-icon.css",           "../node_modules/font-awesome/css/font-awesome.css"         ],         "scripts": [           "../node_modules/jquery/dist/jquery.min.js",           "../node_modules/popper.js/dist/umd/popper.min.js",           "../node_modules/bootstrap/dist/js/bootstrap.min.js"         ] 

Please help me to resolve this issue.

Answer 1

Once again the angular team makes things harder for not real reason =(

I had this problem and after Googling around fruitlessly I wondered if they had changed relative paths somehow as well as renaming angular-cli.json.

A little further up in the file I found the line:

Yeah, just change:

"../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js" 

to

"./node_modules/jquery/dist/jquery.js", "./node_modules/tether/dist/js/tether.js", "./node_modules/bootstrap/dist/js/bootstrap.js" 

Answer 2

In Angular 6 u don't need to write:

"../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js" 

You can write with ./ like on the top this will works too, but the easiest way in angular.json file:

"node_modules/jquery/dist/jquery.js", "node_modules/tether/dist/js/tether.js", "node_modules/bootstrap/dist/js/bootstrap.js" 

In my opinion it's better and clear