Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

An unhandled exception occurred: Could not find the implementation for builder @angular-devkit/build-angular:dev-server

I was trying to install ngb-tabset, and I got some error on angular-core, which accordingly I ran:

npm install -S @angular/material @angular/cdk @angular/animations

npm uninstall @angular/core

npm install -S @angular/core

But then I got some other error... for which I did npm update, then again few errors. I did:

rm -rf node_modules
npm install

Then I started getting the below error.

An unhandled exception occurred: Could not find the implementation for builder @angular-devkit/build-angular:dev-server See "/tmp/ng-2tgkqg/angular-errors.log" for further details.

I tried to do -

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

but of no use.

And my package.json is -

{
  "name": "@coreui/coreui-free-angular-admin-template",
  "version": "2.0.1",
  "description": "CoreUI Free Angular 2+ Admin Template",
  "author": {
    "name": "Łukasz Holeczek",
    "url": "http://holeczek.pl",
    "github": "https://github.com/mrholek",
    "twitter": "https://twitter.com/lukaszholeczek"
  },
  "contributors": [
    {
      "name": "Andrzej Kopański",
      "url": "https://github.com/xidedix"
    }
  ],
  "homepage": "https://coreui.io/angular",
  "copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "^6.1.10",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "^6.1.10",
    "@angular/compiler": "^6.1.10",
    "@angular/core": "^6.1.10",
    "@angular/forms": "^6.1.10",
    "@angular/http": "^6.1.10",
    "@angular/material": "^7.3.3",
    "@angular/platform-browser": "^6.1.10",
    "@angular/platform-browser-dynamic": "^6.1.10",
    "@angular/router": "^6.1.10",
    "@coreui/angular": "^2.0.0-rc.1",
    "@coreui/coreui": "^2.0.20",
    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
    "@coreui/icons": "^0.3.0",
    "@ng-select/ng-select": "^2.16.0",
    "@progress/kendo-angular-buttons": "^4.0.0",
    "@progress/kendo-angular-dateinputs": "2 - 3",
    "@progress/kendo-angular-dropdowns": "2 - 3",
    "@progress/kendo-angular-excel-export": "1 - 2",
    "@progress/kendo-angular-grid": "^3.13.0",
    "@progress/kendo-angular-inputs": "2 - 4",
    "@progress/kendo-angular-intl": "^1.0.0",
    "@progress/kendo-angular-l10n": "^1.1.0",
    "@progress/kendo-angular-popup": "^2.0.0",
    "@progress/kendo-data-query": "^1.0.0",
    "@progress/kendo-drawing": "^1.0.0",
    "@progress/kendo-theme-default": "latest",
    "@syncfusion/ej2-angular-dropdowns": "^16.4.55",
    "@syncfusion/ej2-angular-grids": "^16.4.55",
    "@syncfusion/ej2-ng-dropdowns": "^16.2.50",
    "@types/jquery": "^3.3.29",
    "angular-confirmation-popover": "^4.2.0",
    "angular-neo4j": "^0.7.1",
    "angular2-bootstrap-switch": "^0.2.3",
    "angular2-countrypicker": "^1.0.0",
    "angular2-google-maps": "^0.17.0",
    "apriori": "^1.0.7",
    "bcryptjs": "^2.4.3",
    "bootstrap": "^4.0.0-beta.3",
    "chart.js": "^2.7.3",
    "core-js": "^2.6.5",
    "cors": "^2.8.5",
    "country-select-js": "^2.0.1",
    "crud-sdk": "0.0.30",
    "cryptr": "^4.0.2",
    "csv-writer": "^1.2.0",
    "express": "^4.16.4",
    "express-jwt": "^5.3.1",
    "express-session": "^1.15.6",
    "file-saver": "^2.0.1",
    "flag-icon-css": "^3.2.1",
    "font-awesome": "^4.7.0",
    "html2canvas": "^1.0.0-rc.3",
    "html2pdf.js": "^0.9.1",
    "jquery": "^3.4.0",
    "jspdf": "^1.5.3",
    "jspdf-autotable": "^3.1.1",
    "login-sdk": "0.0.3",
    "mkdirp": "^0.5.1",
    "moment": "^2.22.2",
    "mongodb": "^2.2.33",
    "mongoskin": "^2.0.3",
    "morgan": "^1.9.1",
    "multer": "^1.4.1",
    "mutationobserver-shim": "^0.3.2",
    "nemex-angular2-realtimegeolocation": "0.0.6",
    "ng-multiselect-dropdown": "^0.2.3",
    "ng2-charts": "^1.6.0",
    "ng2-opd-popup": "^1.1.21",
    "ng2-select": "^2.0.0",
    "ngx-accordion": "0.0.17",
    "ngx-bootstrap": "^3.3.0",
    "ngx-country-select": "^2.0.6",
    "ngx-horizontal-timeline": "0.0.5",
    "ngx-loading": "^3.0.1",
    "ngx-mat-select-search": "^1.5.3",
    "ngx-pagination": "^3.2.1",
    "ngx-perfect-scrollbar": "^6.3.1",
    "ngx-scrollbar": "^3.2.2",
    "ngx-select-dropdown": "^1.0.1",
    "ngx-smart-modal": "^7.1.1",
    "ngx-ui-switch": "^8.0.0",
    "nodemailer": "^5.0.0",
    "nodemon": "^1.19.1",
    "notification-sdk": "0.0.9",
    "pdfmake": "^0.1.57",
    "primeicons": "^1.0.0",
    "primeng": "^7.1.3",
    "q": "^1.5.1",
    "redis": "^2.8.0",
    "request": "^2.88.0",
    "request-promise": "^4.2.2",
    "request-promise-native": "^1.0.5",
    "restify": "^7.2.2",
    "rootpath": "^0.1.2",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.0.0",
    "simple-line-icons": "^2.4.1",
    "tinyurl": "^1.1.2",
    "ts-helpers": "^1.1.2",
    "tsickle": "^0.33.0",
    "tslib": "^1.10.0",
    "venn.js": "^0.2.20",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.7.5",
    "@angular/cli": "^6.2.7",
    "@angular/compiler-cli": "^6.1.10",
    "@angular/language-service": "^6.1.10",
    "@types/jasmine": "^2.8.9",
    "@types/jasminewd2": "^2.0.5",
    "@types/node": "^10.14.4",
    "body-parser": "^1.18.3",
    "codelyzer": "^4.5.0",
    "jasmine-core": "^3.2.1",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.3.1",
    "protractor": "^5.4.1",
    "ts-node": "^7.0.1",
    "tslint": "^5.11.0",
    "typescript": "^2.9.2"
  },
  "engines": {
    "node": ">= 8.9.4",
    "npm": ">= 5.6.0"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ng": {
      "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"
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "node_modules/@coreui/icons/css/coreui-icons.css",
              "node_modules/flag-icon-css/css/flag-icon.css",
              "node_modules/font-awesome/css/font-awesome.css",
              "node_modules/simple-line-icons/css/simple-line-icons.css",
              "src/scss/style.scss",
              "./node_modules/ngx-ui-switch/ui-switch.component.css",
              "node_modules/ngx-smart-modal/ngx-smart-modal.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "./node_modules"
              ]
            },
            "scripts": [
              "node_modules/chart.js/dist/Chart.min.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": "ng:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ng:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ng: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/chart.js/dist/Chart.min.js"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              {
                "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
              },
              "node_modules/flag-icon-css/css/flag-icon.css",
              "node_modules/font-awesome/css/font-awesome.css",
              "node_modules/simple-line-icons/css/simple-line-icons.css",
              "src/scss/style.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "./node_modules"
              ]
            },
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "ng-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "ng:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "ng",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}
like image 435
Techdive Avatar asked Jul 17 '19 11:07

Techdive


People also ask

How do you fix error could not find the '@ angular Devkit build angular dev server builder's node package?

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?

This package contains Architect builders used to build and test Angular applications and libraries.

Can not find module in angular?

To solve the error "Cannot find module '@angular/core'", make sure you have installed all dependencies by running the npm install command, set the baseUrl option to src in your tsconfig. json file and restart your IDE and development server.

How do I uninstall angular Devkit schematics?

Please remove both the "node_modules" directory and the package lock file; and then reinstall. If this does not correct the problem, please temporarily install the "@angular-devkit/schematics" package within the workspace. It can be removed once the update is complete.


4 Answers

This worked for me:

As per @lak-coder on: https://github.com/angular/angular-cli/issues/14546

run

npm uninstall @angular-devkit/build-angular

then

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

like image 88
Dustin177820 Avatar answered Oct 19 '22 15:10

Dustin177820


I have the same issue and I solved by this way!

1- npm rm -rf node_modules

2- npm install --save-dev @angular/cli@latest

3- npm uninstall @angular-devkit/build-angular

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

5- npm install -g rxjs-tslint

6- npm install --save-dev typescript@<supported version>

7- ng update

8- ng update @angular/cli @angular/core --allow-dirty --force

9- ng build

It worked like a charm!

Refer to this for details.

like image 22
Randa Harb Avatar answered Oct 19 '22 14:10

Randa Harb


Here's what I did

  1. ng update @angular/cli @angular/core
  2. npm uninstall @angular-devkit/build-angular
  3. npm install --save-dev @angular-devkit/build-angular
like image 2
chidimo Avatar answered Oct 19 '22 16:10

chidimo


I have found it necessary to set these devDependency package versions manually after upgrading from Angular 7.5 to 8.0:

"@angular-builders/custom-webpack": "8.4.1", 
"@angular-devkit/build-angular": "^0.800.3"

This resolved the above issue for me.

like image 2
Kevin Cartwright Avatar answered Oct 19 '22 14:10

Kevin Cartwright