No se pudo encontrar el módulo "@ angular-devkit / build-angular"

451

Después de actualizar a Angular 6.0.1, aparece el siguiente error en 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 updatedice que todo está en orden. Eliminar la node_modulescarpeta y una nueva npm installinstalación tampoco ayudó.

Mi proyecto se basa en ng2-admin (versión Angular4) . Aquí están mis dependencias 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"
  }

y mi 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
fuente
Para Angular 8 Simplemente instale el paquete NCU npm [$ npm i -g npm-check-updates] y actualícelo todo aquí para obtener más información freakyjolly.com/how-to-update-local-angular-cli-version
Code Spy

Respuestas:

736

Instalar @angular-devkit/build-angularcomo dependencia de desarrollo. Este paquete se introdujo recientemente en Angular 6.0

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

o,

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

Ritwick Dey
fuente
11
Me enfrento al mismo problema. Lamentablemente, su solución no funcionó para mí. ¿Tiene alguna otra sugerencia?
subzerodeluxe
Exactamente el mismo error? ¿Y el archivo de configuración? ¿son iguales a esta pregunta?
Ritwick Dey
Si. Bueno, hice un poco más de exploración sobre este tema. Resulta que funciona bien en mi Mac Mini, por lo que probablemente tenga algo que ver con mi configuración de Nodo en Windows.
subzerodeluxe
2
Actualice a angular 7: la respuesta aceptada solucionó el error (ha votado a favor), pero no resolvió el problema de actualización en general. Esto hizo stackoverflow.com/a/51592138/852806
HockeyJ
3
Gracias por esto. Acabo de encontrar este problema al intentar seguir el tutorial angular: angular.io/guide/quickstart , ¿parece que alguien olvidó actualizar la documentación?
Dan King
167
npm update

Funcionó a las mil maravillas.

Ajay Takur
fuente
3
Me mudé a una nueva máquina a la mitad del tutorial de angular-tour-of-heroes y saqué el trabajo a medias del control de la fuente. Esto lo solucionó.
Heliac
Después de crear una rama en el proyecto de mi compañero de trabajo, recibí el mensaje de error. Esto lo solucionó. Gracias.
Moni
Nada "medio cocido" sobre no registrar en la node modulescarpeta. Esto simplemente reconstruye sus módulos de nodo en función de su package.json. Esto es perfectamente normal cuando revisa una nueva solución.
Liam el
2
Resuelve todas las dependencias :). +1
Hammad Sajid
Puede haber paquetes adicionales que están desactualizados. Ejecute ng update --allpara intentar actualizar todo al mismo tiempo.
Solitario
86

para angular 6 y superior

La solución de trabajo para mí fue

npm install

ng update

y finalmente

npm update

El hombre muerto
fuente
Cuando hago la actualización de ng recibí varios mensajes sobre varias actualizaciones específicas necesarias. Nombre Versión Comando para actualizar --------------------------------------------- ----------------------------------- @ angular / core 4.4.7 -> 8.2.4 ng actualización @ 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 del 87
3
Gracias @ user9964622, esta solución funcionó para mí.
Profundo
@ Profundo Me alegro de poder ayudar, feliz codificación
The Dead Man
15

Si el siguiente comando no funciona,

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

luego vaya a la carpeta del proyecto y ejecute este comando:

npm install --save @angular-devkit/build-angular
Murugaraju Perumalla
fuente
npm install --save @ angular-devkit / build-angular funcionó para mí, pero el único problema fue que estaba tratando de ejecutar este comando desde un símbolo del sistema que no se ejecutó como administrador, y entré para ejecutar este comando que no se mostraba cualquier error, nada, solo el cursor estaba en estado de espera, entonces simplemente ejecuté un cmd con admin en él funcionó Gracias
asifaftab87
14

Todas las respuestas anteriores son correctas, pero no me funcionaron. La única forma en que pude hacer que esto funcionara fue siguiendo los pasos / comandos:

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
fuente
Si está intentando construir una biblioteca, utilícela ng new MY_PROJECT_NAME --create-application=falsepara el penúltimo comando. Tuve este error al intentar construir una biblioteca. La --create-application=falsebandera evita atraer dependencias innecesarias. ( angular.io/guide/creating-libraries#getting-started )
VSO
1
trabajado para mí después de borrar la memoria caché NPM y la instalación de nuevo
braj
10

Para angular 8

Instalar NPM-Check-actualizaciones de paquete

Correr:

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

Este paquete actualizará todos los paquetes y resolverá este problema

Aviso: después de la actualización Si enfrenta este problema:

ERROR en The Angular Compiler requiere TypeScript> = 3.4.0 y <3.6.0 pero en su lugar se encontró 3.6.3.

entonces corre:

$ npm install [email protected]

Enlace fuente

Code Spy
fuente
'ncu' no se reconoce como un comando interno o externo, programa operativo o archivo por lotes.
VivekDev
8

npm install Simplemente escriba npm instally ejecute. Luego el proyecto se ejecutará sin errores. O puedes usarnpm install --save-dev @angular-devkit/build-angular

Thisuri
fuente
8

Lo siguiente funcionó para mí. Nada más lo hizo, desafortunadamente.

npm uninstall @angular-devkit/build-angular
npm install @angular-devkit/build-angular
ng update --all --allow-dirty --force
Ε Г И І И О
fuente
Recibí un mensaje que decía: "Permitir sucio" no instalado. Pero actualicé mis cosas.
Garth Baker
6

Prueba este.

npm install

npm update

if it's shows something like this. 

corre npm audit fixpara arreglarlos, o npm auditpara detalles

¡Haz eso!

Elshan
fuente
1
Y cuando haces eso, NPM dice 'Espero que sepas lo que estás haciendo'. Eso me dio los monstruos.
Ε Г И І И О
1
votó desde que ayudó, aunque solo parcialmente. Después de hacer esto, todavía me faltaban algunas dependencias de pares que instalo siguiendo esta idea: stackoverflow.com/a/51063840/2995907
dingalapadum
6

Los siguientes comandos funcionan:

npm install
ng update

-Puede ver el mensaje "Analizamos su paquete.json y todo parece estar en orden. ¡Buen trabajo!"

npm update

Entonces prueba dev build

ng build 

Recibí el error con el script de tipo, degradado a

npm install typescript@">=3.1.1 <3.2

ng build --prod 

Todo el éxito con prod build.

A continuación se muestra la combinación de trabajo.

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
fuente
6

Intenté todo lo anterior y esta es la forma fija para mí:

-> Eliminar la carpeta node_modules.

-> Terminal -> npm install.

Espero que esto haya ayudado!

Fez Nguyen
fuente
4

Cuando ejecutamos comandos como ng serve, utiliza la versión local de @ angular / cli. Así que primero instale la última versión de @ angular / cli localmente (sin la bandera -g). Luego actualice el cli usando el ng update @angular/clicomando. Creo que esto debería solucionar el problema. Gracias

Este enlace puede ayudarlo si está actualizando su proyecto angular https://update.angular.io/

Tibin Thomas
fuente
4

Tuve el mismo problema con Angular 7. Acabo de ejecutar el siguiente comando y se solucionó el error.

npm install --save-dev @angular-devkit/build-angular
Chamila Maddumage
fuente
4
npm install --save-dev @angular-devkit/build-angular@latest

Lo resolvió para mí.

Lexy Feito
fuente
4

Simplemente ejecute el siguiente comando y se solucionó el error

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

    si este error no se pudo resolver con el comando anterior, entonces actualiza la versión del nodo

    • npm update npm -g
Rajnikant Lodhi
fuente
4

Primero eliminar node_modulescarpeta

luego reiniciar el sistema

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

y

correr npm install

Pullat Junaid
fuente
3

Luché con el mismo problema hace solo un minuto. Mi proyecto fue generado usando el 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

Espero que mi ayuda sea efectiva ツ


fuente
1
Esto no tiene nada que ver con no poder encontrar un módulo. esto solo significa que el módulo angular cli se actualizará para cualquier versión 1.6.x
SanSolo
3

Prueba esto primero

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

Si algún error vuelve a aparecer por paquetes faltantes, intente

npm install
Muhammed de repente
fuente
3

Eso funciona para mí, comprometerse y luego:

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

Tuve el mismo problema hoy, después de actualizar el nodo de v9 a v10.
Docker establece mi entorno y tuve que eliminar este comando de mi DockerFile:

npm link @angular/cli

Crea un enlace simbólico al directorio donde está instalado el nodo.
Supongo que el angular/climódulo no tiene la misma versión que la del directorio node_modules de mi proyecto, y esto causa el problema.

v.nivuahc
fuente
2

Este error generalmente ocurre cuando el proyecto angular no se configuró por completo.

Esto funcionará

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

npm install
Kshitij Shukla
fuente
0

ejecutar lo siguiente funcionó para mí npm audit fix --force

Geared4IT
fuente
0

agregue @angular-devkit/build-angularbajo su dependencia de desarrollo y funcionará, o también puede ejecutar

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

Mohit Jain
fuente
0

Elimine package-lock.json y vuelva a instalar npm. Debería solucionar el problema.

** Esta solución es más adecuada cuando ha creado la aplicación Angular 6 usando ng new y después de instalar otras dependencias encuentra este error.

Rut Shah
fuente
0

En mi caso, el problema se debe a la falta de dependencias. Por qué faltan dependencias, porque he olvidado llamar:

npm install

Después de llamar al comando anterior, todas las dependencias requeridas se cargan en node_modules, y eso ya no es un problema

Chi Cuong Le
fuente
0

Solución

Ejecute el siguiente comando en su CLI:

  • npm install
Abdullah Pariyani
fuente
0
  • Eliminar los node_modules.
  • Borre el caché usando 'npm cache clean --verify'.
  • Y luego npm instalar de nuevo.

Funciona como un encanto para mí.

Arslan Mir
fuente
0

Prueba esto. Funciono para mi

npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/cli@next
Dinesh Shaw
fuente
@next te dará beta
Brent
0

Desafortunadamente, ninguna de las soluciones proporcionadas funcionó perfectamente para mí, pero la respuesta de Grepit me inspiró a seguir los siguientes pasos. Desinstalé node.js a través de mi sistema operativo (Windows 10) y lo instalé nuevamente. Luego se instaló CLI angular. Luego creé un nuevo proyecto y copié el archivo src de mi antiguo proyecto en este nuevo y el error desapareció.

Aquí están las instrucciones:

  1. Desinstale node.js a través de su sistema operativo e instálelo nuevamente
  2. npm install -g @angular/cli
  3. Cambie el nombre de su proyecto a YOUR_PROJECT_NAME.old
  4. ng new YOUR_PROJECT_NAME
  5. Ejecute este proyecto hello world ( ng serve) para asegurarse de que no obtendrá el error.
  6. xcopy YOUR_PROJECT_NAME.old\src\*.* YOUR_PROJECT_NAME\src /s
    Esta es la versión de Windows de la copia, cámbiela según su propio sistema operativo.
Ahmad
fuente