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

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

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

npm update

Ça a marché comme sur des roulettes.

pour angulaire 6 et plus

La solution de travail pour moi était

npm install

ng update

et enfin

npm update

Besoin d'obtenir explicitement devDependencies.

npm i --only=dev

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

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

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

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

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

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!

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

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é!

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/

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

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

résolu pour moi.

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

Premier node_modulesdossier supprimé

puis redémarrer le système

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

et

Courir npm install

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 ツ

Essayez ceci en premier

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

Si une erreur revient pour les paquets manquants, essayez

npm install

Cela fonctionne pour moi, engagez-vous et ensuite:

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

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.

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

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.

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

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

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.

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

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

• installation de npm

• 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.

Essaye ça. Ça a marché pour moi

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