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

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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"

Answer 5

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

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

Answer 7

../ 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 ./ ).