Không thể tìm thấy mô-đun, @ angular-devkit / build-angular

Sau khi cập nhật lên Angular 6.0.1, tôi gặp lỗi sau 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 updatenói rằng mọi thứ đều theo thứ tự. Xóa node_modulesthư mục và npm installcài đặt mới cũng không giúp được gì.

Dự án của tôi dựa trên ng2-admin (phiên bản Angular4) . Đây là các gói phụ thuộc của gói.json của tôi:

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

và angular.json của tôi:

{
  "$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"
    }
  }
}

Cài đặt @angular-devkit/build-angularnhư phụ thuộc dev. Gói này mới được giới thiệu trong Angular 6.0

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

hoặc là,

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

npm update

Nó làm việc như một say mê.

cho góc 6 trở lên

Giải pháp làm việc cho tôi là

npm install

ng update

và cuối cùng

npm update

Cần phải rõ ràng nhận được devDependencies.

npm i --only=dev

Nếu lệnh sau không hoạt động,

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

sau đó di chuyển đến thư mục dự án và chạy lệnh này:

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

Tất cả các câu trả lời trên là chính xác nhưng chúng không làm việc cho tôi. Cách duy nhất tôi có thể thực hiện công việc này là làm theo các bước / lệnh:

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

Đối với góc 8

Cài đặt npm-check-update gói

Chạy:

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

Gói này sẽ cập nhật tất cả các gói và giải quyết vấn đề này

Lưu ý: Sau khi cập nhật Nếu bạn gặp phải vấn đề này:

ERROR trong Trình biên dịch góc cần có TypeScript> = 3.4.0 và <3.6.0 nhưng 3.6.3 được tìm thấy thay thế.

sau đó chạy:

$ npm install typescript@3.5.3

Liên kết nguồn

npm install Chỉ cần gõ npm installvà chạy. Sau đó, dự án sẽ chạy mà không có lỗi. Hoặc bạn có thể sử dụngnpm install --save-dev @angular-devkit/build-angular

Sau đây làm việc cho tôi. Không có gì khác làm, không may.

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

Hãy thử cái này

npm install

npm update

if it's shows something like this. 

chạy npm audit fixđể sửa chúng, hoặc npm auditđể biết chi tiết

Làm điều đó!

Các lệnh sau hoạt động:

npm install
ng update

-Bạn có thể thấy thông báo "Chúng tôi đã phân tích gói.json của bạn và mọi thứ dường như theo thứ tự. Làm tốt lắm!"

npm update

Sau đó thử xây dựng dev

ng build 

Tôi đã gặp lỗi với loại tập lệnh, bị hạ cấp xuống

npm install typescript@">=3.1.1 <3.2

ng build --prod 

Tất cả thành công với xây dựng prod.

Dưới đây là sự kết hợp làm việc

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

Tôi đã thử tất cả ở trên và đây là cách cố định cho tôi:

-> Xóa thư mục node_modules.

-> Thiết bị đầu cuối -> cài đặt npm.

Hy vọng điều này sẽ giúp!

Khi chúng tôi chạy các lệnh như thế ng serve, nó sử dụng phiên bản cục bộ của @ angular / cli. Vì vậy, trước tiên hãy cài đặt phiên bản mới nhất của @ angular / cli cục bộ (không có cờ -g). Sau đó cập nhật cli bằng ng update @angular/clilệnh. Tôi điều này sẽ khắc phục vấn đề. Cảm ơn

Liên kết này có thể giúp bạn nếu bạn đang cập nhật dự án góc của mình https://update.angular.io/

Tôi gặp vấn đề tương tự với Angular 7. Chỉ cần thực hiện lệnh sau và lỗi đã được giải quyết.

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

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

giải quyết nó cho tôi

Chỉ cần thực hiện lệnh sau và lỗi đã được giải quyết

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

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

  nếu lỗi này không thể giải quyết bằng lệnh trên để bạn cập nhật phiên bản nút

  • cập nhật npm npm -g

Đầu tiên xóa node_modulesthư mục

sau đó khởi động lại hệ thống

Chạy npm install --save-dev @angular-devkit/build-angular

và

Chạy npm install

Tôi đã vật lộn với cùng một vấn đề chỉ một phút trước. Dự án của tôi được tạo bằng v 1.6.0 của 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

Tôi hy vọng sự giúp đỡ của tôi có hiệu quả

Hãy thử cái này trước

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

Nếu một số lỗi trở lại cho các gói bị thiếu hãy thử

npm install

Điều đó làm việc cho tôi, cam kết và sau đó:

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

Tôi đã có cùng một vấn đề ngày hôm nay, sau khi nâng cấp nút từ v9 lên v10.
Môi trường của tôi được đặt bởi docker và tôi đã phải xóa lệnh này khỏi DockerFile của mình:

npm link @angular/cli

Nó tạo ra một liên kết tượng trưng đến thư mục nơi nút được cài đặt.
Tôi đoán angular/climô-đun trong nó không có cùng phiên bản với mô-đun trong thư mục node_modules của dự án của tôi và điều này gây ra sự cố.

Lỗi này thường xảy ra khi dự án góc không được cấu hình hoàn toàn.

Điều này sẽ làm việc

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

npm install

chạy sau đây làm việc cho tôi npm audit fix --force

thêm @angular-devkit/build-angularvào phụ thuộc dev của bạn và nó sẽ hoạt động, hoặc bạn cũng có thể thực thi

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

Xóa gói-lock.json và cài đặt lại npm. Nó sẽ khắc phục vấn đề.

** Khắc phục sự cố này phù hợp hơn khi bạn đã tạo ứng dụng Angular 6 bằng cách sử dụng ng mới và sau khi cài đặt các phụ thuộc khác, bạn thấy lỗi này.

Trong trường hợp của tôi, vấn đề là do thiếu phụ thuộc. Tại sao phụ thuộc bị thiếu, vì tôi đã quên gọi:

cài đặt npm

Sau khi gọi lệnh trên, tất cả các phụ thuộc cần thiết được tải trong node_modules và đó không còn là vấn đề nữa

Thực hiện bên dưới Lệnh trên CLI của bạn:

• cài đặt npm

• Xóa nút_modules.
• Xóa bộ nhớ cache bằng cách sử dụng bộ nhớ cache bộ nhớ cache - xác minh '.
• Và sau đó npm cài đặt lại.

Hoạt động như một cơ duyên đối với tôi.

Thử cái này. Nó làm việc cho tôi

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

Thật không may, không có giải pháp được cung cấp nào hoạt động hoàn hảo với tôi, nhưng câu trả lời của grepit đã truyền cảm hứng cho tôi thực hiện các bước sau. Tôi đã gỡ cài đặt node.js thông qua HĐH của mình (Windows 10) và cài đặt lại. Sau đó cài đặt Angular CLI. Sau đó, tạo một dự án mới và sao chép tệp src của dự án cũ của tôi vào dự án mới này và lỗi đã biến mất.

Dưới đây là hướng dẫn:

1. Gỡ cài đặt node.js qua HĐH của bạn và cài đặt lại
2. npm install -g @angular/cli
3. Đổi tên dự án của bạn thành YOU_PROJECT_NAME.old
4. ng new YOUR_PROJECT_NAME
5. Chạy dự án hello world ( ng serve) này để đảm bảo rằng bạn sẽ không gặp lỗi.
6. xcopy YOUR_PROJECT_NAME.old\src\*.* YOUR_PROJECT_NAME\src /s
   Đây là phiên bản Windows của bản sao, thay đổi nó dựa trên hệ điều hành của riêng bạn.