ng serve is not working after Angular 8 update

Question

Error

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

         ng serve         Could not find the implementation for builder @angular-devkit/build-angular:dev-server         Error: Could not find the implementation for builder @angular-devkit/build-angular:dev-server             at WorkspaceNodeModulesArchitectHost.resolveBuilder (D:\angular-tour-of-heroes\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js:49:19)             at ServeCommand.initialize (D:\angular-tour-of-heroes\node_modules\@angular\cli\models\architect-command.js:135:55)             at async ServeCommand.validateAndRun (D:\angular-tour-of-heroes\node_modules\@angular\cli\models\command.js:127:9)             at async Object.runCommand (D:\angular-tour-of-heroes\node_modules\@angular\cli\models\command-runner.js:178:24)             at async default_1 (D:\angular-tour-of-heroes\node_modules\@angular\cli\lib\cli\index.js:32:31) 

ng version

              Angular CLI: 8.0.3                 Node: 12.4.0                 OS: win32 x64                 Angular: 7.2.2                 ... animations, cdk, common, compiler, core, forms, http                 ... platform-browser, platform-browser-dynamic, router                 ... service-worker                  Package                           Version                 -----------------------------------------------------------                 @angular-devkit/architect         0.13.9                 @angular-devkit/build-angular     0.13.9                 @angular-devkit/build-optimizer   0.13.9                 @angular-devkit/build-webpack     0.13.9                 @angular-devkit/core              8.0.3                 @angular-devkit/schematics        8.0.3                 @angular/cli                      8.0.3                 @angular/compiler-cli             7.2.15                 @angular/language-service         7.2.15                 @angular/material                 7.3.7                 @angular/pwa                      0.800.3                 @ngtools/webpack                  7.3.9                 @schematics/angular               8.0.3                 @schematics/update                0.13.9                 rxjs                              6.3.3                 typescript                        3.2.4                 webpack                           4.29.0 

Package Json

                            {                       "name": "angular-tour-of-heroes",                       "version": "0.0.0",                       "license": "MIT",                       "private": true,                       "dependencies": {                         "@angular/animations": "7.2.2",                         "@angular/cdk": "~7.2.2",                         "@angular/common": "7.2.2",                         "@angular/compiler": "7.2.2",                         "@angular/core": "7.2.2",                         "@angular/forms": "7.2.2",                         "@angular/http": "7.2.2",                         "@angular/material": "^7.2.2",                         "@angular/platform-browser": "7.2.2",                         "@angular/platform-browser-dynamic": "7.2.2",                         "@angular/pwa": "^0.800.3",                         "@angular/router": "7.2.2",                         "@angular/service-worker": "7.2.2",                         "angular-datatables": "^7.0.0",                         "angular-in-memory-web-api": "0.8.0",                         "angular2-datatable": "^0.6.0",                         "bootstrap": "^4.3.1",                         "core-js": "2.6.3",                         "datatables.net": "^1.10.19",                         "datatables.net-buttons": "^1.5.6",                         "datatables.net-buttons-dt": "^1.5.6",                         "datatables.net-dt": "^1.10.19",                         "hammerjs": "^2.0.8",                         "jasmine-core": "3.3.0",                         "jasmine-marbles": "0.4.1",                         "jquery": "^3.4.1",                         "jszip": "^3.2.1",                         "ng-select2": "^1.0.8",                         "ng2-select2": "^1.0.0-beta.16",                         "ngx-bootstrap": "^3.2.0",                         "rxjs": "6.3.3",                         "rxjs-compat": "^6.3.3",                         "select2": "^4.0.6-rc.1",                         "tslib": "^1.9.0",                         "web-animations-js": "2.3.1",                         "zone.js": "0.8.29"                       },                       "scripts": {                         "ng": "ng",                         "start": "ng serve",                         "build": "ng build",                         "test": "ng test",                         "lint": "ng lint",                         "e2e": "ng e2e"                       },                       "devDependencies": {                         "@angular-devkit/build-angular": "^0.13.9",                         "@angular-devkit/core": "^8.0.3",                         "@angular/cli": "^8.0.3",                         "@angular/compiler-cli": "^7.2.7",                         "@angular/language-service": "~7.2.2",                         "@types/datatables.net": "^1.10.15",                         "@types/datatables.net-buttons": "^1.4.1",                         "@types/jasmine": "~3.3.8",                         "@types/jasminewd2": "^2.0.6",                         "@types/jquery": "^3.3.29",                         "@types/node": "~10.12.18",                         "codelyzer": "~4.5.0",                         "jasmine-spec-reporter": "~4.2.1",                         "karma": "^4.0.1",                         "karma-chrome-launcher": "~2.2.0",                         "karma-coverage-istanbul-reporter": "~2.0.1",                         "karma-jasmine": "^2.0.1",                         "karma-jasmine-html-reporter": "^1.4.0",                         "protractor": "~5.4.0",                         "ts-node": "~8.0.1",                         "tslint": "~5.12.1",                         "typescript": "~3.2.4"                       }                     } 

Solution i have tried

  remove node_module,package-lock.json   npm install --save-dev @angular-devkit/build-angular   npm install   npm update   npm install -g typescript@latest 

i tried to update

                PS D:\angular-tour-of-heroes> ng update             Using package manager: 'npm'             Collecting installed dependencies...             Found 58 dependencies.                 We analyzed your package.json, there are some packages to update:                    Name                               Version                  Command to update                  --------------------------------------------------------------------------------                   @angular/cdk                       7.2.2 -> 8.0.1           ng update @angular/cdk                   @angular/core                      7.2.15 -> 8.0.1          ng update @angular/core                   @angular/core                      7.2.2 -> 7.2.15          ng update @angular/core                   @angular/material                  7.3.7 -> 8.0.1           ng update @angular/material                   rxjs                               6.3.3 -> 6.5.2           ng update rxjs                   There might be additional packages that are outdated.                 Run "ng update --all" to try to update all at the same time.              PS D:\angular-tour-of-heroes> ng update @angular/cdk             Repository is not clean.  Please commit or stash any changes before updating.    npm cache verify 

I have tried to Update Node/Npm version

      node -v       v12.4.0       npm -v       6.9.0 

I have also followed link Could not find module "@angular-devkit/build-angular"

Angular Guide for upgrade https://update.angular.io/#7.0:8.0

 D:\angular-tour-of-heroes> ng update @angular/cli @angular/core    Repository is not clean.  Please commit or stash any changes before updating. 

After fixing git issue

        PS D:\angular-tour-of-heroes> ng update --all         Using package manager: 'npm'         Collecting installed dependencies...         Found 58 dependencies.                           Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2")                           Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.5", would install "3.5.2")                           Package "angular2-datatable" has an incompatible peer dependency to "@angular/common" (requires "^2.0.0" (extended), would install "8.0.1").                           Package "@angular/http" has an incompatible peer dependency to "@angular/core" (requires "7.2.15", would install "8.0.1")                           Package "angular2-datatable" has an incompatible peer dependency to "@angular/core" (requires "^2.0.0" (extended), would install "8.0.1").                           Package "angular2-datatable" has an incompatible peer dependency to "@angular/platform-browser" (requires "^2.0.0" (extended), would install "8.0.1").                           Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2").                           Package "angular2-datatable" has an incompatible peer dependency to "rxjs" (requires "^5.0.0-beta.12", would install "6.5.2").         Incompatible peer dependencies found. See above 

After trying all solution still cannot run ng serve in cli.

any help is most welcome

Answer 1

Solution

After upgrading to Angular 8

problem may occur

      ng update --all     Using package manager: 'npm'     Collecting installed dependencies...     Found 58 dependencies.                       Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2")                       Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.5", would install "3.5.2")                       Package "angular2-datatable" has an incompatible peer dependency to "@angular/common" (requires "^2.0.0" (extended), would install "8.0.1").                       Package "@angular/http" has an incompatible peer dependency to "@angular/core" (requires "7.2.15", would install "8.0.1")                       Package "angular2-datatable" has an incompatible peer dependency to "@angular/core" (requires "^2.0.0" (extended), would install "8.0.1").                       Package "angular2-datatable" has an incompatible peer dependency to "@angular/platform-browser" (requires "^2.0.0" (extended), would install "8.0.1").                       Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2").                       Package "angular2-datatable" has an incompatible peer dependency to "rxjs" (requires "^5.0.0-beta.12", would install "6.5.2").     Incompatible peer dependencies found. See above 

Solution for these error

ng update --all --force

Then error

   ERROR in The Angular Compiler requires TypeScript >=3.4.0 and <3.5.0 but 3.5.2 was found instead. 

npm install typescript@">=3.4.0 <3.5.0" --save-dev --save-exact

        Just to be sure run the following steps:          npm uninstall -g @angular/cli         npm cache verify         npm install -g @angular/cli@latest         Then in your Local project package:          rm -rf node_modules dist          npm install --save-dev @angular/cli@latest         npm i          ng update @angular/cli          ng update @angular/core 

will fix the issue