Jquery不工作在角度6错误：ENOENT：没有这样的文件或目录，打开'... \ node_modules \ jquery \ dist \ jquery.min.js'

时间：2018-05-10 20:23:32

标签： jquery angular angular6

我正在将Angular 5项目迁移到Angular 6。

按

开始申请 
npm start

得到以下错误

 ** 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'

我试过

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

什么都没有用

我检查了我的节点模块文件夹，我可以看到jquery文件

粘贴我的package.json和angular.json

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

请帮我解决此问题。

14 个答案:

答案 0 :(得分：66)

有远见的团队再次让事情变得更难而不是真正的原因=（

我遇到了这个问题，谷歌搜索后毫无结果，我想知道他们是否以某种方式更改了相对路径以及重命名angular-cli.json。

我在文件中稍微向上找到了这一行：

是的，只需改变：

while

到

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

答案 1 :(得分：4)

对于Angular 6，路径如下：

来自：

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

至 

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

答案 2 :(得分：4)

我有同样的问题。 除非“ npm install”命令中包含“ --save”，否则安装似乎不会更新package.json文件。

换句话说，软件包应与

一起安装 
npm install --save bootstrap
npm install --save jquery
npm install --save popper.js

答案 3 :(得分：1)

使用此@ngBootstrap安装npm install --save @ng-bootstrap/ng-bootstrap  和npm install jquery --save或 安装后npm install @types/jquery --save转到angular.json并找到

"styles": [
              {
                "input": "styles.css"
              }
            ],
            "scripts": []

并将其更改为：

"styles": [
    "styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "./node_modules/jquery/dist/jquery.min.js",
    "./node_modules/bootstrap/dist/js/bootstrap.min.js"
  ]

和ng server --open来运行您的项目

答案 4 :(得分：1)

在Angular 6中你不需要写：

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

您可以使用./编写，如上所述，这也可以，但angular.json文件中最简单的方法：

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

在我看来，它更好更清晰

答案 5 :(得分：0)

在您的文件'tsconfig.json'中，您可以

{
  "compileOnSave": false,
  "compilerOptions": {
  "baseUrl": "./",
  "outDir": "./dist/out-tsc",
  "sourceMap": true,
  "declaration": false,
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "target": "es5",
  "typeRoots": [
  "node_modules/@types"
  ],
  "lib": [
    "es2017",
    "dom"
  ]
 },
"include": ["node_modules/angular-bootstrap-md/**/*.ts",  "src/**/*.ts"], 
}

您可以替换

"include": ["node_modules/angular-bootstrap-md/**/*.ts",  "src/**/*.ts"],

到

"include": ["src/**/*.ts","node_modules/angular-bootstrap-md/**/*.ts" ],

此外，在你的文件'angular.json'中，我删除了“styles”和“scripts”中node_modules前面的'../'。

我在“测试”类别的“脚本”中复制了“脚本”的行

"test": {
     ...
     "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"
     ],
     ...

答案 6 :(得分：0)

相对路径../用于返回一个目录。因此，首先检查文件路径，如果它不包含您的项目根文件夹，则您正在其他甚至不存在的jquery文件中搜索该文件。

如果node_modules文件和angular.json都在同一目录中，则不需要使用相对路径。

在Angular 6中，您不需要使用相对路径就可以从angular.json（../甚至像./）进入node_modules。

答案 7 :(得分：0)

我遇到了类似的问题...

Jquery插件尚未准备好npm package：（
 所以我决定将其放在资产文件夹中...
 显然那没有用。
 所以我做了一些测试...

这对我有用：

  • 导航到node_modules/jquery/dist/

  • -并在其中插入插件文件。

  • 完成后，更改您的angular.json文件
    来自：

    “脚本”：[       “ node_modules / jquery / dist / jquery.min.js”，       “ ../assets/libraries/okshadow.min.js” ]

收件人：

"scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/jquery/dist/okshadow.min.js"
]

您的全部准备好了！

P.S。这是在Angular 7.0而非Angular 6

上

答案 8 :(得分：0)

“ node_modules / bootstrap / dist / css / bootstrap.min.css” 不 “ ../ node_modules / bootstrap / dist / css / bootstrap.min.css”

我们不使用相对路径。

答案 9 :(得分：0)

angular-cli.json中的路径相对于项目根目录（通常为src /）。例如，您有src / styles.css文件，但是在angular-cli.json中，它仅列为styles.css。

答案 10 :(得分：0)

解决错误 An unhandled exception occurred: Script file node_modules/jquery/dist/jquery.min.js does not exist.

尝试安装：

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

希望这会起作用

答案 11 :(得分：0)

您可能在创建应用程序时忘记运行“npm install -g @angular/cli”命令。

答案 12 :(得分：0)

通过删除 ../ 和 ./ 解决

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "node_modules/jquery/dist/jquery.js"
]

答案 13 :(得分：0)

在 Angular 12 中，我没有前面的点和斜线，但为了解决这个错误，我不得不添加它们。

所以我改变了

node_modules/jquery/dist/jquery.js

到

./node_modules/jquery/dist/jquery.js

在 angular.json 文件中

相关问题
最新问题