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\node_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\node_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?

Answer 1

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 ;)

Answer 2

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"
]