Não foi possível encontrar o módulo "@ angular-devkit / build-angular"

450

Depois de atualizar para o Angular 6.0.1, recebo o seguinte erro 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 updatediz que está tudo em ordem. Excluir node_modulespastas e uma npm installinstalação nova também não ajudou.

Meu projeto é baseado no ng2-admin (versão Angular4) . Aqui estão minhas dependências 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"
  }

e meu 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
fonte
Para o Angular 8 Basta instalar o pacote NCU npm [$ npm i -g npm-check-updates] e atualizar todos os check aqui para obter mais informações freakyjolly.com/how-to-update-local-angular-cli-version
Code Spy

Respostas:

735

Instale @angular-devkit/build-angularcomo dependência do desenvolvedor. Este pacote foi introduzido recentemente no Angular 6.0

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

ou,

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

Ritwick Dey
fonte
11
Eu enfrento o mesmo problema. Infelizmente sua solução não funcionou para mim. Você tem alguma outra sugestão?
Subzerodeluxe 15/05/19
Exato mesmo erro? E o arquivo de configuração? eles são iguais a esta pergunta?
Ritwick Dey
Sim. Bem, eu fiz mais algumas explorações sobre esse assunto. Acontece que ele funciona bem no meu Mac Mini, então provavelmente terá algo a ver com a minha configuração de nó no Windows.
Subzerodeluxe 15/05/19
2
Atualize para o angular 7 - a resposta aceita corrigiu o erro (votou positivamente), mas não resolveu o problema de atualização em geral. Isso fez stackoverflow.com/a/51592138/852806
HockeyJ
3
Obrigado por isso. Acabei de encontrar esse problema ao tentar seguir o tutorial do Angular: angular.io/guide/quickstart - parece que alguém esqueceu de atualizar a documentação?
Dan rei
167
npm update

Funcionou como um encanto.

Ajay Takur
fonte
3
Mudei para uma nova máquina no meio do tutorial do tour angular dos heróis e tirei o trabalho meio cozido do controle de origem. Isso consertou.
Heliac
Depois de criar uma filial no projeto do meu colega de trabalho, recebi a mensagem de erro. Isso consertou. Obrigado.
Moni
Nada "meio cozido" sobre não fazer check-in na node modulespasta. Isso simplesmente reconstrói os módulos do nó com base no seu package.json. Isso é perfeitamente normal quando você faz check-out de uma nova solução.
Liam
2
Resolve todas as dependências :). +1
Hammad Sajid
Pode haver pacotes adicionais desatualizados. Execute ng update --allpara tentar atualizar tudo ao mesmo tempo.
Solitário
86

para angular 6 e acima

A solução de trabalho para mim foi

npm install

ng update

e finalmente

npm update

O homem morto
fonte
Ao fazer a atualização ng, recebi várias mensagens sobre várias atualizações específicas necessárias. Nome Versão Comando a atualizar --------------------------------------------- ----------------------------------- @ 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 de 87
3
Obrigado @ user9964622, esta solução funcionou para mim.
Profundo
@Deep estou feliz que eu poderia ajudar, feliz codificação
The Dead Man
15

Se o seguinte comando não funcionar,

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

mova para a pasta do projeto e execute este comando:

npm install --save @angular-devkit/build-angular
Murugaraju Perumalla
fonte
O npm install --save @ angular-devkit / build-angular funcionou para mim, mas o único problema foi que eu estava tentando executar este comando em um prompt de comando que não era executado como administrador e entrei para executar este comando que não estava sendo exibido qualquer erro, nada apenas o cursor estava no estado de espera, então eu simplesmente executava um cmd com o admin. obrigado
asifaftab87
14

Todas as respostas acima estão corretas, mas não funcionaram para mim. A única maneira de fazer isso funcionar foi seguindo as etapas / 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
fonte
Se você estiver tentando criar uma biblioteca, use ng new MY_PROJECT_NAME --create-application=falseo penúltimo comando. Eu tive esse erro ao tentar criar uma biblioteca. A --create-application=falsebandeira evita puxar dependências desnecessárias. ( angular.io/guide/creating-libraries#getting-started )
VSO
1
funcionou para mim depois de limpar o cache do NPM e instalar novamente
Braj
10

Para Angular 8

Instale NPM-check-atualizações pacote

Corre:

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

Este pacote atualizará todos os pacotes e resolverá esse problema

Aviso: Após a atualização Se você enfrentar esse problema:

ERRO no Compilador Angular requer TypeScript> = 3.4.0 e <3.6.0, mas 3.6.3 foi encontrado.

então corra:

$ npm install [email protected]

Link de origem

Code Spy
fonte
'ncu' não é reconhecido como um comando interno ou externo, programa operável ou arquivo em lote.
VivekDev
8

npm install Basta digitar npm installe executar. Em seguida, o projeto será executado sem erros. Ou você pode usarnpm install --save-dev @angular-devkit/build-angular

Thisuri
fonte
8

O seguinte funcionou para mim. Infelizmente, nada mais fez.

npm uninstall @angular-devkit/build-angular
npm install @angular-devkit/build-angular
ng update --all --allow-dirty --force
Ε Г И І И О
fonte
Eu recebi uma mensagem dizendo --allow-dirty não instalado. Mas atualizei minhas coisas.
Garth Baker
6

Tente este.

npm install

npm update

if it's shows something like this. 

executar npm audit fixpara corrigi-los ou npm auditpara obter detalhes

Faça isso!

Elshan
fonte
1
E quando você faz isso, o NPM diz 'Espero que saiba o que está fazendo'. Isso me deu arrepios.
Sep Г И І О
1
votado desde que ajudou - embora apenas parcialmente. Depois de fazer isso eu ainda tinha algumas dependências de pares falta que eu instalo Seguindo esta idéia: stackoverflow.com/a/51063840/2995907
dingalapadum
6

Os seguintes comandos funcionam:

npm install
ng update

-Você pode ver a mensagem "Analisamos seu package.json e tudo parece estar em ordem. Bom trabalho!"

npm update

Então tente dev build

ng build 

Eu recebi o erro com o script de tipo, rebaixado para

npm install typescript@">=3.1.1 <3.2

ng build --prod 

Todo o sucesso com prod build.

Abaixo está a combinação de trabalho

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

Eu tentei tudo acima e esta é a maneira fixa para mim:

-> Excluir pasta node_modules.

-> Terminal -> instalação npm.

Espero que isso tenha ajudado!

Fes Nguyen
fonte
4

Quando executamos comandos como ng serve, ele usa a versão local do @ angular / cli. Então, primeiro instale a versão mais recente do @ angular / cli localmente (sem o sinalizador -g). Atualize o CLI usandong update @angular/cli comando Eu acho que isso deve resolver o problema. obrigado

Este link pode ajudá-lo se você estiver atualizando seu projeto angular https://update.angular.io/

Tibin Thomas
fonte
4

Eu tive o mesmo problema com o Angular 7. Acabei de executar o seguinte comando e o erro foi resolvido.

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

resolveu para mim.

Lexy Feito
fonte
4

Basta executar o seguinte comando e o erro foi resolvido

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

    se este erro não puder ser resolvido pelo comando acima, você atualiza a versão do nó

    • atualização npm npm -g
Rajnikant Lodhi
fonte
4

Primeira exclusão node_modules pasta de

em seguida, sistema Restart

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

e

Corre npm install

Pullat Junaid
fonte
3

Eu lutei com o mesmo problema há apenas um minuto. Meu projeto foi gerado usando o v 1.6.0 do 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 minha ajuda seja eficaz ツ


fonte
1
Isso não tem nada a ver com não conseguir encontrar um módulo. isto significa apenas o módulo cli angular será atualizado para qualquer versão 1.6.x
Sansolo
3

Experimente primeiro

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

Se algum erro ocorrer novamente por falta de pacotes, tente

npm install
Sudheer Muhammed
fonte
3

Isso funciona para mim, confirme e depois:

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

Eu tive o mesmo problema hoje, depois de atualizar o nó da v9 para a v10.
Meu ambiente é definido pela janela de encaixe e tive que remover este comando do meu DockerFile:

npm link @angular/cli

Ele cria um link simbólico para o diretório em que o nó está instalado.
Eu acho que o angular/climódulo nele não tem a mesma versão que a do diretório node_modules do meu projeto, e isso causa o problema.

v.nivuahc
fonte
2

Esse erro geralmente ocorre quando o projeto angular não foi configurado completamente.

Isso vai funcionar

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

npm install
Kshitij Shukla
fonte
0

executando o seguinte funcionou para mim npm audit fix --force

Geared4IT
fonte
0

adicione @angular-devkit/build-angularsob sua dependência de desenvolvedor e ele funcionará, ou você também pode executar

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

Mohit Jain
fonte
0

Exclua package-lock.json e instale o npm novamente. Deve corrigir o problema.

** Essa correção é mais adequada quando você cria o aplicativo Angular 6 usando o ng novo e depois de instalar outras dependências, você encontra esse erro.

Rut Shah
fonte
0

No meu caso, o problema é devido à falta de dependências. Por que as dependências estão ausentes, porque esqueci de ligar para:

instalação npm

Depois de chamar o comando acima, todas as dependências necessárias são carregadas em node_modules, e isso não é mais problema

Chi Cuong Le
fonte
0

Solução

Execute o comando abaixo na sua CLI:

  • instalação npm
Abdullah Pariyani
fonte
0
  • Exclua os node_modules.
  • Limpe o cache usando 'npm cache clean --verify'.
  • E então o npm é instalado novamente.

Funciona como um encanto para mim.

Arslan Mir
fonte
0

Tente isso. Funcionou para mim

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

Infelizmente, nenhuma das soluções fornecidas funcionou perfeitamente para mim, mas a resposta do grepit me inspirou a executar as etapas a seguir. Desinstalei o node.js através do meu sistema operacional (Windows 10) e o instalei novamente. Em seguida, instalou o Angular CLI. Em seguida, criei um novo projeto e copiei o arquivo src do meu projeto antigo para esse novo, e o erro se foi.

Aqui estão as instruções:

  1. Desinstale o node.js através do seu sistema operacional e instale-o novamente
  2. npm install -g @angular/cli
  3. Renomeie seu projeto para YOUR_PROJECT_NAME.old
  4. ng new YOUR_PROJECT_NAME
  5. Execute este projeto hello world ( ng serve) para garantir que você não receberá o erro.
  6. xcopy YOUR_PROJECT_NAME.old\src\*.* YOUR_PROJECT_NAME\src /s
    Esta é a versão de cópia do Windows, altere-a com base no seu próprio sistema operacional.
Ahmad
fonte