wake-up-neo.net

Modul "@ angle-devkit/build-angle" konnte nicht gefunden werden

Nach dem Update auf Angular 6.0.1 erhalte ich den folgenden Fehler in 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 sagt, dass alles in Ordnung ist. Das Löschen des node_modules-Ordners und eine neue npm install-Installation haben auch nicht geholfen. 

Mein Projekt basiert auf [ng2-admin (Angular4-Version)]. ( https://github.com/akveo/ngx-admin ) Hier ist meine package.json dependecies:

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

und mein angle.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"
    }
  }
}
angularangular-cliangular6angular-cli-v6
100
ForestG

Installieren Sie @angular-devkit/build-angular als dev-Abhängigkeit. Dieses Paket wurde in Angular 6.0 neu eingeführt

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

oder,

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

196
Ritwick Dey
npm update

Es hat wie ein Zauber funktioniert.

39
Ajay Takur

für Winkel 6 und darüber

Die funktionierende Lösung für mich war 

npm install

ng update

und schlussendlich

npm update

16
user9964622

npm install Geben Sie einfach npm install ein und starten Sie das Projekt. Dann wird das Projekt fehlerfrei ausgeführt .. oder Sie können npm install --save-dev @angular-devkit/build-angular verwenden.

3
Thisuri

Wenn der folgende Befehl nicht funktioniert,

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

dann in den Projektordner wechseln und folgenden Befehl ausführen:

npm install --save @angular-devkit/build-angular
3
Murugaraju Perumalla

Alle obigen Antworten sind korrekt, aber sie haben für mich nicht funktioniert. Die einzige Möglichkeit, dies zu erreichen, war durch folgende Schritte/Befehle:

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
2
grepit

Ich hatte vor einer Minute mit dem gleichen Problem zu kämpfen. Mein Projekt wurde mit v 1.6.0 von angle-cli erstellt.

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

Ich hoffe, meine Hilfe ist effektiv

2
user10780188

Ich hatte das gleiche Problem mit Angular 7. Gerade den folgenden Befehl ausgeführt und Fehler behoben.

npm install --save-dev @angular-devkit/build-angular
2
Chamila Maddumage

Versuchen Sie dies zuerst

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

Wenn bei fehlenden Paketen ein Fehler auftritt, versuchen Sie es erneut

npm install
2
Sudheer Muhammed

Führen Sie einfach den folgenden Befehl aus und der Fehler wurde behoben

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

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

    wenn dieser Fehler durch den obigen Befehl nicht behoben werden konnte, aktualisieren Sie die Knotenversion

    • npm update npm -g
1
Rajnikant

Ich hatte heute das gleiche Problem, nachdem ich den Knoten von v9 auf v10 aktualisiert hatte.
Meine Umgebung wird vom Docker festgelegt und ich musste diesen Befehl aus meiner Docker-Datei entfernen:

npm link @angular/cli

Es wird ein Symlink zu dem Verzeichnis erstellt, in dem der Knoten installiert ist.
Ich vermute, das angular/cli-Modul hat nicht die gleiche Version wie das im node_modules-Verzeichnis meines Projekts, und dies verursacht das Problem.

1
v.nivuahc

Versuche dies. Es hat bei mir funktioniert

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

DevDependencies müssen explizit abgerufen werden.

npm i --only=dev
1
sachq

Wenn wir Befehle wie ng serve ausführen, wird die lokale Version von @ angle/cli verwendet. Installieren Sie also zuerst die neueste Version von @ angle/cli lokal (ohne das Flag -g). Aktualisieren Sie dann das CLI mit dem Befehl ng update @angular/cli. Ich denke, das sollte das Problem beheben. Vielen Dank

Dieser Link kann Ihnen helfen, wenn Sie Ihr Winkelprojekt aktualisieren https://update.angular.io/

1
Tibin Thomas

Leider hat keine der angebotenen Lösungen perfekt für mich funktioniert, aber die Antwort von Grepit hat mich dazu inspiriert, die folgenden Schritte auszuführen. Ich habe node.js über mein Betriebssystem (Windows 10) deinstalliert und erneut installiert. Dann installierte Angular CLI. Dann erstellte ich ein neues Projekt und kopierte die src-Datei meines alten Projekts in diese neue und der Fehler war verschwunden.

Hier sind die Anweisungen:

  1. Deinstallieren Sie node.js über Ihr Betriebssystem und installieren Sie es erneut
  2. npm install -g @angular/cli
  3. Benennen Sie Ihr Projekt in YOUR_PROJECT_NAME.old um
  4. ng new YOUR_PROJECT_NAME
  5. Führen Sie dieses Hello World-Projekt (ng serve) aus, um sicherzustellen, dass der Fehler nicht angezeigt wird.
  6. xcopy YOUR_PROJECT_NAME.old\src\*.* YOUR_PROJECT_NAME\src /s
    Dies ist die Windows-Version der Kopie, ändern Sie sie basierend auf Ihrem eigenen Betriebssystem.
0
Ahmad
npm install --save-dev @angular-devkit/[email protected]

löste es für mich.

0
Lexy Feito
  • Löschen Sie die node_modules. 
  • Löschen Sie den Cache mit 'npm cache clean --verify'. 
  • Und dann npm erneut installieren.

Funktioniert für mich wie ein Zauber.

0
Arslan Mir

Dieser Fehler tritt im Allgemeinen auf, wenn das Projekt angular nicht vollständig konfiguriert wurde.

Das wird funktionieren

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

npm install
0
Kshitij Shukla

das Laufen der folgenden arbeitete für mich npm audit fix --force 

0
Geared4IT

Löschen Sie package-lock.json und führen Sie die npm-Installation erneut aus. Es sollte das Problem beheben.

** Dieses Update ist besser geeignet, wenn Sie die Angular 6-App mit ng new erstellt haben und nach der Installation anderer Abhängigkeiten diesen Fehler finden.

0
Rut Shah

Probier diese.

npm install

npm update

if it's shows something like this.

führen Sie npm audit fix aus, um sie zu beheben, oder npm audit, um weitere Informationen zu erhalten

TU das!

0
Elshan

Das funktioniert bei mir, verpflichten Sie sich und dann:

ng update @angular/cli @angular/core
npm install --save-dev @angular/[email protected]
0
Andrey
Following commands works 
npm install
ng update
-You may see the message  "We analyzed your package.json and everything seems to be in order. Good work!"
npm update

Then try dev build 
ng build 
I got the error with type script, downgraded to 
npm install [email protected]">=3.1.1 <3.2

ng build --prod 

All success with prod build. 

Below is the working combination 

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
0
Pushpinder Singh

 Solution

Führen Sie den folgenden Befehl auf Ihrer CLI aus:

  • npm installieren
0
Abdullah Pariyani

fügen Sie @angular-devkit/build-angular unter Ihrer Dev-Abhängigkeit hinzu und es wird funktionieren, oder Sie können es auch ausführen 

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

0
Mohit Jain

Ich versuche alle Antworten oben, aber keine von ihnen funktioniert für mich. Ich musste die Version von Angular-CLI downgraden. Ich führe den Befehl ng --version aus und erhalte folgende Ergebnisse:

@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

Ich öffne meine package.json und suche nach der Zeile, die die Version von CLI definiert:

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

Ich ändere die Version von @angular/cli auf ~ 7.0.7. Führen Sie dann npm uninstall @angular/cli aus und installieren Sie es erneut, indem Sie npm install -g [email protected]~7.0.7 ausführen.

0
dellasavia

In meinem Fall liegt das Problem bei fehlenden Abhängigkeiten. Warum fehlen Abhängigkeiten, weil ich vergessen habe anzurufen:

npm installieren

Nach dem Aufrufen des obigen Befehls werden alle erforderlichen Abhängigkeiten in node_modules geladen, und dies ist kein Problem mehr

0
Chi Cuong Le