Angular CLI no such file or directory for Jquery or bootstrap

Question

I have an angular project that I want to include bootstrap which requires jquery as a dependency.

First I installed bootstrap

npm install bootstrap --save-dev

Then Jquery

npm install jquery --save-dev

Then I updated my angular.json file

"styles": [
   {
     "input": "src/custom-Theme.scss"
   },
   "./node_modues/bootstrap/dist/css/bootstrap.css",
   "src/styles.css"
],
"scripts": [
   "./node_modues/jquery/dist/jquery.min.js",
   "./node_modules/bootstrap/dist/js/bootstrap.js"
]

And I have confirmed with windows explorer that both of these files exist and that the path is correct.

But when I try to compile, I get the following error message:

Module not found: Error: Can't resolve 'C:\Users\xxx\OneDrive -\Documents\Repos\xxx\xxx ode_modues\bootstrap\dist\css\bootstrap.css' in 'C:\Users\xxx\OneDrive\Documents\Repos\xxx\xxx'

I've removed my project name and computer name and replaced it with 'xxx' but that's the original error message. I have no clue what I did wrong. I installed the package using npm. I confirmed that the packages were in the node_modules folder, and then I referenced them in my angular.json file. I'm not sure what I'm missing.

EDIT

So I had a silly spelling mistake. Feels bad. But I fixed that and I'm still getting an error message.

open 'C:\Users\xxx\OneDrive \Documents\Repos\xxx\xxx ode_modues\jquery\dist\jquery.min.js'

Why is it putting OneDrive there? I didn't specify that. The file path above is not correct and doesn't exist. Could one drive be screwing this up?

EDIT 2

I disabled one drive and then restarted my IDE. Works fine now. Seems that one drive was the culprit. Maybe something to do with how it automatically backs up and syncs files?

user_9793532 · Answer

First of all check your package.json file if they are in the dependencies like:

"dependencies": {
    .....
    .....
    "bootstrap": "^4.1.1",
    "jquery": "^3.3.1",
  },

if u are using angular 6 you can ommit the ./ in the angular.json like that:

"styles": [
  {
    "input": "src/custom-Theme.scss"
  },
  "node_modues/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],
"scripts": [
  "node_modues/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
]

also ommit the -dev like:

npm install jquery --save

npm install bootstrap --save

since bootstrap is a dependency for your app to run.

a dev-dep would be e.g. angular-cli, codelyzer, karma etc..

give it a shot and let me know if it helped ;)

user_2079900 · Answer

Silly spelling mistake it is. node_modues should be node_modules. It is ideal to copy/paste file paths rather than typing them.

"styles": [
  {
    "input": "src/custom-Theme.scss"
  },
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
]

user_2070478 · Answer

Short Answer - Disable OneDrive

Longer Answer - I don't exactly know what happened. I realized that the file paths that the CLI was spitting out had 'oneDrive' in the path and I know that that path wasn't something I created. Assuming it had to do with Microsoft's OneDrive, I disabled it by right-clicking on the icon in the system tray. I then restarted my IDE and after that it all worked fine. I can't say definitively that OneDrive was the issue or that anyone using it will face the same issues I did. But it's what worked for me so hopefully, this answer helps someone else.

Angular CLI no such file or directory for Jquery or bootstrap

3 Answers