簡體   English   中英

找不到模塊“@angular-devkit/build-angular”

[英]Could not find module "@angular-devkit/build-angular"

更新到 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 install 也沒有幫助。

我的項目基於ng2-admin(Angular4 version) 這是我的 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-devkit/build-angular作為開發依賴。 這個包是 Angular 6.0 中新引入的

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

或者,

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

它就像一個魅力。

對於角度 6 及以上

對我來說可行的解決方案是

npm install

ng update

最后

npm update

需要顯式獲取 devDependencies。

npm i --only=dev

如果以下命令不起作用,

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

然后移動到項目文件夾並運行以下命令:

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

我通過以下方式修復了我的:

  1. 刪除 node_modules 文件夾。

  2. 運行npm install

希望這有幫助!

請遵循這 5 個步驟,它肯定有效。 (我的個人經驗)

第 1 步: npm uninstall -g @angular/cli

第 2 步: npm cache clean --force

第 3 步: npm install -g @angular/cli@latest

第 4 步: npm i

第 5 步: ng build

在那之后ng serve 。我希望你的問題肯定會得到解決。

以上所有答案都是正確的,但它們對我不起作用。 我能夠完成這項工作的唯一方法是按照步驟/命令:

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

對於角 8

安裝npm-check-updates

跑:

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

此軟件包將更新所有軟件包並解決此問題

注意:更新后如果您遇到此問題:

Angular 編譯器中的錯誤需要 TypeScript >=3.4.0 和 <3.6.0,但找到了 3.6.3。

然后運行:

$ npm install typescript@3.5.3

來源鏈接

npm install只需鍵入npm install並運行。然后項目將運行而不會出現錯誤。 或者你可以使用npm install --save-dev @angular-devkit/build-angular

試試這個。

npm install

npm update

if it's shows something like this. 

運行npm audit fix來修復它們,或npm audit以獲取詳細信息

去做!

以下對我有用。 不幸的是,沒有其他任何事情發生。

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

以下命令有效:

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
npm install --save-dev @angular-devkit/build-angular@latest

為我解決了。

首先刪除node_modules文件夾

然后重啟系統

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

運行npm install

當我們運行像ng serve這樣的命令時,它使用本地版本的 @angular/cli。 所以首先在本地安裝最新版本的@angular/cli(不帶 -g 標志)。 然后使用ng update @angular/cli命令更新 cli。 我認為這應該可以解決問題。 謝謝

如果您要更新 Angular 項目https://update.angular.io/ ,此鏈接可能會對您有所幫助

我在 Angular 7 上遇到了同樣的問題。剛剛執行了以下命令並解決了錯誤。

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

當 Angular 項目未完全配置時,通常會發生此錯誤。

這將起作用

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

npm install

只需執行以下命令,錯誤就解決了

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

    如果上述命令無法解決此錯誤,則更新節點版本

    • npm 更新 npm -g

為我工作的解決方案

Delete node_modules folder.

run npm install

希望這會奏效!

就在一分鍾前,我遇到了同樣的問題。 我的項目是使用 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

希望我的幫助有效ツ

先試試這個

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

如果由於缺少包而再次出現錯誤,請嘗試

npm install

這對我有用,提交然后:

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

在將節點從 v9 升級到 v10 后,我今天遇到了同樣的問題。
我的環境是由 docker 設置的,我不得不從我的 DockerFile 中刪除這個命令:

npm link @angular/cli

它創建指向安裝節點的目錄的符號鏈接。
我猜其中的angular/cli模塊與我的項目的 node_modules 目錄中的版本不同,這會導致問題。

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

此代碼安裝@angular-devkit/build-angular作為開發依賴項。

100% 測試。

只需更新角度版本並添加以下依賴項:

ng update

npm update

npm i @angular-devkit/build-angular

https://www.npmjs.com/package/@angular-devkit/build-angular

我有一個在舊版本的 Angular 中創建的庫。

現在我升級到最新版本 11,構建將失敗。

事實上,建造者已經改變了。

在進行ng build時,我收到了一些類似的錯誤消息:

Cannot find module '@angular-devkit/build-ng-packagr/package.json'

angular.json文件中,我必須更改 builder 屬性:

"builder": "@angular-devkit/build-ng-packagr:build",

和:

"builder": "@angular-devkit/build-angular:ng-packagr",

如果在 angular cli 中運行以下命令,項目將成功運行。

npm install --save @angular-devkit/build-angular
  1. 轉到您創建角度項目的文件夾並刪除 node_modules 文件夾。

  2. 現在打開命令提示符並輸入您要使用 cd 運行的項目。

  3. 輸入命令

npm i
或者
npm install

  1. 現在命令提示符將開始在項目中安裝新的node_modules文件。

  2. 安裝node_modules后,使用命令運行項目

ng s --o

如果上述方法不起作用,那么它們是 npm 中的版本不匹配,然后嘗試安裝 node_modules。

npm update

一般來說,如果不工作,這個方法應該可以工作,然后嘗試運行這個命令:

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

詳細信息和替代解決方案https://learnprogramo.com/could-not-find-module-angular-devkit-build-angular-resolved/

  • 刪除節點模塊。
  • 使用npm cache clean --verify清除緩存。
  • 然后再次npm install

對我來說就像一個魅力。

我遇到了同樣的問題。

令人驚訝的是,這只是因為package.json中指定的version不是預期的格式。

我從版本"version": "0.1"切換到"version": "0.0.1" ,它解決了這個問題。

Angular 需要語義版本控制(也稱為 Semver ),包含三個部分。

自2天以來,我一直面臨同樣的問題。

ng -v :6.0.8
node -v :8.11.2
npm -v :6.1.0

確保您位於安裝angular.json的文件夾中。 進入並輸入ng serve 如果問題仍然存在,那么您只在node_modules中安裝了依賴項。 鍵入以下內容,它將起作用:

npm i --only=dev

不幸的是,所提供的解決方案都不適合我,但 grepit 的回答啟發了我執行以下步驟。 我通過我的操作系統(Windows 10)卸載了 node.js 並再次安裝了它。 然后安裝 Angular CLI。 然后創建了一個新項目,並將我舊項目的 src 文件復制到這個新項目中,錯誤就消失了。

以下是說明:

  1. 通過您的操作系統卸載 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版本的副本,根據您自己的操作系統更改它。

我遇到了@angular-devkit/build-angular的最新版本的問題(在撰寫本文時,11.0.5 僅在 17 小時前發布)。

我們公司使用 Nexus Repository Manager 作為 npm 注冊表(我們不直接訪問https://registry.npmjs.org/ ),版本太新了,還沒有包含在我們的 Nexus 中。

使存儲庫緩存npm install無效修復了該問題。

從離子論壇這對我有用。

npm i @ionic/angular-toolkit@latest

所有這些答案基本上都是一樣的

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

但是,如果您在像my-lib這樣的項目中,這仍然可能會失敗,它位於 Angular 工作空間內:

workspace
|-- projects
|    |-- my-lib
|        |-- package.json
|
|-- package.json

在這種情況下,請確保npm install不僅在目錄workspace/projects/my-lib中運行,而且還直接在workspace中運行。

運行以下對我npm audit fix --force

在你的dev依賴項下添加@angular-devkit/build-angular它會起作用,或者你也可以執行

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

刪除 package-lock.json 並再次執行 npm install。 它應該解決問題。

** 當您使用 ng new 創建 Angular 6 應用程序並且在安裝其他依賴項后發現此錯誤時,此修復程序更合適。

就我而言,問題在於缺少依賴項。 缺少依賴項,因為我忘記調用:

npm install

調用上述命令后,所有需要的依賴項都加載到node_modules中,這不再是問題

解決方案

在 CLI 上執行以下命令:

  • npm 安裝

嘗試這個。 它對我有用

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

我嘗試了上面所有的答案,但沒有一個對我有用。 我不得不降級 Angular-CLI 的版本。 我運行命令ng --version和結果:

@angular-devkit/architect          0.10.7
@angular-devkit/build-angular      0.10.7
@angular-devkit/build-ng-packagr   0.10.7
@angular-devkit/build-optimizer    0.10.7
@angular-devkit/build-webpack      0.10.7
@angular-devkit/core               7.0.7 <-- notice this!
@angular-devkit/schematics         8.2.1
@angular/cli                       8.2.1 <-- and this!
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.0.7
@schematics/angular                8.2.1
@schematics/update                 0.802.1
ng-packagr                         4.7.1
rxjs                               6.3.3
typescript                         3.1.6
webpack                            4.19.1

我打開我的 package.json 並搜索定義 CLI 版本的行:

...
"devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular-devkit/build-ng-packagr": "~0.10.0",
    "@angular/cli": "~8.2.0" -- I changed here to ~7.0.7
...}
...

我將@angular/cli的版本更改為~7.0.7 然后運行npm uninstall @angular/cli並再次運行npm install -g angular-cli@~7.0.7

我通過在 64 位操作系統上安裝 Angular 解決了這個問題。 我收到錯誤是因為我最初是在 32 位操作系統上運行它

借助以下命令,您的應用程序將按照我提到的運行每個命令的方式運行

 1.npm list -g --depth=0
 2.npm i npm-check-updates
 3.npm install

最后,運行以下命令在瀏覽器中打開您的項目

ng serve --open

我沒有 package.json。 確保你有一個。

這對我有用。 移動到項目文件夾並運行:

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

當您的 angular 應用程序中沒有節點模塊時,通常會出現此錯誤,開發人員大多數共享沒有節點模塊文件夾的 angular 應用程序,因為它的大小非常大,共享應用程序或上傳需要很長時間。

它可以通過單個命令修復, npm install

簡單的解決方案

點擊下面的推薦只是為了修復這個錯誤

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

對我來說,當我在項目文件夾中運行 npm install 命令時,它就起作用了。 例如:我有 shoppingmenu 應用程序,我在該文件夾中運行了 npm install 命令。

我剛剛在下面做了,它奏效了。

npm install --save-dev

你的npm版本太舊,嘗試運行以下命令:

npm i npm@latest -g

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM