Angular CLI 没有用于 Jquery 或 Bootstrap 的此类文件或目录

Question

我有一个 Angular 项目，我想包含需要 jquery 作为依赖项的 bootstrap。

首先我安装了bootstrap

npm install bootstrap --save-dev

然后是 Jquery

npm install jquery --save-dev

然后我更新了我的 angular.json 文件

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

而且我已经用 Windows 资源管理器确认这两个文件都存在并且路径是正确的。

但是当我尝试编译时，我收到以下错误消息:

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'

我删除了我的项目名称和计算机名称并将其替换为“xxx”，但这是原始错误消息。我不知道我做错了什么。我使用 npm 安装了这个包。我确认这些包在 node_modules 文件夹中，然后我在我的 angular.json 文件中引用了它们。我不确定我错过了什么。

编辑

所以我犯了一个愚蠢的拼写错误。感觉不好。但我修复了它，但仍然收到错误消息。

打开'C:\Users\xxx\OneDrive\Documents\Repos\xxx\xxx\node_modues\jquery\dist\jquery.min.js'

为什么将 OneDrive 放在那里？我没有具体说明。上面的文件路径不正确，不存在。一个驱动器会不会搞砸了？

编辑 2

我禁用了一个驱动器，然后重新启动了我的 IDE。现在工作正常。似乎一个驱动器是罪魁祸首。也许与它如何自动备份和同步文件有关？

Answer 1

首先检查你的 package.json 文件是否在如下依赖项中:

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

如果您使用的是 angular 6，您可以像这样在 angular.json 中省略 ./:

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

也像这样省略 -dev:

npm install jquery --save

npm install bootstrap --save

因为 bootstrap 是您的应用运行的依赖项。

开发部门可以是例如angular-cli、codelyzer、业力等。

试一试，如果有帮助请告诉我 ;)