42

我正在将 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

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

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

请帮我解决这个问题。

4

14 回答 14

106

Angular 团队再一次让事情变得更加困难，这不是真正的原因 =(

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

在文件的更深处，我发现了这一行：

是的，只是改变：

"../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"
于 2018-05-19T16:59:02.780 回答
7

在 Angular 6 中你不需要写：

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

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

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

在我看来，它更好更清晰

于 2018-06-11T12:59:19.540 回答
5

对于 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"
于 2018-08-27T11:06:28.783 回答
5

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

换句话说，软件包应该安装

npm install --save bootstrap
npm install --save jquery
npm install --save popper.js
于 2020-02-27T16:30:55.867 回答
2

修复错误 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

希望这会奏效

于 2020-08-06T15:52:10.277 回答
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运行您的项目

于 2018-05-29T08:59:08.407 回答
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”中，我删除了“样式”和“脚本”中 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"
     ],
     ...
于 2018-05-15T19:14:20.163 回答
0

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

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

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

于 2018-10-08T09:18:42.357 回答
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"
]

一切就绪！

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

于 2019-01-11T03:01:45.557 回答
0

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

我们不使用相对路径。

于 2019-08-14T22:33:56.413 回答
0

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

于 2019-09-01T07:45:50.877 回答
0

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

于 2021-05-14T09:37:36.370 回答
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"
]
于 2021-05-30T21:54:49.487 回答
0

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

所以我改变了

node_modules/jquery/dist/jquery.js

到

./node_modules/jquery/dist/jquery.js

在 angular.json 文件中

于 2021-07-09T08:57:55.937 回答