Impossible de trouver le module «@ angular-devkit / build-angular»

455

Après la mise à jour vers Angular 6.0.1, j'obtiens l'erreur suivante 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 updatedit que tout est en ordre. La suppression du node_modulesdossier et une nouvelle npm installinstallation n'ont pas aidé non plus.

Mon projet est basé sur ng2-admin (version Angular4) . 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"
    }
  }
}
ForestG
la source
Pour Angular 8 Il suffit d'installer le package NCU npm [$ npm i -g npm-check-updates] et de mettre à jour tout vérifier ici pour plus d'informations freakyjolly.com/how-to-update-local-angular-cli-version
Code Spy

Réponses:

741

Installer en @angular-devkit/build-angulartant que dépendance de dev. Ce package est nouvellement introduit dans Angular 6.0

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

ou,

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

Ritwick Dey
la source
11
Je fais face au même problème. Malheureusement, votre solution n'a pas fonctionné pour moi. Avez-vous d'autres suggestions?
subzerodeluxe
Exactement la même erreur? Et le fichier de configuration? sont-ils les mêmes que cette question?
Ritwick Dey
Oui. Eh bien, j'ai fait un peu plus d'exploration sur cette question. Il s'avère que cela fonctionne bien sur mon Mac Mini, donc cela aura probablement quelque chose à voir avec ma configuration de nœud sur Windows.
subzerodeluxe
2
Mettre à niveau vers angular 7 - la réponse acceptée a corrigé l'erreur (ont voté positivement), mais n'a pas résolu le problème de mise à niveau dans l'ensemble. Cela a été stackoverflow.com/a/51592138/852806
HockeyJ
4
Merci pour cela. Je viens de rencontrer ce problème en essayant de suivre le didacticiel Angular: angular.io/guide/quickstart - semble que quelqu'un a oublié de mettre à jour la documentation?
Dan King
168
npm update

Ça a marché comme sur des roulettes.

Ajay Takur
la source
3
Je suis passé à une nouvelle machine à mi-chemin du didacticiel de tour angulaire des héros et j'ai retiré le travail à moitié cuit du contrôle de source. Cela l'a corrigé.
Heliac
Après avoir créé une branche dans le projet de mon collègue, j'ai reçu le message d'erreur. Cela l'a corrigé. Je vous remercie.
Moni
Rien de "à moitié cuit" de ne pas avoir archivé le node modulesdossier. Cela reconstruit simplement vos modules de nœuds en fonction de votre package.json. C'est une chose parfaitement normale à faire lorsque vous découvrez une nouvelle solution.
Liam
2
Il résout toutes les dépendances :). +1
Hammad Sajid
Il peut y avoir des packages supplémentaires obsolètes. Exécutez ng update --allpour essayer de tout mettre à jour en même temps.
Lonely
87

pour angulaire 6 et plus

La solution de travail pour moi était

npm install

ng update

et enfin

npm update

L'homme mort
la source
Lorsque je fais la mise à jour ng, j'ai reçu plusieurs messages sur plusieurs mises à jour spécifiques nécessaires. Nom Version Commande à mettre à jour --------------------------------------------- ----------------------------------- @ 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 ng update rxjs
Aggie Jon du 87
3
Merci @ user9964622, cette solution a fonctionné pour moi.
Deep
@Deep Je suis content d'avoir pu aider, bon codage
The Dead Man
15

Si la commande suivante ne fonctionne pas,

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

déplacez-vous ensuite vers le dossier du projet et exécutez cette commande:

npm install --save @angular-devkit/build-angular
Murugaraju Perumalla
la source
npm install --save @ angular-devkit / build-angular a fonctionné pour moi, mais le seul problème était que j'essayais d'exécuter cette commande à partir d'une invite de commande qui n'était pas exécutée en tant qu'administrateur, et je suis entré pour exécuter cette commande qu'il ne montrait pas toute erreur rien que le curseur était sur l'état d'attente, puis je lance simplement un cmd avec admin. Merci
asifaftab87
14

Toutes les réponses ci-dessus sont correctes mais elles n'ont pas fonctionné pour moi. La seule façon dont j'ai pu 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
grepit
la source
Si vous essayez de créer une bibliothèque, utilisez ng new MY_PROJECT_NAME --create-application=falsepour l'avant-dernière commande. J'ai eu cette erreur en essayant de construire une bibliothèque. Le --create-application=falsedrapeau évite de tirer des dépendances inutiles. ( angular.io/guide/creating-libraries#getting-started )
VSO
1
travaillé pour moi après avoir effacé le cache npm et
réinstallé
10

Pour Angular 8

Installer NPM-check-mises à jour package

Courir:

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

Ce package mettra à jour tous les packages et résoudra ce problème

Remarque: après la mise à jour Si vous rencontrez ce problème:

ERREUR dans le compilateur angulaire nécessite TypeScript> = 3.4.0 et <3.6.0 mais 3.6.3 a été trouvé à la place.

puis lancez:

$ npm install [email protected]

Lien source

Code Spy
la source
'ncu' n'est pas reconnu comme une commande interne ou externe, un programme exploitable ou un fichier de commandes.
VivekDev
8

npm install Il suffit de taper npm installet d'exécuter, puis le projet s'exécutera sans erreur. Ou vous pouvez utilisernpm install --save-dev @angular-devkit/build-angular

Thisuri
la source
8

Ce qui suit a fonctionné pour moi. Rien d'autre ne l'a fait, malheureusement.

npm uninstall @angular-devkit/build-angular
npm install @angular-devkit/build-angular
ng update --all --allow-dirty --force
Ε Г И І И О
la source
J'ai eu un message disant --allow-dirty not installed. Mais mis à jour mes affaires.
Garth Baker du
6

Essaye celui-là.

npm install

npm update

if it's shows something like this. 

courir npm audit fixpour les réparer, ou npm auditpour plus de détails

Fais ça!

Elshan
la source
1
Et lorsque vous faites cela, NPM dit: "J'espère que vous savez ce que vous faites.". Cela m'a donné des freaks.
Ε Г И І И О
1
voté car il a aidé - bien que partiellement. Après avoir fait cela, il me restait quelques dépendances de pairs manquantes que
j'installe en
6

Les commandes suivantes fonctionnent:

npm install
ng update

-Vous pouvez voir le message "Nous avons analysé votre package.json et tout semble être en ordre. Bon travail!"

npm update

Ensuite, essayez de développer

ng build 

J'ai eu l'erreur avec le script de type, déclassé en

npm install typescript@">=3.1.1 <3.2

ng build --prod 

Tout le succès avec prod build.

Ci-dessous est la combinaison de travail

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
Pushpinder Singh
la source
6

J'ai tout essayé ci-dessus et c'est la voie fixe pour moi:

-> Supprimer le dossier node_modules.

-> Terminal -> installation npm.

J'espère que cela vous a aidé!

Fes Nguyen
la source
4

Lorsque nous exécutons des commandes comme ng serve, il utilise la version locale de @ angular / cli. Installez donc d'abord la dernière version de @ angular / cli localement (sans l'indicateur -g). Mettez ensuite à jour le cli à l'aide de la ng update @angular/clicommande. Je pense que cela devrait résoudre le problème. Merci

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

Tibin Thomas
la source
4

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
Chamila Maddumage
la source
4
npm install --save-dev @angular-devkit/build-angular@latest

résolu pour moi.

Lexy Feito
la source
4

Exécutez simplement 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 n'a pas pu être résolue par la commande ci-dessus, vous mettez à jour la version du nœud

    • mise à jour npm npm -g
Rajnikant Lodhi
la source
4

Premier node_modulesdossier supprimé

puis redémarrer le système

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

et

Courir npm install

Pullat Junaid
la source
3

J'ai lutté 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 d'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 sera efficace ツ


la source
1
Cela n'a rien à voir avec le fait de ne pas trouver de module. cela signifie simplement que le module angular cli sera mis à jour pour toute version 1.6.x
SanSolo
3

Essayez ceci en premier

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

Si une erreur revient pour les paquets manquants, essayez

npm install
Sudheer Muhammed
la source
3

Cela fonctionne pour moi, engagez-vous et ensuite:

ng update @angular/cli @angular/core
npm install --save-dev @angular/cli@latest
Andrey
la source
3

J'ai eu le même problème aujourd'hui, après la mise à niveau du nœud de la v9 à la 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 nœud est installé.
Je suppose que le angular/climodule qu'il contient n'a pas la même version que celui du répertoire node_modules de mon projet, ce qui provoque le problème.

v.nivuahc
la source
2

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

Cela fonctionnera

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

npm install
Kshitij Shukla
la source
1

Veuillez suivre ces 5 étapes, cela a fonctionné définitivement. (Mon expérience personnelle)

Étape 1: npm uninstall -g @angular/cli

Étape 2: npm cache clean --force

Étape 3: npm install -g @angular/cli@latest

Étape 4: npm i

Étape 5: ng build

Après cela, ng servej'espère que votre problème sera résolu.

Soft Dev Ahmad yar khan
la source
0

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

Geared4IT
la source
0

ajoutez @angular-devkit/build-angularsous votre dépendance de développement et cela fonctionnera, ou vous pouvez également exécuter

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

Mohit Jain
la source
0

Supprimez package-lock.json et effectuez à nouveau l'installation de npm. Cela devrait résoudre le problème.

** Ce correctif est plus approprié lorsque vous avez créé l'application Angular 6 en utilisant ng new et après avoir installé d'autres dépendances, vous trouverez cette erreur.

Rut Shah
la source
0

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

installation de npm

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

Chi Cuong Le
la source
0

Solution

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

  • installation de npm
Abdullah Pariyani
la source
0
  • Supprimez les node_modules.
  • Vider le cache à l'aide de'npm cache clean --verify '.
  • Et puis npm réinstaller.

Fonctionne comme un charme pour moi.

Arslan Mir
la source
0

Essaye ça. Ça a marché pour moi

npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/cli@next
Dinesh Shaw
la source
@next vous donnera la version bêta
Brent