Angular-cli: Issue: Cannot read property 'thisCompilation' of undefined

[ruisebastiao]

Versions

Angular CLI: 1.7.1
Node: 8.9.4
OS: linux x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.3
@angular/cli: 1.7.1
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material: 5.0.3
@angular-devkit/build-optimizer: 0.0.32
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 4.0.1

Observed behavior

** NG Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
  0% compilingCannot read property 'thisCompilation' of undefined
TypeError: Cannot read property 'thisCompilation' of undefined
    at NodeTemplatePlugin.apply (/home/rui/projects/blackbox-2m-web/node_modules/webpack/lib/node/NodeTemplatePlugin.js:19:18)
    at Compiler.apply (/home/rui/projects/blackbox-2m-web/node_modules/tapable/lib/Tapable.js:375:16)
    at Object.compileTemplate (/home/rui/projects/blackbox-2m-web/node_modules/html-webpack-plugin/lib/compiler.js:48:17)
    at Compiler.<anonymous> (/home/rui/projects/blackbox-2m-web/node_modules/html-webpack-plugin/index.js:47:40)
    at Compiler.applyPluginsParallel (/home/rui/projects/blackbox-2m-web/node_modules/tapable/lib/Tapable.js:293:14)
    at applyPluginsAsync.err (/home/rui/projects/blackbox-2m-web/node_modules/@angular/cli/node_modules/webpack/lib/Compiler.js:499:9)
    at Compiler.applyPluginsAsyncSeries (/home/rui/projects/blackbox-2m-web/node_modules/tapable/lib/Tapable.js:195:46)
    at Compiler.compile (/home/rui/projects/blackbox-2m-web/node_modules/@angular/cli/node_modules/webpack/lib/Compiler.js:492:8)
    at compiler.applyPluginsAsync.err (/home/rui/projects/blackbox-2m-web/node_modules/@angular/cli/node_modules/webpack/lib/Compiler.js:83:18)
    at next (/home/rui/projects/blackbox-2m-web/node_modules/tapable/lib/Tapable.js:202:11)
    at Compiler.compilerInvalid (/home/rui/projects/blackbox-2m-web/node_modules/webpack-dev-middleware/lib/Shared.js:161:5)
    at next (/home/rui/projects/blackbox-2m-web/node_modules/tapable/lib/Tapable.js:204:14)
    at Compiler.compiler.plugin (/home/rui/projects/blackbox-2m-web/node_modules/@angular/cli/node_modules/webpack/lib/CachePlugin.js:48:5)
    at next (/home/rui/projects/blackbox-2m-web/node_modules/tapable/lib/Tapable.js:204:14)
    at Compiler.compiler.plugin (/home/rui/projects/blackbox-2m-web/node_modules/@angular/cli/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:462:13)
    at Compiler.applyPluginsAsyncSeries (/home/rui/projects/blackbox-2m-web/node_modules/tapable/lib/Tapable.js:206:13)

Desired behavior

Mention any other details that might be useful (optional)

Reverting webpack to 3.11.0 solves this issue

[HackPoint]

Same here...

[codebandz]

Whats the solution to the problem?

[filipesilva]

Thanks for reporting this issue. However, this issue is a duplicate of an existing issue https://github.com/angular/angular-cli/issues/9793. Please subscribe to that issue for future updates.

[ademidun]

Here is the answer from issues #9793 :

npm remove webpack
npm install [email protected]

[aelbarbary]

thanks @ademidun ... that works for me

[LucasViniciusPereira]

I had the same problem, I solved unistall webpack and unistall @ angular / cli -g and local and I installed only @ angular / cli because in the new version @ angular / cli no direct reliance of webpack.

I use @angular/cli version 1.7.3

[vseeberger]

thanks @ademidun ... that works for me too!

[ashkaushik]

thanks @ademidun .. it works

[switch120]

For anyone else that comes across this ... just updating to Angular CLI 1.7.4 fixed this issue for me. I already had 3.11.0 installed for Webpack, but was using CLI 1.6.8 and getting this error on a fresh pull of the app (with no node_modules folder yet).

npm remove @angular/cli
npm install @angular/cli (as of writing, v1.7.4)

HTH!

[brgrz]

Updating to 1.7.4 did not solve this for me, I still see get the Cannot read property 'thisCompilation' of undefined when running ng build.

This is the output of ng version:

Angular CLI: 1.7.4
Node: 9.2.0
OS: win32 x64
Angular: 5.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 4.6.0

[ashkaushik]

@brgrz

Please use below command
npm remove webpack
npm install [email protected]

[brgrz]

@ashkaushik yeah, I know, but I want to use the new version of webpack, however I did just saw this issue saying it has to be updated inside the CLI itself https://github.com/angular/angular-cli/issues/9793

[clydin]

The CLI internally manages the build system and versions thereof. Webpack 4.x is a major version change which contains a multitude of breaking changes. 6.x of the CLI provides full support for the new version and is currently in RC.

[Klaudia-Brysiewicz]

Removing node_modules
try with "webpack": "^3.6.0",
and npm install