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

Question

提问by MPPNBD

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

我正在将 Angular 5 项目迁移到 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

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

Pasted my package.json and angular.json below

在下面粘贴我的 package.json 和 angular.json

package.json

包.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

回答by Belmiris

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.

我遇到了这个问题，在谷歌搜索无果之后，我想知道他们是否以某种方式改变了相对路径以及重命名了 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

回答by Diego

For Angular 6 the path is as follows:

对于 Angular 6，路径如下：

from:

来自：

"../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 3

回答by Freestyle09

In Angular 6 u don't need to write:

在 Angular 6 中你不需要写：

"../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.jsonfile:

您可以./在顶部使用like写这也可以，但最简单的方法是在angular.json文件中：

"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

在我看来它更好更清晰

Answer 4

回答by Alverson Layne

I had the same issue. It appears the installation doesn't update the package.json file unless "--save" is included in the "npm install" command.

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

In other words, the packages should be installed with

换句话说，这些包应该安装

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

Answer 5

回答by Wealsegun

Install @ngBootstrapwith this npm install --save @ng-bootstrap/ng-bootstrapand npm install jquery --saveor npm install @types/jquery --saveafter the installation go to angular.jsonand locate where

安装@ngBootstrap这个npm install --save @ng-bootstrap/ng-bootstrap和npm install jquery --save或 npm install @types/jquery --save在安装后去angular.json，然后找到

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

and change it to this :

并将其更改为：

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

and ng server --opento run your project

并ng server --open运行您的项目

Answer 6

回答by Kyky

In your file 'tsconfig.json', you make maybe

在您的文件 '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"], 
}

You can replace

你可以更换

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

to

到

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

Moreover, in your file 'angular.json', I delete '../' in front of node_modules in "styles" and "scripts".

此外，在您的文件“angular.json”中，我删除了“样式”和“脚本”中 node_modules 前面的“../”。

And I copied lines of the "scripts" in the "scripts" in the category "test"

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

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

Answer 7

回答by Blasanka

Relative path ../used to go back one directory. So, first check the file path, if its not contain your project root folder you are searching that jquery file somewhere else that even not exist.

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

If node_modules file and angular.json both in same directory you donot need to use relative path.

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

In Angular 6, you donot need to use relative pathto go inside node_modules from angular.json(../or even like ./).

在 Angular 6 中，你不需要使用相对路径从 angular.json(../甚至像./)进入 node_modules 。

Answer 8

回答by 255.tar.xz

I had a similar issue...

我有一个类似的问题...

The Jqueryplugin didn't have an npm packageready : (
So I decided to put it inside the assets folder...
Evidently that didn't work.
so I did some testing...

该Jquery插件没有npm package准备好:(
所以我决定把它放在assets文件夹中......
显然这不起作用。
所以我做了一些测试......

Here's what worked for me:

以下是对我有用的内容：

Navigate to node_modules/jquery/dist/
— and simply insert the plugin file there.
Once this is done change your angular.json file
from:
"scripts": [ "node_modules/jquery/dist/jquery.min.js", "../assets/libraries/okshadow.min.js" ]

导航 node_modules/jquery/dist/
- 只需在那里插入插件文件。
完成此操作后，请
从以下位置更改 angular.json 文件：
“脚本”：[“node_modules/jquery/dist/jquery.min.js”，“../assets/libraries/okshadow.min.js”]

To:

到：

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

And your all set!

和你的一切！

P.S. This is on Angular 7.0rather than Angular 6

PS 这是开启Angular 7.0而不是Angular 6

Answer 9

回答by Anushil Kumar

"node_modules/bootstrap/dist/css/bootstrap.min.css" not "../node_modules/bootstrap/dist/css/bootstrap.min.css"

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

We don't use a relative path.

我们不使用相对路径。

Answer 10

回答by Muthusankar

Paths in angular-cli.json are relative to the project root (src/ normally). For instance, you have the src/styles.css file, but in angular-cli.json it's listed only as styles.css.

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

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

提问by MPPNBD

回答by Belmiris

回答by Diego

回答by Freestyle09

回答by Alverson Layne

回答by Wealsegun

回答by Kyky

回答by Blasanka

回答by 255.tar.xz

回答by Anushil Kumar

回答by Muthusankar

相关推荐

最近更新

标签

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

提问by MPPNBD

回答by Belmiris

回答by Diego

回答by Freestyle09

回答by Alverson Layne

回答by Wealsegun

回答by Kyky

回答by Blasanka

回答by 255.tar.xz

回答by Anushil Kumar

回答by Muthusankar

相关推荐

jQuery 如何使用css并排正确浮动两列

jQuery jsPdf 为pdf页面添加边距

jQuery 脚本导致“拒绝执行内联脚本：启用内联执行需要‘unsafe-inline’关键字、哈希……或随机数”

jQuery 为什么找不到我的 json 文件？

相关推荐

最近更新

标签