web-dev-qa-db-ja.com

JQueryがangularで機能しない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"
        ]

この問題を解決するのを手伝ってください。

jqueryangularangular6
26
MPPNBD

もう一度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"
73
Belmiris

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"
4
Diego

Angular 6 uに書く必要はありません：

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

上の./のように書くこともできますが、これはangular.jsonファイルで最も簡単な方法です：

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

私の意見では、それは良くて明確です

1
Freestyle09

インストール後に@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

1
Wealsegun

あなたのファイル「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」カテゴリの「scripts」にある「scripts」の行をコピーしました

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

「node_modules/bootstrap/dist/css/bootstrap.min.css」ではなく「../node_modules/bootstrap/dist/css/bootstrap.min.css」

相対パスは使用しません。

0
Anushil Kumar

1つのディレクトリに戻るために使用される相対パス../。そのため、最初にファイルパスを確認します。プロジェクトのルートフォルダーが含まれていない場合は、jqueryファイルが存在しない場所で検索しています。

Node_modulesファイルとangular.jsonの両方が同じディレクトリにある場合、相対パスを使用する必要はありません。

Angular 6では、angular.json（../または./のような）からnode_modules内に移動するために相対パスを使用する必要はありません。

0
Blasanka

同様の問題がありました...

Jqueryプラグインにはnpm package readyがありませんでした：（
それで、私はそれをアセットフォルダに入れることにしました...
明らかにそれは機能しませんでした。
だからテストをしました...

ここに私のために働いたものがあります：

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

そして、あなたのすべてのセット！

追伸これはAngular 7.0ではなくAngular 6にあります

0
Techtiger255 Code Mode

Angular-cli.jsonのパスは、プロジェクトのルート（通常はsrc /）からの相対パスです。たとえば、src/styles.cssファイルがありますが、angular-cli.jsonではstyles.cssとしてのみリストされています。

0
Muthusankar