web-dev-qa-db-fra.com

Impossible de trouver le module "@ angular-devkit/build-angular"

Après la mise à jour vers Angular 6.0.1, l'erreur suivante apparaît sur 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 dit que tout est en ordre. Supprimer le dossier node_modules et une nouvelle installation de npm install n’a pas aidé non plus. 

Mon projet est basé sur [ng2-admin (version Angular4)]. ( https://github.com/akveo/ngx-admin ) Voici mes dépendances 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"
  }

et mon 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"
    }
  }
}
angularangular-cliangular6angular-cli-v6
100
ForestG

Installez @angular-devkit/build-angular en tant que dépendance de dev. Ce paquet est nouvellement introduit dans Angular 6.0

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

ou,

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

196
Ritwick Dey
npm update

Ça a marché comme sur des roulettes.

39
Ajay Takur

pour angulaire 6 et plus

La solution de travail pour moi était 

npm install

ng update

et enfin

npm update

16
user9964622

npm install Il suffit de taper npm install et de l'exécuter. Ensuite, le projet s'exécutera sans erreur ..__ ou vous pouvez utiliser npm install --save-dev @angular-devkit/build-angular

3
Thisuri

Si la commande suivante ne fonctionne pas,

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

puis déplacez-vous dans le dossier du projet et exécutez cette commande:

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

Toutes les réponses ci-dessus sont correctes mais elles n’ont pas fonctionné pour moi. La seule façon pour moi de faire ce travail était de suivre les étapes/commandes:

npm uninstall -g @angular/[email protected]
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
2
grepit

Je me suis battu avec le même problème il y a une minute. Mon projet a été généré en utilisant la v 1.6.0 de 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

J'espère que mon aide est efficace

2
user10780188

J'ai eu le même problème avec Angular 7. Je viens d'exécuter la commande suivante et l'erreur a été résolue.

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

Essayez ceci en premier

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

Si une erreur survient à nouveau pour les paquets manquants, essayez

npm install
2
Sudheer Muhammed

Il suffit d'exécuter la commande suivante et l'erreur a été résolue

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

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

    si cette erreur ne peut pas être résolue par la commande ci-dessus, vous devez donc mettre à jour la version du noeud

    • npm update npm -g
1
Rajnikant

J'ai eu le même problème aujourd'hui, après la mise à niveau du nœud de v9 à v10.
Mon environnement est défini par docker et j'ai dû supprimer cette commande de mon DockerFile:

npm link @angular/cli

Il crée un lien symbolique vers le répertoire où le noeud est installé.
Je suppose que le module angular/cli qu’il contient n’a pas la même version que celui du répertoire node_modules de mon projet, ce qui pose problème.

1
v.nivuahc

Essaye ça. Ça a fonctionné pour moi

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

Besoin d'obtenir explicitement devDependencies.

npm i --only=dev
1
sachq

Lorsque nous exécutons des commandes telles que ng serve, il utilise la version locale de @ angular/cli. Donc, installez d’abord la dernière version de @ angular/cli localement (sans l’indicateur -g). Puis mettez à jour le cli en utilisant la commande ng update @angular/cli. Je pense que cela devrait régler le problème. Merci

Ce lien peut vous aider si vous mettez à jour votre projet angular https://update.angular.io/

1
Tibin Thomas

Malheureusement, aucune des solutions fournies ne fonctionnait parfaitement pour moi, mais la réponse de grepit m'a incité à suivre les étapes suivantes. J'ai désinstallé node.js via mon système d'exploitation (Windows 10) et l'ai réinstallé. Puis installé Angular CLI. Ensuite, j'ai créé un nouveau projet et copié le fichier src de mon ancien projet dans ce nouveau fichier et l'erreur a disparu.

Voici les instructions:

  1. Désinstallez node.js via votre système d'exploitation et réinstallez-le.
  2. npm install -g @angular/cli
  3. Renommez votre projet en YOUR_PROJECT_NAME.old
  4. ng new YOUR_PROJECT_NAME
  5. Exécutez ce projet Hello World (ng serve) pour vous assurer que vous ne recevrez pas l'erreur.
  6. xcopy YOUR_PROJECT_NAME.old\src\*.* YOUR_PROJECT_NAME\src /s
    Ceci est la version Windows de copy, changez-la en fonction de votre propre système d'exploitation.
0
Ahmad
npm install --save-dev @angular-devkit/build-angular@latest

résolu pour moi.

0
Lexy Feito
  • Supprimez les node_modules. 
  • Effacez le cache en utilisant npm cache clean --verify '. 
  • Et puis npm installe à nouveau.

Fonctionne comme un charme pour moi.

0
Arslan Mir

Cette erreur se produit généralement lorsque le projet angular n'a pas été configuré complètement.

Ça va marcher

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

npm install
0
Kshitij Shukla

courir ce qui suit a fonctionné pour moi npm audit fix --force 

0
Geared4IT

Supprimez package-lock.json et réinstallez npm. Cela devrait régler le problème.

** Ce correctif est plus approprié lorsque vous avez créé Angular 6 app à l'aide de ng new et qu'après avoir installé d'autres dépendances, vous trouvez cette erreur.

0
Rut Shah

Essaye celui-là.

npm install

npm update

if it's shows something like this.

lancez npm audit fix pour les réparer, ou npm audit pour plus de détails

Fais ça!

0
Elshan

Cela fonctionne pour moi, commettez et ensuite:

ng update @angular/cli @angular/core
npm install --save-dev @angular/cli@latest
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 TypeScript@">=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

Exécutez la commande ci-dessous sur votre CLI:

  • npm installer
0
Abdullah Pariyani

ajoutez @angular-devkit/build-angular sous votre dépendance dev et cela fonctionnera, ou vous pourrez aussi exécuter 

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

0
Mohit Jain

J'essaie toutes les réponses ci-dessus, mais aucune d'entre elles ne me convient. Je devais déclasser la version de Angular-CLI. Je lance la commande ng --version et les résultats:

@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

J'ouvre mon package.json et cherche la ligne qui définit la version de 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
...}
...

Je change la version de @angular/cli en ~ 7.0.7. Puis exécutez npm uninstall @angular/cli et réinstallez-le en exécutant npm install -g angular-cli@~7.0.7

0
dellasavia

Dans mon cas, le problème est dû aux dépendances manquantes. Pourquoi les dépendances sont manquantes, parce que j'ai oublié d'appeler:

npm installer

Après avoir appelé la commande ci-dessus, toutes les dépendances requises sont chargées dans node_modules, et ce n'est plus un problème

0
Chi Cuong Le