Angular-cli: Ng build fails after upgrading from 1.7.4

[devarg]

Versions

Angular CLI: 6.0.0
Node: 8.11.1
OS: win32 x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0 (cli-only)
@angular-devkit/schematics        0.6.0 (cli-only)
@schematics/angular               0.6.0 (cli-only)
@schematics/update                0.6.0
rxjs                              6.0.0
typescript                        2.7.2
webpack                           4.7.0

Repro steps

Simple steps to reproduce this bug.
Please include: commands run, packages added, related code changes.

ng update @angular/cli

Observed behavior

After upgrading I got two issues
1st : Webpack is not being installed when running npm install
appears warning

npm WARN [email protected] requires a peer of webpack@^4.4.0 but none is installed. You must install peer dependencies yourself.

And when executing ng build the following error appears

ng build
Cannot find module 'webpack'
Error: Cannot find module 'webpack'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\dev\ClientApp\node_modules\mini-css-extract-plugin\dist\index.js:15:16)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\dev\ClientApp\node_modules\mini-css-extract-plugin\dist\cjs.js:3:18)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)

2nd: After fixing 1st issue prod builds are failing

Cannot find module '@angular-devkit/build-optimizer' from 'C:\dev\ClientApp'
Error: Cannot find module '@angular-devkit/build-optimizer' from 'C:\dev\ClientApp'
    at Function.module.exports [as sync] (C:\dev\ClientApp\node_modules\resolve\lib\sync.js:40:15)
    at Object.getCommonConfig (C:\dev\ClientApp\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\common.js:134:36)
    at BrowserBuilder.buildWebpackConfig (C:\dev\ClientApp\node_modules\@angular-devkit\build-angular\src\browser\index.js:115:31)
    at Observable.rxjs_1.Observable.obs [as _subscribe] (C:\dev\ClientApp\node_modules\@angular-devkit\build-angular\src\browser\index.js:35:38)
    at Observable.subscribe (C:\dev\ClientApp\node_modules\rxjs\internal\Observable.js:162:69)
    at C:\dev\ClientApp\node_modules\rxjs\internal\util\subscribeTo.js:22:31
    at Object.subscribeToResult (C:\dev\ClientApp\node_modules\rxjs\internal\util\subscribeToResult.js:7:45)
    at MergeMapSubscriber._innerSub (C:\dev\ClientApp\node_modules\rxjs\internal\operators\mergeMap.js:132:38)
    at MergeMapSubscriber._tryNext (C:\dev\ClientApp\node_modules\rxjs\internal\operators\mergeMap.js:129:14)
    at MergeMapSubscriber._next (C:\dev\ClientApp\node_modules\rxjs\internal\operators\mergeMap.js:112:18)
    at MergeMapSubscriber.Subscriber.next (C:\dev\ClientApp\node_modules\rxjs\internal\Subscriber.js:103:18)
    at TapSubscriber._next (C:\dev\ClientApp\node_modules\rxjs\internal\operators\tap.js:109:26)
    at TapSubscriber.Subscriber.next (C:\dev\ClientApp\node_modules\rxjs\internal\Subscriber.js:103:18)
    at MergeMapSubscriber.notifyNext (C:\dev\ClientApp\node_modules\rxjs\internal\operators\mergeMap.js:141:26)
    at InnerSubscriber._next (C:\dev\ClientApp\node_modules\rxjs\internal\InnerSubscriber.js:30:21)
    at InnerSubscriber.Subscriber.next (C:\dev\ClientApp\node_modules\rxjs\internal\Subscriber.js:103:18)

To fix missing webpack import (shouldn't be this way to let cli define its own webpack version)

 npm i webpack --save-dev 

To fix production builds (shouldn't be this way to let cli define its own webpack version)

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

And everything works smoothly.

Desired behavior

After upgrading a project from 5.x to 6.x to keep installing webpack as it used to be

Mention any other details that might be useful (optional)

My package json is

{
  "name": "Client",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "6.0.0",
    "@angular/common": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/core": "6.0.0",
    "@angular/forms": "6.0.0",
    "@angular/platform-browser": "6.0.0",
    "@angular/platform-browser-dynamic": "6.0.0",
    "@angular/router": "6.0.0",
    "argob-poncho": "^0.3.4",
    "bootstrap": "^4.0.0",
    "card": "^2.4.0",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "moment": "^2.22.1",
    "ngx-card": "^0.2.4",
    "popper.js": "^1.14.3",
    "rxjs": "6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "~6.0.0",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/language-service": "^6.0.0",
    "@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",
    "typescript": "~2.7.2"
  }
}

When you build ng new app this libraries install both of build-optimizer and webpack even though they are not explicited in package.json what I assume is the correct behavior.

[clydin]

Can you provide the original package.json before the upgrade?

[devarg]

Sure @clydin

{
  "name": "Client",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.9",
    "@angular/common": "^5.2.9",
    "@angular/compiler": "^5.2.9",
    "@angular/core": "^5.2.9",
    "@angular/forms": "^5.2.9",
    "@angular/platform-browser": "^5.2.9",
    "@angular/platform-browser-dynamic": "^5.2.9",
    "@angular/router": "^5.2.9",
    "argob-poncho": "^0.3.4",
    "bootstrap": "^4.0.0",
    "card": "^2.4.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "moment": "^2.22.1",
    "ngx-card": "^0.2.4",
    "popper.js": "^1.14.3",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.7.4",
    "@angular/compiler-cli": "^5.2.9",
    "@angular/language-service": "^5.2.9",
    "@types/jasmine": "^2.8.6",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

Thanks!

[devarg]

Got it solved by deleting package-lock.json and re-running npm install and re-building , but as cli migration doesn't do this, clean 5.x->6.x the output is not a building app.
Therefore if this is not currently part of the recommended steps for migration I simply suggest adding this in the checklist letting know users this practice is necessary.

Thanks

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}