instalar - Jquery no funciona en angular 6 Error: ENOENT: no existe tal archivo o directorio, abra ''... / node_modules / jquery / dist / jquery.min.js''
jquery en angular 6 (7)
Estoy en proceso de migrar el proyecto Angular 5 al Angular 6.
Al iniciar la aplicación por
npm start
obteniendo el siguiente 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''
Lo intenté
npm install jquery --save
npm install @types/jquery --save
Nada esta funcionando
Revisé la carpeta de los módulos de mi nodo. Puedo ver el archivo jquery.
Pegado mi package.json y angular.json abajo
paquete.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"
]
Por favor, ayúdame a resolver este problema.
En Angular 6 no necesitas escribir:
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
Puede escribir con ./ como en la parte superior, esto también funcionará, pero de la forma más fácil en el archivo angular.json :
"node_modules/jquery/dist/jquery.js",
"node_modules/tether/dist/js/tether.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
En mi opinión es mejor y claro.
En tu archivo ''tsconfig.json'', puedes hacer tal vez
{
"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"],
}
Puedes reemplazar
"include": ["node_modules/angular-bootstrap-md/**/*.ts", "src/**/*.ts"],
a
"include": ["src/**/*.ts","node_modules/angular-bootstrap-md/**/*.ts" ],
Además, en su archivo ''angular.json'', elimino ''../'' delante de node_modules en "styles" y "scripts".
Y copié las líneas de los "scripts" en los "scripts" en la categoría "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"
],
...
Instale @ngBootstrap con este npm install --save @ng-bootstrap/ng-bootstrap y npm install jquery --save o npm install @types/jquery --save después de la instalación, vaya a angular.json y busque dónde
"styles": [
{
"input": "styles.css"
}
],
"scripts": []
y cambiarlo a esto:
"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"
]
y ng server --open para ejecutar su proyecto
Para Angular 6 el camino es el siguiente:
de :
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
a
"./node_modules/jquery/dist/jquery.js",
"./node_modules/tether/dist/js/tether.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
Tuve un problema similar ...
El plugin Jquery no tenía un npm package listo: (
Así que decidí ponerlo dentro de la carpeta de activos ...
Evidentemente eso no funcionó.
Así que hice algunas pruebas ...
Esto es lo que funcionó para mí:
Navegue a
node_modules/jquery/dist/- y simplemente inserta el archivo del plugin allí.
Una vez hecho esto, cambia tu archivo angular.json
desde:"scripts": ["node_modules / jquery / dist / jquery.min.js", "../assets/libraries/okshadow.min.js"]
A:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/jquery/dist/okshadow.min.js"
]
Y tu todo listo!
PS Esto es en Angular 7.0 lugar de Angular 6
Una vez más, el equipo angular hace las cosas más difíciles por razones no reales = (
Tuve este problema y después de buscar en Google infructuosamente, me pregunté si habrían cambiado las rutas relativas de alguna manera, así como cambiar el nombre de ángulo-cli.json.
Un poco más arriba en el archivo encontré la línea:
Sí, sólo cambia:
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
a
"./node_modules/jquery/dist/jquery.js",
"./node_modules/tether/dist/js/tether.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
../ relativa ../ utilizada para retroceder un directorio. Entonces, primero verifique la ruta del archivo, si no contiene la carpeta raíz del proyecto, está buscando ese archivo jquery en otro lugar que ni siquiera existe.
Si los archivos node_modules y angular.json están en el mismo directorio, no es necesario utilizar la ruta relativa.
En Angular 6, no es necesario utilizar una ruta relativa para ir dentro de node_modules desde angular.json ( ../ o incluso como ./ ).