Jquery无法工作在角度6错误:ENOENT:没有这样的文件或目录,打开’… \ node_modules \ jquery \ dist \ jquery.min.js’
我正在将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" ]
请帮我解决这个问题。
有远见的团队再一次让事情变得更难而不是真正的原因=(
我遇到了这个问题,谷歌搜索后无果而终,我想知道他们是否以某种方式更改了相对路径以及重命名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"
使用这个npm install --save @ng-bootstrap/ng-bootstrap
安装@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
以运行您的项目
在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"
在我看来,它更好,更清晰
对于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"
在您的文件’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" ], ...
相对路径../
用于返回一个目录。 因此,首先检查文件路径,如果它不包含您正在其他地方甚至不存在的jquery文件的项目根文件夹。
如果node_modules文件和angular.json都在同一目录中,则不需要使用相对路径。
在Angular 6中,您不需要使用相对路径从angular.json( ../
或甚至类似./
)进入node_modules。