Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can not find module “@angular-devkit/build-angular”

Using npm, I followed the getting started directions on the Angular CLI quick start page.

Angular CLI Quickstart

Running ng serve --open after creating and going into my new project "frontend" gave this error:

Could not find module "@angular-devkit/build-angular" from "C:\\Users\\Brandon\\project-name\\frontend".
Error: Could not find module "@angular-devkit/build-angular" from "C:\\Users\\Brandon\\project-name\\frontend".
 at Object.resolve (C:\Users\Brandon\project-name\node_modules\@angular-devkit\core\node\resolve.js:141:11)
 at Observable.rxjs_1.Observable [as _subscribe] (C:\Users\Brandon\project-name\node_modules\@angular-devkit\architect\src\architect.js:132:40)

I have tried suggestions from the other question similar to mine but it did not work. Answer was to run npm install --save-dev @angular-devkit/build-angular.

Similar Question

I have also deleted modules, cleared cache, then did an install which also did not work.

package.json:

{
 "name": "frontend",
 "version": "0.0.0",
 "scripts": {
   "ng": "ng",
   "start": "ng serve",
   "build": "ng build",
   "test": "ng test",
   "lint": "ng lint",
   "e2e": "ng e2e"
 },
"private": true,
"dependencies": {
  "@angular/animations": "^6.0.2",
  "@angular/common": "^6.0.2",
  "@angular/compiler": "^6.0.2",
  "@angular/core": "^6.0.2",
  "@angular/forms": "^6.0.2",
  "@angular/http": "^6.0.2",
  "@angular/platform-browser": "^6.0.2",
  "@angular/platform-browser-dynamic": "^6.0.2",
  "@angular/router": "^6.0.2",
  "core-js": "^2.5.4",
  "rxjs": "^6.0.0",
  "zone.js": "^0.8.26"
 },
"devDependencies": {
  "@angular/compiler-cli": "^6.0.2",
  "@angular-devkit/build-angular": "~0.6.3",
  "typescript": "~2.7.2",
  "@angular/cli": "^6.0.3",
  "@angular/language-service": "^6.0.2",
  "@types/jasmine": "~2.8.6",
  "@types/jasminewd2": "~2.0.3",
  "@types/node": "~8.9.4",
  "codelyzer": "~4.2.1",
  "jasmine-core": "~2.99.1",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "~1.7.1",
  "karma-chrome-launcher": "~2.2.0",
  "karma-coverage-istanbul-reporter": "~1.4.2",
  "karma-jasmine": "~1.1.1",
  "karma-jasmine-html-reporter": "^0.2.2",
  "protractor": "~5.3.0",
  "ts-node": "~5.0.1",
  "tslint": "~5.9.1"
 }
}

angular.json:

 {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "frontend": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/frontend",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "frontend:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "frontend:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "frontend:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "frontend-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "frontend:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "frontend"
}
like image 455
Brandon Lumsden Avatar asked May 17 '18 23:05

Brandon Lumsden


People also ask

Can't find module angular Devkit build angular?

To solve the error "Could not find module '@angular-devkit/build-angular'", make sure to install the package by opening your terminal in your project's root directory and running the following command: npm i -D @angular-devkit/build-angular and restart your IDE and development server.

What is angular Devkit build angular used for?

@angular-devkit/build-angular This package contains Architect builders used to build and test Angular applications and libraries.

How do you fix you seem to not be depending on angular core this is an error?

The most common reason for this is a broken npm install. Please make sure your package. json contains both @angular/compiler-cli and typescript in devDependencies, then delete node_modules and package-lock. json (if you have one) and run npm install again.


1 Answers

Running ng serve --open after creating and going into my new project "frontend" gave this error:

After creating the project, you need to run

npm install 

to install all the dependencies listed in package.json

like image 79
baao Avatar answered Sep 24 '22 19:09

baao