モジュール「@ angular-devkit / build-angular」が見つかりませんでした


450

Angular 6.0.1に更新した後、次のエラーが発生しng serveます:

Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName".
Error: Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName".
    at Object.resolve (/home/Projects/myProjectName/node_modules/@angular-devkit/core/node/resolve.js:141:11)
    at Observable.rxjs_1.Observable [as _subscribe] (/home/Projects/myProjectName/node_modules/@angular-devkit/architect/src/architect.js:132:40)

ng updateすべてが順調であると言います。node_modulesフォルダーの削除と新規npm installインストールでも効果がありませんでした。

私のプロジェクトはng2-admin(Angular4バージョン)に基づいています。これが私のpackage.jsonの依存関係です:

 "dependencies": {
    "@angular/animations": "^6.0.1",
    "@angular/common": "^6.0.1",
    "@angular/compiler": "^6.0.1",
    "@angular/core": "^6.0.1",
    "@angular/forms": "^6.0.1",
    "@angular/http": "^6.0.1",
    "@angular/platform-browser": "^6.0.1",
    "@angular/platform-browser-dynamic": "^6.0.1",
    "@angular/platform-server": "^6.0.1",
    "@angular/router": "^6.0.1",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
    "@ngx-translate/core": "^10.0.1",
    "@ngx-translate/http-loader": "^3.0.1",
    "amcharts3": "github:amcharts/amcharts3",
    "ammap3": "github:amcharts/ammap3",
    "angular-table": "^1.0.4",
    "angular2-csv": "^0.2.5",
    "angular2-datatable": "0.6.0",
    "animate.css": "3.5.2",
    "bootstrap": "4.0.0-alpha.6",
    "bower": "^1.8.4",
    "chart.js": "1.1.1",
    "chartist": "0.10.1",
    "chroma-js": "1.3.3",
    "ckeditor": "4.6.2",
    "core-js": "2.4.1",
    "easy-pie-chart": "2.1.7",
    "font-awesome": "4.7.0",
    "fullcalendar": "3.3.1",
    "google-maps": "3.2.1",
    "ionicons": "2.0.1",
    "jquery": "3.2.1",
    "jquery-slimscroll": "1.3.8",
    "leaflet": "0.7.7",
    "leaflet-map": "0.2.1",
    "lodash": "4.17.4",
    "ng2-ckeditor": "1.1.6",
    "ng2-completer": "^1.6.3",
    "ng2-handsontable": "^2.1.0-rc.3",
    "ng2-slim-loading-bar": "^4.0.0",
    "ng2-smart-table": "^1.0.3",
    "ng2-tree": "2.0.0-alpha.5",
    "ngx-uploader": "4.2.4",
    "normalize.css": "6.0.0",
    "roboto-fontface": "0.7.0",
    "rxjs": "^6.1.0",
    "rxjs-compat": "^6.1.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "^6.0.1",
    "@angular/compiler-cli": "^6.0.1",
    "@types/fullcalendar": "2.7.40",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "2.0.41",
    "@types/jquery.slimscroll": "1.3.30",
    "@types/lodash": "4.14.61",
    "@types/node": "6.0.69",
    "codelyzer": "3.0.1",
    "gh-pages": "0.12.0",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.1",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "0.2.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "npm-run-all": "4.0.2",
    "protractor": "5.1.0",
    "rimraf": "2.6.1",
    "standard-changelog": "1.0.1",
    "stylelint": "7.10.1",
    "ts-node": "2.1.2",
    "tslint": "5.2.0",
    "tslint-eslint-rules": "4.0.0",
    "tslint-language-service": "0.9.6",
    "typescript": "^2.7.2",
    "typogr": "0.6.6",
    "underscore": "1.8.3",
    "wintersmith": "2.2.5",
    "wintersmith-sassy": "1.1.0"
  }

そして私のangular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ng2-admin": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
              "node_modules/normalize.css/normalize.css",
              "node_modules/font-awesome/scss/font-awesome.scss",
              "node_modules/ionicons/scss/ionicons.scss",
              "node_modules/bootstrap/scss/bootstrap.scss",
              "node_modules/leaflet/dist/leaflet.css",
              "node_modules/chartist/dist/chartist.css",
              "node_modules/fullcalendar/dist/fullcalendar.css",
              "node_modules/handsontable/dist/handsontable.full.css",
              "node_modules/ng2-slim-loading-bar/style.css",
              "src/app/theme/theme.scss",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/easy-pie-chart/dist/jquery.easypiechart.js",
              "node_modules/jquery-slimscroll/jquery.slimscroll.js",
              "node_modules/tether/dist/js/tether.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/handsontable/dist/handsontable.full.js",
              "node_modules/chroma-js/chroma.js"
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ng2-admin:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ng2-admin:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ng2-admin:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/easy-pie-chart/dist/jquery.easypiechart.js",
              "node_modules/jquery-slimscroll/jquery.slimscroll.js",
              "node_modules/tether/dist/js/tether.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/handsontable/dist/handsontable.full.js",
              "node_modules/chroma-js/chroma.js"
            ],
            "styles": [
              "node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
              "node_modules/normalize.css/normalize.css",
              "node_modules/font-awesome/scss/font-awesome.scss",
              "node_modules/ionicons/scss/ionicons.scss",
              "node_modules/bootstrap/scss/bootstrap.scss",
              "node_modules/leaflet/dist/leaflet.css",
              "node_modules/chartist/dist/chartist.css",
              "node_modules/fullcalendar/dist/fullcalendar.css",
              "node_modules/handsontable/dist/handsontable.full.css",
              "node_modules/ng2-slim-loading-bar/style.css",
              "src/app/theme/theme.scss",
              "src/styles.scss"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": []
          }
        }
      }
    },
    "ng2-admin-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "ng2-admin:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": []
          }
        }
      }
    }
  },
  "defaultProject": "ng2-admin",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}

Angular 8の場合NCU npmパッケージ[$ npm i -g npm-check-updates]をインストールし、すべてを更新して詳細を確認してくださいfreakyjolly.com/how-to-update-local-angular-cli-version
Code Spy

回答:


735

@angular-devkit/build-angulardev依存関係としてインストールします。このパッケージはAngular 6.0で新たに導入されました

npm install --save-dev @angular-devkit/build-angular

または、

yarn add @angular-devkit/build-angular --dev


11
私も同じ問題に直面しています。残念ながら、あなたの解決策は私にとってうまくいきませんでした。他に何か提案はありますか?
subzerodeluxe 2018年

まったく同じエラー?そして設定ファイル?彼らはこの質問と同じですか?
リトウィックデイ

はい。さて、私はこの問題についてさらに探求しました。私のMac Miniでは問題なく動作することがわかったので、おそらくWindowsでのNodeのセットアップと関係があるようです。
subzerodeluxe 2018年

2
角度7へのアップグレード-受け入れられた回答はエラーを修正しました(賛成票を投じました)が、アップグレードの問題全体を解決しませんでした。これは、stackoverflow.com
a / 51592138/852806

3
これをありがとう。Angularチュートリアルを実行しようとしているときにこの問題に遭遇しました。angular.io / guide / quickstart-誰かがドキュメントを更新するのを忘れているようです。
Dan King、

167
npm update

それは魅力のように働きました。


3
私はヒーローズツアーのチュートリアルの途中で新しいマシンに移動し、ソース管理から焼きたての作業を引き出しました。これはそれを修正しました。
ヘリアック2018

同僚のプロジェクトにブランチを作成した後、エラーメッセージが表示されました。これはそれを修正しました。ありがとうございました。
Moni

node modulesフォルダーをチェックインしないことについては、「半分焼き」をしていません。これは、package.jsonに基づいてノードモジュールを再構築するだけです。これは、新しいソリューションをチェックアウトするときに行う通常のことです。
リアム

2
すべての依存関係を解決します:)。+1
Hammad Sajid

古くなっている追加のパッケージがあるかもしれません。実行ng update --allして、すべてを同時に更新しようとします。
孤独な

86

角度6以上の場合

私のための作業解決策は

npm install

ng update

そして最後に

npm update


ng更新を実行すると、必要ないくつかの特定の更新に関するいくつかのメッセージが表示されました。名前バージョンコマンド更新--------------------------------------------- ----------------------------------- @ angular / core 4.4.7-> 8.2.4 ng update @ angular / core @ ngrx / store 2.2.3-> 8.3.0 ng update @ ngrx / store rxjs 5.5.12-> 6.5.3 ng update rxjs
Aggie Jon of 87

3
@ user9964622に感謝します。この解決策は私にとってうまくいきました。
ディープ

@Deepお役に立てて嬉しいです。コーディングを楽しんでください
The Dead Man


15

次のコマンドが機能しない場合は、

npm install --save-dev @angular-devkit/build-angular

次に、プロジェクトフォルダーに移動し、次のコマンドを実行します。

npm install --save @angular-devkit/build-angular

npm install --save @ angular-devkit / build-angularは私にとってはうまくいきましたが、問題は、管理者として実行されていないコマンドプロンプトからこのコマンドを実行しようとしたところ、表示されなかったこのコマンドを実行しようと入力したことだけでしたカーソルだけが待機状態だったエラーは何もありませんでしたが、管理者がコマンドを実行しただけです。おかげで
asifaftab87

14

上記の答えはすべて正しいですが、私にとってはうまくいきませんでした。私がこの作業を行うことができた唯一の方法は、次の手順/コマンドに従うことでした:

npm uninstall -g @angular/cli@6.0.8
npm cache clean --force
npm install -g @angular/cli@latest
npm install node-sass -g
ng new MY_PROJECT_NAME
cp -r from_my_old_project to_new_MY_PROJECT_NAME

ライブラリを構築しようとしている場合は、ng new MY_PROJECT_NAME --create-application=false最後から2番目のコマンドに使用します。ライブラリを構築しようとしたときにこのエラーが発生しました。この--create-application=falseフラグは、不要な依存関係の取り込みを回避します。(angular.io/guide/creating-libraries#getting-started
VSO

1
npmキャッシュをクリアして再インストールした後、私のために働いた
Braj

10

Angular 8の場合

npm-check-updatesパッケージをインストールする

実行:

$ npm i npm-check-updates
$ ncu -u
$ npm install

このパッケージはすべてのパッケージを更新し、この問題を解決します

通知:アップデート後この問題に直面した場合:

Angular Compilerのエラーには、TypeScript> = 3.4.0および<3.6.0が必要ですが、代わりに3.6.3が見つかりました。

次に実行します:

$ npm install typescript@3.5.3

ソースリンク


「ncu」は、内部コマンドまたは外部コマンド、操作可能なプログラム、またはバッチファイルとして認識されません。
VivekDev

8

npm install 入力npm installして実行するだけで、プロジェクトはエラーなしで実行されます。またはあなたが使うことができますnpm install --save-dev @angular-devkit/build-angular


8

以下は私のために働いた。残念ながら他には何もしませんでした。

npm uninstall @angular-devkit/build-angular
npm install @angular-devkit/build-angular
ng update --all --allow-dirty --force

--allow-dirty not installedというメッセージが表示されました。しかし、私のものを更新しました。
Garth Baker、

6

これを試してみてください。

npm install

npm update

if it's shows something like this. 

npm audit fixそれらを修正するために実行するかnpm audit、詳細について

それを行う!


1
そして、あなたがそれをするとき、NPMは「あなたがあなたが何をしているのか知っていることを願っています」と言います。それは私にフリークを与えました。
ΕГИІИО

1
それが助けて以来賛成した-部分的ではあるが。:これを実行した後、私はまだ私はこのアイデア以下のインストールいくつか欠けているピアの依存関係だったstackoverflow.com/a/51063840/2995907
dingalapadum

6

次のコマンドは機能します:

npm install
ng update

-「package.jsonを分析しましたが、すべて順調に進んでいるようです。よくできました!」というメッセージが表示される場合があります。

npm update

次に、開発ビルドを試してください

ng build 

タイプスクリプトでエラーが発生しました。

npm install typescript@">=3.1.1 <3.2

ng build --prod 

製品ビルドですべて成功。

以下は動作する組み合わせです

ng --version

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.0
@angular-devkit/build-angular     0.11.0
@angular-devkit/build-optimizer   0.11.0
@angular-devkit/build-webpack     0.11.0
@angular-devkit/core              7.1.0
@angular-devkit/schematics        7.1.0
@angular/cli                      7.1.0
@ngtools/webpack                  7.1.0
@schematics/angular               7.1.0
@schematics/update                0.11.0
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

6

私は上記すべてを試しましたが、これは私にとって修正された方法です:

-> node_modulesフォルダーを削除します。

->ターミナル-> npmインストール。

これが役に立てば幸い!


4

のようなコマンドを実行ng serveすると、ローカルバージョンの@ angular / cliが使用されます。したがって、まず@ angular / cliの最新バージョンをローカルにインストールします(-gフラグなし)。次に、ng update @angular/cliコマンドを使用してcliを更新します。これで問題が解決するはずです。ありがとう

このリンクは、角度プロジェクトhttps://update.angular.io/を更新する場合に役立ちます


4

Angular 7でも同じ問題が発生しました。次のコマンドを実行するだけでエラーが解決しました。

npm install --save-dev @angular-devkit/build-angular


4

次のコマンドを実行するだけでエラーが解決しました

  • ng update @angular/cli @angular/core
  • npm uninstall @angular-devkit/build-angular
  • npm install --save-dev @angular-devkit/build-angular

    このエラーが上記のコマンドで解決できなかったため、ノードのバージョンを更新した場合

    • npm update npm -g

4

最初にnode_modulesフォルダを削除

その後、システム再起動します

走る npm install --save-dev @angular-devkit/build-angular

そして

走る npm install


3

私はほんの少し前に同じ問題に苦しんでいました。私のプロジェクトはangular-cliのv 1.6.0を使用して生成されました。

1. npm update -g @angular/cli

2. editing my package.json changing the line
    "@angular/cli": "1.6.0",
      to
    "@angular/cli": "^1.6.0",

3. npm update

私の助けが有効であることを願っていますツ


1
これは、モジュールが見つからないこととは関係ありません。これは、angular cliモジュールがバージョン1.6.xに更新されることを意味します
SanSolo

3

まずこれを試してください

npm install --save-dev @angular-devkit/build-angular

パッケージが見つからないためにエラーが再び発生する場合は、

npm install

3

それは私にとってはうまくいき、コミットしてから:

ng update @angular/cli @angular/core
npm install --save-dev @angular/cli@latest

3

ノードをv9からv10にアップグレードした後、今日も同じ問題がありました。
私の環境はdockerによって設定されており、このコマンドをDockerFileから削除する必要がありました。

npm link @angular/cli

ノードがインストールされているディレクトリへのシンボリックリンクを作成します。
その中のangular/cliモジュールが私のプロジェクトのnode_modulesディレクトリにあるものと同じバージョンではないと思います、そしてこれが問題の原因です。


2

このエラーは通常、角度プロジェクトが完全に構成されていない場合に発生します。

これは動作します

npm install --save-dev @angular-devkit/build-angular

npm install


0

@angular-devkit/build-angularあなたの開発依存関係の下に追加してください、そしてそれはうまくいきます、またはあなたは実行することもできます

npm install --save-dev @angular-devkit/build-angular


0

package-lock.jsonを削除し、npmを再度インストールします。問題が解決するはずです。

**この修正は、ng newを使用してAngular 6アプリを作成し、他の依存関係をインストールした後にこのエラーが発生した場合により適しています。


0

私の場合、問題は依存関係がないためです。呼び出すのを忘れたため、依存関係が欠落している理由:

npmインストール

上記のコマンドを呼び出した後、必要なすべての依存関係がnode_modulesに読み込まれ、これはもう問題ではありません



0
  • node_modulesを削除します。
  • 「npm cache clean --verify」を使用してキャッシュをクリアします。
  • そして、npmを再度インストールします。

私にとっては魅力のように機能します。



0

残念ながら、提供された解決策はどれも私にとって完璧に機能しませんでしたが、grepitの答えは私に次の手順を実行するように促しました。OS(Windows 10)からnode.jsをアンインストールし、再度インストールしました。次に、Angular CLIをインストールしました。次に、新しいプロジェクトを作成し、古いプロジェクトのsrcファイルをこの新しいプロジェクトにコピーすると、エラーは発生しなくなりました。

手順は次のとおりです。

  1. OS経由でnode.jsをアンインストールし、再度インストールします
  2. npm install -g @angular/cli
  3. プロジェクトの名前をYOUR_PROJECT_NAME.oldに変更します
  4. ng new YOUR_PROJECT_NAME
  5. このhello worldプロジェクト(ng serve)を実行して、エラーが発生しないことを確認します。
  6. xcopy YOUR_PROJECT_NAME.old\src\*.* YOUR_PROJECT_NAME\src /s
    これはWindows版のコピーです。ご使用のOSに応じて変更してください。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.