Не вдалося знайти модуль "@ angular-devkit / build-angular"


453

Після оновлення до кутового 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

Відповіді:


738

Встановити @angular-devkit/build-angularяк dev залежність. Цей пакет нещодавно представлений у Angular 6.0

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

або,

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


11
Я зіткнувся з тією ж проблемою. На жаль, ваше рішення не працювало для мене. Чи є у вас інші пропозиції?
subzerodeluxe

Точна помилка? А файл конфігурації? вони такі самі, як це питання?
Рітвік Дій

Так. Ну, я ще дещо вивчав це питання. Виявляється, він добре працює на моєму Mac Mini, тому, ймовірно, це має щось спільне з моїм налаштуванням вузла в Windows.
subzerodeluxe

2
Оновлення до кутового 7 - прийнята відповідь виправила помилку (внесла зміни до них), але не вирішила загальну проблему оновлення. Це зробив stackoverflow.com/a/51592138/852806
HockeyJ

4
Дякую за це Я просто потрапив на цю проблему, намагаючись дотримуватися підручника з кутом : angular.io/guide/quickstart - здається, хтось забув оновити документацію?
Дан Кінг

168
npm update

Це спрацювало як шарм.


3
Я перейшов на нову машину на півдорозі через підручник з кутовим туром героїв і витягнув наполовину запечену роботу з управління джерелами. Це і виправило це.
Геліяк

Після створення філії в проекті мого колеги я отримав повідомлення про помилку. Це і виправило це. Дякую.
Моні

Нічого "наполовину запечене" про те, щоб не перевірити в node modulesпапці. Це просто перебудовує ваші вузлові модулі на основі пакета.json. Це абсолютно нормально робити, коли ви перевіряєте нове рішення.
Ліам

2
Це вирішує всі залежності :). +1
Хаммад

Можливо, є додаткові пакети, які застаріли. Запустіть ng update --allспробу оновити все одночасно.
Самотня

86

для кутових 6 і вище

Робочим рішенням для мене було

npm install

ng update

і, нарешті

npm update


Під час оновлення я отримав кілька повідомлень про декілька необхідних оновлень. Ім'я Версія Команда для оновлення --------------------------------------------- ----------------------------------- @ 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 оновлення rxjs
Aggie Jon від 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 працював для мене, але єдиною проблемою було те, що я намагався запустити цю команду з командного рядка, який не запускався як адміністратор, і я вступив, щоб виконати цю команду, вона не показувала будь-яка помилка, тільки курсор був у стані очікування, тоді я просто запустив cmd з адміністратором в ньому працював. Спасибі
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для команди "другого до останнього". У мене була помилка при спробі створити бібліотеку. --create-application=falseПрапор уникає втягуючи непотрібні залежності. ( angular.io/guide/creating-libraries#getting-started )
VSO

1
працював для мене після того, як очистити кеш НПМ і установка знову
брадж

10

Для кутових 8

Встановіть пакет npm-check-updates

Виконати:

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

Цей пакет оновить усі пакети та вирішить цю проблему

Примітка: Після оновлення Якщо ви зіткнулися з цією проблемою:

ПОМИЛКА в кутовому компіляторі вимагає 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-брудна не встановлена. Але оновив мої речі.
Гарт Бейкер

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

Потім спробуйте скласти dev build

ng build 

У мене виникла помилка з типом скрипту, зведений до версії

npm install typescript@">=3.1.1 <3.2

ng build --prod 

Весь успіх з нарощуванням 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команди. Я все це повинен вирішити. Дякую

Це посилання може допомогти вам, якщо ви оновлюєте свій кутовий проект 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 оновлення npm -g

4

Спочатку видаліть node_modulesпапку

потім перезавантажте систему

Біжи npm install --save-dev @angular-devkit/build-angular

і

Біжи npm install


3

Я боровся з тією ж проблемою лише хвилину тому. Мій проект був створений за допомогою v 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

Я сподіваюся, що моя допомога ефективна ツ


1
Це не має нічого спільного з тим, що неможливо знайти модуль. це означає, що модуль кутового кліпу буде оновлений для будь-якої версії 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модуль у ньому не має тієї самої версії, як та, що знаходиться в dir_modules dir мого проекту, і це спричиняє проблему.


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 встановити знову. Це має вирішити проблему.

** Це виправлення є більш підходящим, коли ви створили додаток Angular 6 за допомогою нового і після встановлення інших залежностей виявите цю помилку.


0

У моєму випадку це питання через відсутність залежностей. Чому залежності не вистачає, бо я забув зателефонувати:

npm встановити

Після виклику вищевказаної команди всі необхідні залежності завантажуються у node_modules, і це вже не проблема



0
  • Видаліть node_modules.
  • Очистіть кеш за допомогою 'npm кеша очистити - підтвердити'.
  • А потім npm встановити знову.

Діє як шарм для мене.


0

Спробуйте це. Це працювало для мене

npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/cli@next

@next подарує вам бета
Brent

0

На жаль, жодне із запропонованих рішень не спрацювало ідеально для мене, але відповідь grepit надихнула мене на наступні кроки. Я видалив node.js через ОС (Windows 10) і встановив її знову. Потім встановлено кутовий CLI. Потім створив новий проект і скопіював файл src мого старого проекту в цей новий, і помилка зникла.

Ось інструкція:

  1. Видаліть node.js через вашу ОС та встановіть її знову
  2. npm install -g @angular/cli
  3. Перейменуйте свій проект на YOUR_PROJECT_NAME.old
  4. ng new YOUR_PROJECT_NAME
  5. Запустіть цей привіт світовий проект ( ng serve), щоб переконатися, що ви не отримаєте помилку.
  6. xcopy YOUR_PROJECT_NAME.old\src\*.* YOUR_PROJECT_NAME\src /s
    Це копія Windows версії, змініть її на основі вашої власної ОС.
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.