Не удалось найти модуль "@angular-devkit/build-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 установки npm install также не помогло.

Мой проект основан на [ng2-admin (версия Angular4)]. (Https://github.com/akveo/ngx-admin) Вот мои параметры 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"
    }
  }
}

Ответы

Ответ 1

Установите @angular-devkit/build-angular как зависимость от dev. Этот пакет впервые представлен в Angular 6.0

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

или же,

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

Ответ 2

npm update

Оно работало завораживающе.

Ответ 3

для угловых 6 и выше

Рабочее решение для меня было

npm install

ng update

и наконец

npm update

Ответ 4

Необходимо явно получить devDependencies.

npm i --only=dev

Ответ 5

Если следующая команда не работает,

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

затем перейдите в папку проекта и запустите эту команду:

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

Ответ 6

Все вышеприведенные ответы верны, но они не работали для меня. Единственный способ, которым я смог выполнить эту работу, - это выполнить шаги/команды:

npm uninstall -g @angular/[email protected]
npm cache clean --force
npm install -g @angular/[email protected]
npm install node-sass -g
ng new MY_PROJECT_NAME
cp -r from_my_old_project to_new_MY_PROJECT_NAME

Ответ 7

npm install Просто введите npm install и run.Then проект будет работать без ошибок. Или вы можете использовать npm install --save-dev @angular-devkit/build-angular

Ответ 8

Работают следующие команды:

npm install
ng update

-You может увидеть сообщение "Мы проанализировали ваш package.json, и все, кажется, в порядке. Хорошая работа!"

npm update

Тогда попробуйте dev build

ng build

Я получил ошибку с типом скрипта, понижен до

npm install [email protected]">=3.1.1 <3.2

ng build --prod

Все успехи с Prod Build.

Ниже рабочая комбинация

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

Ответ 9

Попробуй это.

npm install

npm update

if it shows something like this.

запустите npm audit fix для npm audit fix чтобы исправить их, или npm audit для получения подробностей

Сделай это!

Ответ 10

Когда мы запускаем команды, такие как ng serve, он использует локальную версию @angular/cli. Поэтому сначала установите последнюю версию @angular/cli локально (без флага -g). Затем обновите cli, используя команду ng update @angular/cli. Я должен это исправить. Спасибо

Эта ссылка может помочь вам, если вы обновляете свой угловой проект https://update.angular.io/

Ответ 11

Я боролся с той же проблемой всего минуту назад. Мой проект был создан с использованием версии 1.6.0 angular-cli.

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

Я надеюсь, что моя помощь эффективна ツ

Ответ 12

У меня была такая же проблема с Angular 7. Только что выполнили следующую команду и ошибка была решена.

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

Ответ 13

Попробуйте сначала

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

Если какая-то ошибка появляется снова для отсутствующих пакетов, попробуйте

npm install

Ответ 14

Это работает для меня, совершить, а затем:

ng update @angular/cli @angular/core
npm install --save-dev @angular/[email protected]

Ответ 15

У меня была такая же проблема сегодня, после обновления узла с v9 до v10.
Моя среда настроена Docker, и мне пришлось удалить эту команду из моего DockerFile:

npm link @angular/cli

Создает символическую ссылку на каталог, где установлен узел.
Я предполагаю, что модуль angular/cli в нем не имеет ту же версию, что и модуль в директории node_modules моего проекта, и это вызывает проблему.

Ответ 16

Просто выполните следующую команду и ошибка была решена

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

если эта ошибка не может быть устранена с помощью вышеуказанной команды, вы обновляете версию узла
- npm update npm -g

Ответ 17

Следующее сработало для меня. К сожалению, больше ничего не сделал.

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

Ответ 18

Для angular 8

Установите пакет npm-check-updates package

Пробег:

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

Этот пакет обновит все пакеты и решит эту проблему

Примечание. После обновления. Если вы столкнулись с этой проблемой:

ОШИБКА в угловом компиляторе требует TypeScript> = 3.4.0 и & lt; 3.6.0 но 3.6.3 был найден вместо этого.

затем запустите:

$ npm install [email protected]

Источник Ссылка

Ответ 19

npm install --save-dev @angular-devkit/[email protected]

решил это для меня.

Ответ 20

запуск следующего работал для меня npm audit fix --force

Ответ 21

добавьте @angular-devkit/build-angular в зависимости от вашей зависимости от разработчиков и он будет работать, или вы также можете выполнить

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

Ответ 22

Удалите пакет-lock.json и снова запустите npm. Это должно решить проблему.

** Это исправление более подходит, когда вы создали приложение Angular 6, используя ng new, и после установки других зависимостей вы обнаружите эту ошибку.

Ответ 23

В моем случае проблема связана с отсутствием зависимостей. Почему не хватает зависимостей, потому что я забыл позвонить:

Установка npm

После вызова указанной команды все необходимые зависимости загружаются в node_modules, и это уже не проблема

Ответ 24

Выполните команду ниже на вашем CLI:

установка npm

Ответ 25

Удалить node_modules.
Очистите кеш, используя 'npm cache clean --verify'.
А затем npm установить снова.

Работает как шарм для меня.

Ответ 26

Попытался выполнить npm install --save-dev @angular-devkit/build-angular, но это не сработало. установка npm сработала.

Ответ 27

Попробуй это. У меня сработало

npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/[email protected]

Ответ 28

Эта ошибка обычно возникает, когда угловой проект не был полностью настроен.

Это будет работать

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

npm install

Ответ 29

К сожалению, ни одно из предложенных решений не помогло мне, но grepit answer вдохновил меня на следующие шаги. Я удалил node.js через свою ОС (Windows 10) и снова установил его. Затем установили угловой CLI. Затем создал новый проект и скопировал в этот новый файл src моего старого проекта, и ошибка исчезла.

Вот инструкции:

Удалите node.js через вашу ОС и установите его снова
npm install -g @angular/cli
Переименуйте ваш проект в YOUR_PROJECT_NAME.old
ng new YOUR_PROJECT_NAME
Запустите этот проект hello world (ng serve), чтобы убедиться, что вы не получите ошибку.
xcopy YOUR_PROJECT_NAME.old\src\*.* YOUR_PROJECT_NAME\src/s
Это копия для Windows, измените ее в зависимости от вашей собственной ОС.

Ответ 30

Если кто-то поступает так, как я, и следует этому учебнику, вот шаги, которые мне нужно было выполнить, чтобы он заработал:

Остановить http-сервер Ctrl+C
Сейчас npm update
Перезапустите http-сервер при npm start
Запустить карму с ng test