Kon module “@angular-devkit/build-angular” niet vinden

Na het updaten naar Angular 6.0.1 krijg ik de volgende foutmelding op 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 updatezegt dat alles in orde is. Het verwijderen van de map node_modulesen een nieuwe npm install-installatie hielp ook niet.

Mijn project is gebaseerd op ng2-admin (Angular4-versie). Hier is mijn package.json-afhankelijkheden:

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

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

Antwoord 1, autoriteit 100%

Installeer @angular-devkit/build-angularals dev-afhankelijkheid. Dit pakket is nieuw geïntroduceerd in Angular 6.0

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

of,

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

Antwoord 2, autoriteit 21%

npm update

Het werkte als een tierelier.

Antwoord 3, autoriteit 11%

voor hoek 6 en hoger

De werkende oplossing voor mij was

npm install

ng update

en tot slot

npm update

Antwoord 4, autoriteit 3%

Moet expliciet devDependencies krijgen.

npm i --only=dev

Antwoord 5, autoriteit 2%

Als de volgende opdracht niet werkt,

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

verplaats dan naar de projectmap en voer deze opdracht uit:

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

Antwoord 6

Ik heb de mijne gerepareerd door:

1. Verwijder de map node_modules.

2. voer npm install

   uit

Hopelijk heeft dit geholpen!

Antwoord 7

Alle bovenstaande antwoorden zijn correct, maar ze werkten niet voor mij. De enige manier waarop ik dit kon laten werken, was door de stappen/commando’s te volgen:

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

Antwoord 8

Voor Angular 8

Installeer NPM-check-updates pakket

Uitvoeren:

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

Dit pakket wordt alle pakketten bijgewerkt en dit probleem oplost

Opmerking: na update als u met dit probleem ondertekent:

Fout in de hoekcompileer vereist typescript & GT; = 3.4.0 en & lt; 3.6.0
Maar 3.6.3 werd in plaats daarvan gevonden.

Voer vervolgens uit:

$ npm install [email protected]

Source Link

9

npm install
Typ gewoon npm installen Run.Then zal het project zonder fouten uitvoeren.
Of u kunt gebruiken npm install --save-dev @angular-devkit/build-angular

10

Het volgende werkte voor mij. Niets anders deed helaas.

npm uninstall @angular-devkit/build-angular
npm install @angular-devkit/build-angular
ng update --all --allow-dirty --force

11

Probeer deze.

npm install
npm update
if it's shows something like this. 

Uitvoeren npm audit fixom ze te verhelpen, of npm auditVOOR DETAILS

Doe dat!

12

Volgende opdrachten werkt:

npm install
ng update

-Mogelijk ziet u het bericht “We hebben uw package.json geanalyseerd en alles lijkt in orde te zijn. Goed gedaan!”

npm update

Probeer dan dev build

ng build 

Ik kreeg de fout met het type script, gedowngraded naar

npm install typescript@">=3.1.1 <3.2
ng build --prod 

Allemaal succes met het bouwen van producten.

Hieronder is de werkende combinatie

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

Antwoord 13

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

heeft het voor mij opgelost.

Antwoord 14

Verwijder eerst de map node_modules

vervolgens Herstart systeem

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

en

Voer npm install

uit

Antwoord 15

Als we commando’s uitvoeren zoals ng serve, gebruikt het de lokale versie van @angular/cli. Installeer dus eerst de nieuwste versie van @angular/cli lokaal (zonder de vlag -g). Werk vervolgens de cli bij met de opdracht ng update @angular/cli. Ik denk dat dit het probleem zou moeten oplossen. Bedankt

Deze link kan u helpen als u uw hoekproject https://update.angular.io/

16

Ik had hetzelfde probleem met Angular 7. Just uitgevoerd De volgende opdracht en fout is opgelost.

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

17

Deze fout treedt in het algemeen voor wanneer het hoekproject niet volledig is geconfigureerd.

Dit werkt

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

18

Voer gewoon de volgende opdracht uit en er is een fout opgelost

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

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

  Als deze fout niet kan oplossen met de bovenstaande opdracht, zodat u de knooppuntversie

  bijwerkt

  • NPM Update NPM -G

19

Ik worstelde slechts een minuut geleden met hetzelfde probleem. Mijn project werd gegenereerd met behulp van de V 1.6.0 van 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

Ik hoop dat mijn hulp effectief is ツ

20

Probeer dit eerst

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

Als er een fout weer komt voor ontbrekende pakketten, probeer dan

npm install

21

Dat is werken voor mij, commit en dan:

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

22

Ik had vandaag hetzelfde probleem, na het upgraden van het knooppunt van V9 naar V10.
Mijn omgeving wordt ingesteld door Docker en ik moest deze opdracht uit de My Dockerfile verwijderen:

npm link @angular/cli

het maakt een symlink naar de map waar het knooppunt is geïnstalleerd.
Ik vermoed dat de angular/cliMODULE erin niet dezelfde versie heeft als die in de Node_modules DIR van mijn project, en dit veroorzaakt het probleem.

23

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

Deze code installeert @angular-devkit/build-angularals Dev-afhankelijkheid.

100% getest.

24

Ik had een bibliotheek die ik heb gemaakt in een oudere versie van Angular.

Nu ik geüpgraded naar de nieuwste versie 11, zou de build falen.

Inderdaad, de bouwer is veranderd.

bij het doen van een ng buildik was iets een enigszins vergelijkbaar foutbericht:

Cannot find module '@angular-devkit/build-ng-packagr/package.json'

In de angular.jsonbestand Ik moest het gebouw van de bouwer wijzigen:

"builder": "@angular-devkit/build-ng-packagr:build",

Met:

"builder": "@angular-devkit/build-angular:ng-packagr",

25

Ik heb geconfronteerd met hetzelfde probleem.

Verrassend genoeg was het alleen omdat de versionis opgegeven in package.jsonniet in het verwachte formaat.

Ik heb van versie ingeschakeld "version": "0.1"naar "version": "0.0.1"en het loste het probleem op.

Hoekbehoeften Semantisch versiering (lees halver ) met drie delen.

26

als het volgende commando in een hoekige cli is uitgevoerd, zal het project succesvol worden uitgevoerd.

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

Antwoord 27

Ik heb sinds 2 dagen hetzelfde probleem.

ng -v :6.0.8
node -v :8.11.2
npm -v :6.1.0

Zorg ervoor dat u zich in de map bevindt waarin angular.jsonis geïnstalleerd. Ga erin en typ ng serve. Als het probleem zich blijft voordoen, hebt u alleen afhankelijkheden geïnstalleerd in node_modules. Typ het volgende en het zal werken:

npm i --only=dev

Antwoord 28

Helaas werkte geen van de geboden oplossingen perfect voor mij, maar het antwoord van grepit inspireerde me om de volgende stappen uit te voeren.
Ik heb node.js via mijn besturingssysteem (Windows 10) verwijderd en opnieuw geïnstalleerd. Vervolgens Angular CLI geïnstalleerd. Vervolgens een nieuw project gemaakt en het src-bestand van mijn oude project naar dit nieuwe gekopieerd en de fout is verdwenen.

Hier zijn de instructies:

1. Verwijder node.js via uw besturingssysteem en installeer het opnieuw
2. npm install -g @angular/cli
3. Hernoem je project naar YOUR_PROJECT_NAME.old
4. ng new YOUR_PROJECT_NAME
5. Voer dit hello world-project uit (ng serve) om ervoor te zorgen dat u de foutmelding niet krijgt.
6. xcopy YOUR_PROJECT_NAME.old\src\*.* YOUR_PROJECT_NAME\src /s
   Dit is de Windows-versie van kopiëren, verander het op basis van uw eigen besturingssysteem.

Antwoord 29

met behulp van onderstaande commando’s zal je applicatie werken zoals je elk commando hebt uitgevoerd zoals ik al zei

1.npm list -g --depth=0
 2.npm i npm-check-updates
 3.npm install

voer ten slotte de onderstaande opdracht uit om uw project in de browser te openen

ng serve --open