Cannot find module '@ngtools/webpack' after upgrading to latest cli

[estradamarkie]

@angular/cli: 1.3.0-beta.0
node: 6.9.2
os: win32 x64
@angular/common: 2.1.2
@angular/compiler: 2.1.2
@angular/core: 2.1.2
@angular/forms: 2.1.2
@angular/http: 2.1.2
@angular/platform-browser: 2.1.2
@angular/platform-browser-dynamic: 2.1.2
@angular/router: 3.1.2
@angular/cli: 1.3.0-beta.0

can't run the APP due to the error '@ngtools/webpack' , and I did try creating a new up and it was stuck on install tooling via npm even with --skip-npm

[matthiassommer]

I have the same issue with

• @angular/cli": "1.2.0
• Webpack 3.1.0
• Node v6.11.0

Same problem with 1.1.3. I downgraded to 1.1.0 and it worked again.

[BuriakPavel]

Try add the "@ngtools/webpack" : "^1.5.1" to your package.json at "devDependencies" list and than run npm install

[softmonkeyjapan]

@BuriakPavel thanks! It happen right after ng eject when trying to run:

npm run build -e=staging -t=prod --aot

this solved the issue for me:

npm install --save-dev @ngtools/webpack

[BuriakPavel]

@softmonkeyjapan yes, you are right! In my case this issue happen after ng eject too and fixed by installing @ngtools/webpack

[MikhaelGerbet]

same issues 1.2.3 -> 1.2.6 !

[fr0]

Adding @ngtools/webpack to your project's devDependencies is not a good solution, because that leads to issue #7233.

[echo-sean]

I have the same issue with an ejected app.
It happens every time I upgrade to a newer version of either angular/cli or webpack.

Error: Cannot find module '@ngtools/webpack'

@angular/cli: 1.4.3
webpack: 3.6.0
node: v8.1.2
yarn 1.0.1

[osbornk]

I am getting this issue as well with "ng eject --prod" only.

If my @angular/cli is either 1.2.6 or 1.2.7, running "ng eject --prod" and then "npm run build" will run fine. But as soon as I change @angular/cli to 1.3.0, 1.4.9, 1.5.0 I get this same error.

If I do "ng eject" and then "npm run build" it seems to work fine. And it is rather inconsistent. I seem to get errors around various other modules (e.g. license-webpack-plugin).

[REPTILEHAUS]

Im hitting this issue too

[nodemon] 1.11.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: app/**/*.ts
[nodemon] starting `ts-node server.ts`
Error: Cannot find module '@ngtools/webpack'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Applications/project-name/node_modules/src/plugin.ts:1:1)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Applications/project-name/node_modules/index.ts:1:1)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)

package.json

{
  "name": "project-name",
  "version": "0.1.3",
  "description": "angular 5, feathers, mongoDB",
  "scripts": {
    "rimraf": "rimraf",
    "tslint": "tslint",
    "webpack": "webpack",
    "webpack-dev-server": "webpack-dev-server",
    "clean": "yarn cache clean && yarn run rimraf -- node_modules dist dll compiled",
    "clean:dist": "yarn run rimraf -- dist",
    "clean:dll": "yarn run rimraf -- dll",
    "clean:aot": "yarn run rimraf -- aot",
    "start": "yarn run start:hmr",
    "start:hmr": "NODE_ENV=development HMR=true nodemon --watch 'app/**/*.ts'  --exec 'ts-node' server.ts",
    "start:prod": "NODE_ENV=production node ./dist/server/server.bundle.js",
    "build": "yarn run build:client:dev",
    "build:server": "yarn run build:server:prod",
    "prebuild:client:dev": "yarn run clean:dist",
    "prebuild:client:prod": "yarn run clean:dist",
    "prebuild:client:aot:prod": "yarn run clean:dist && yarn run clean:aot",
    "build:client:dev": "webpack --config ./client/config/webpack.dev.ts --progress --profile",
    "build:client:prod": "webpack --config ./client/config/webpack.prod.ts --progress --profile --bail",
    "build:client:aot:prod": "webpack --config ./client/config/webpack.prod.ts  --progress --profile --bail",
    "build:server:prod": "webpack --config ./app/webpack/webpack.server.common.ts --progress --profile --bail",
    "lint": "yarn run tslint \"client/**/*.ts\""
  },
  "author": "Paddy <paddy@reptile.haus>",
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "^5.0.1",
    "@angular/cdk": "^5.0.0-rc0",
    "@angular/common": "5.0.1",
    "@angular/compiler": "5.0.1",
    "@angular/core": "5.0.1",
    "@angular/flex-layout": "2.0.0-rc.1",
    "@angular/forms": "5.0.1",
    "@angular/http": "5.0.1",
    "@angular/material": "^5.0.0-rc0",
    "@angular/platform-browser": "5.0.1",
    "@angular/platform-browser-dynamic": "5.0.1",
    "@angular/platform-server": "5.0.1",
    "@angular/router": "5.0.1",
    "@angularclass/form-validators": "^1.0.12",
    "@ngrx/core": "^1.2.0",
    "@ngrx/store": "^4.1.1",
    "ag-grid": "^14.1.1",
    "ag-grid-angular": "14.1.0",
    "angular-router-loader": "^0.6.0",
    "body-parser": "^1.18.2",
    "bunyan": "^1.8.12",
    "chalk": "^2.3.0",
    "compression": "^1.7.1",
    "core-js": "^2.5.1",
    "cors": "^2.8.4",
    "feathers": "~2.2.3",
    "feathers-authentication": "~1.3.1",
    "feathers-authentication-client": "~0.3.3",
    "feathers-authentication-jwt": "~0.3.2",
    "feathers-authentication-local": "~0.4.4",
    "feathers-configuration": "~0.4.2",
    "feathers-errors": "^2.9.2",
    "feathers-hooks": "^2.1.2",
    "feathers-mongoose": "^5.1.2",
    "feathers-permissions": "0.1.1",
    "feathers-rest": "^1.8.1",
    "feathers-socketio": "^2.0.1",
    "hammerjs": "^2.0.8",
    "mongoose": "^4.13.1",
    "rxjs": "~5.5.2",
    "zone.js": "~0.8.18"
  },
  "devDependencies": {
    "@angular/compiler-cli": "5.0.1",
    "@angularclass/hmr": "2.1.3",
    "@angularclass/hmr-loader": "3.0.4",
    "@ngrx/store-devtools": "4.1.1",
    "@ngrx/store-log-monitor": "3.0.2",
    "@types/body-parser": "^1.16.8",
    "@types/bunyan": "^1.8.3",
    "@types/compression": "^0.0.35",
    "@types/core-js": "^0.9.43",
    "@types/cors": "2.8.3",
    "@types/mongoose": "^4.7.26",
    "@types/node": "^8.0.51",
    "add-asset-html-webpack-plugin": "^2.1.2",
    "angular2-template-loader": "^0.6.2",
    "assets-webpack-plugin": "^3.5.1",
    "awesome-typescript-loader": "~3.3.0",
    "codelyzer": "~4.0.1",
    "copy-webpack-plugin": "^4.2.0",
    "css-loader": "^0.28.7",
    "exports-loader": "^0.6.4",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "~3.0.2",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "json-loader": "^0.5.7",
    "ng-router-loader": "^2.1.0",
    "ngc-webpack": "4.0.2",
    "node-sass": "^4.6.0",
    "nodemon": "^1.12.1",
    "optimize-js-plugin": "0.0.4",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.2",
    "sass-loader": "^6.0.6",
    "script-ext-html-webpack-plugin": "^1.8.8",
    "style-loader": "^0.19.0",
    "to-string-loader": "^1.1.5",
    "ts-node": "^3.3.0",
    "tslib": "^1.8.0",
    "tslint": "~5.8.0",
    "tslint-loader": "^3.5.3",
    "typescript": "^2.6.1",
    "url-loader": "^0.6.2",
    "webpack": "3.8.1",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-dev-server": "2.9.4",
    "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
    "webpack-hot-middleware": "2.20.0",
    "webpack-merge": "~4.1.1"
  }
}

[rivamadan]

I had this problem but I was able to fix it by doing:

npm uninstall -g @angular/cli
npm uninstall --save-dev @angular/cli 

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

https://stackoverflow.com/questions/45409582/error-aotplugin-was-detected-but-it-was-an-instance-of-the-wrong-class