Menu
Been getting this error when running 'ng build' on my Angular 12.0.2 project
./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: The 'compilation' argument must be an instance of Compilation
at getCompilationHooks (D:\Dev\Git_Merc\mercury\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:125:10)
at D:\Dev\Git_Merc\mercury\node_modules\webpack\lib\javascript\CommonJsChunkFormatPlugin.js:43:19
at Hook.eval [as call] (eval at create (D:\Dev\Git_Merc\mercury\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (D:\Dev\Git_Merc\mercury\node_modules\tapable\lib\Hook.js:14:14)
at Compiler.newCompilation (D:\Dev\Git_Merc\mercury\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1030:30)
at D:\Dev\Git_Merc\mercury\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1073:29
at Hook.eval [as callAsync] (eval at create (D:\Dev\Git_Merc\mercury\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\Dev\Git_Merc\mercury\node_modules\tapable\lib\Hook.js:18:14)
at Compiler.compile (D:\Dev\Git_Merc\mercury\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1068:28)
at Compiler.runAsChild (D:\Dev\Git_Merc\mercury\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:520:8)
I've been googling around but can't find anything that solves my issue. I'm not sure what's triggering this.
Versions:
Angular CLI: 12.0.2
Node: 14.17.0
Package Manager: npm 7.14.0
OS: win32 x64
Angular: 12.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1200.2
@angular-devkit/build-angular 12.0.2
@angular-devkit/build-optimizer 0.1200.2
@angular-devkit/core 12.0.2
@angular-devkit/schematics 12.0.2
@angular/cli 12.0.2
@schematics/angular 12.0.2
ng-packagr 12.0.2
rxjs 7.1.0
typescript 4.2.4
webpack 5.38.0
The command I'm running is ng build.
My angular.json is as follows:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"Agent-Angular": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/Agent-Angular",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/web.config"
],
"styles": [
"src/styles.scss",
"node_modules/@mercury/merc-pattern-lib/styles.scss"
],
"scripts": [
"node_modules/popper.js/dist/umd/popper.min.js"
],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"local": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.local.ts"
}
]
},
"nonprod": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.nonprod.ts"
}
]
},
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "Agent-Angular:build"
},
"configurations": {
"local": {
"browserTarget": "Agent-Angular:build:local"
},
"nonprod": {
"browserTarget": "Agent-Angular:build:nonprod"
},
"production": {
"browserTarget": "Agent-Angular:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "Agent-Angular:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets",
"src/web.config"
],
"styles": [
"src/styles.scss"
],
"scripts": [
"node_modules/popper.js/dist/umd/popper.min.js"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "Agent-Angular:serve"
},
"configurations": {
"production": {
"devServerTarget": "Agent-Angular:serve:production"
}
}
}
}
},
"cee-ctilib": {
"projectType": "library",
"root": "projects/cee-ctilib",
"sourceRoot": "projects/cee-ctilib/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"tsConfig": "projects/cee-ctilib/tsconfig.lib.json",
"project": "projects/cee-ctilib/ng-package.json"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/cee-ctilib/src/test.ts",
"tsConfig": "projects/cee-ctilib/tsconfig.spec.json",
"karmaConfig": "projects/cee-ctilib/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/cee-ctilib/tsconfig.lib.json",
"projects/cee-ctilib/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"entities": {
"projectType": "library",
"root": "projects/entities",
"sourceRoot": "projects/entities/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"tsConfig": "projects/entities/tsconfig.lib.json",
"project": "projects/entities/ng-package.json"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/entities/src/test.ts",
"tsConfig": "projects/entities/tsconfig.spec.json",
"karmaConfig": "projects/entities/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/entities/tsconfig.lib.json",
"projects/entities/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "Agent-Angular",
"cli": {
"analytics": false,
"defaultCollection": "@ngrx/schematics"
}
}
{
"name": "agent-angular",
"version": "0.0.0",
"description": "Mercury Chat Application",
"scripts": {
"ng": "ng",
"format:src": "prettier --config ./prettier.config.js --ignore-path ./.prettierignore --write \"src/**/*.\"{ts,js,json,scss,less,css}",
"format:projects": "prettier --config ./prettier.config.js --ignore-path ./.prettierignore --write \"projects/**/*.\"{ts,js,json,scss,less,css}",
"format:e2e": "prettier --config ./prettier.config.js --ignore-path ./.prettierignore --write \"e2e/**/*.\"{ts,js,json,scss,less,css}",
"format:root": "prettier --config ./prettier.config.js --ignore-path ./.prettierignore --write \"*.\"{ts,js,json,scss,less,css}",
"format:all": "npm run format:src && npm run format:projects && npm run format:e2e && npm run format:root",
"lint": "ng lint",
"e2e": "ng e2e",
"start": "npm run && ng serve --prod",
"build": "npm run && ng build --prod --base-href=./",
"build:dev": "npm run && ng build",
"unit:test": "ng test",
"unit:test:main": "ng test Agent-Angular --code-coverage",
"unit:test:entities": "ng test entities --code-coverage",
"unit:test:cee-ctilib": "ng test cee-ctilib --code-coverage",
"unit:test:debug": "ng test --browsers Chrome --watch true",
"unit:test:entities:debug": "ng test entities --browsers Chrome --watch true",
"start:local": "ng serve -c local --host local.mercury.comcast.net --port 443 --ssl --ssl-key ./cert/local.mercury.comcast.net.key --ssl-cert ./cert/local.mercury.comcast.net.crt",
"start:dev": "ng serve -c dev --host dev.mercury.comcast.net --port 443 --ssl --ssl-key ./cert/localhost.key --ssl-cert ./cert/localhost.crt",
"build:cti": "ng-packagr -p ./projects/cee-ctilib/ng-package.json && cd ./dist && npm pack ./cee-ctilib",
"build:header": "ng-packagr -p ./projects/header/ng-package.json && cd ./dist && npm pack ./header",
"build:convo-header": "ng-packagr -p ./projects/convo-header/ng-package.json && cd ./dist && npm pack ./convo-header",
"build:convo-details": "ng-packagr -p ./projects/convo-details/ng-package.json && cd ./dist && npm pack ./convo-details",
"build:convo-list": "ng-packagr -p ./projects/convo-list/ng-package.json && cd ./dist && npm pack ./convo-list",
"build:convo-window": "ng-packagr -p ./projects/convo-window/ng-package.json && cd ./dist && npm pack ./convo-window",
"build:agent-settings": "ng-packagr -p ./projects/agent-settings/ng-package.json && cd ./dist && npm pack ./agent-settings",
"build:entities": "ng-packagr -p ./projects/entities/ng-package.json && cd ./dist && npm pack ./entities",
"build:all-libraries": "npm run build:cti && npm run build:header && npm run build:convo-header && npm run build:convo-details && npm run build:convo-list && npm run build:convo-window && npm run build:agent-settings && npm run build:entities",
"refreshNpmrc": "vsts-npm-auth -config .npmrc",
"prepareForPr": "ng lint --fix && ng build --prod && ng test"
},
"private": false,
"dependencies": {
"@angular/animations": "12.0.1",
"@angular/common": "12.0.1",
"@angular/compiler": "12.0.1",
"@angular/core": "12.0.1",
"@angular/forms": "12.0.1",
"@angular/platform-browser": "12.0.1",
"@angular/platform-browser-dynamic": "12.0.1",
"@angular/router": "12.0.1",
"@auth0/angular-jwt": "^5.0.2",
"@azure/msal-angular": "^2.0.0-beta.1",
"@azure/msal-browser": "^2.12.1",
"@ctrl/ngx-emoji-mart": "^5.1.0",
"@jsier/retrier": "^1.2.4",
"@mercury/merc-ng-core": "^5.1.0",
"@mercury/merc-pattern-lib": "^2.11.0",
"@microsoft/applicationinsights-web": "^2.5.11",
"@microsoft/signalr": "^5.0.6",
"@ngrx/effects": "^12.0.0",
"@ngrx/entity": "^12.0.0",
"@ngrx/store": "^12.0.0",
"angular-oauth2-oidc": "^10.0.3",
"dayjs": "^1.10.4",
"guid-typescript": "^1.0.9",
"ngx-quill": "^13.2.0",
"npm": "^6.14.11",
"popper": "^1.0.1",
"popper.js": "1.16.0",
"quill": "^1.3.7",
"quill-placeholder-module": "^0.3.1",
"rxjs": "^7.0.1",
"ts-retry": "^2.3.1",
"tslib": "^2.2.0",
"vsts-npm-auth": "^0.41.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^12.0.0",
"@angular-devkit/build-optimizer": "^0.1200.0",
"@angular/cli": "^12.0.1",
"@angular/compiler-cli": "12.0.1",
"@angular/language-service": "12.0.1",
"@ngrx/schematics": "^12.0.0",
"@ngrx/store-devtools": "^12.0.0",
"@types/deep-freeze": "^0.1.2",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "2.0.8",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"deep-freeze": "^0.0.1",
"jasmine-core": "~3.7.1",
"jasmine-json-test-reporter": "1.0.0-beta",
"jasmine-marbles": "0.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "^6.3.2",
"karma-chrome-launcher": "^3.1.0",
"karma-cli": "^2.0.0",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-htmlfile-reporter": "^0.3.8",
"karma-jasmine": "^4.0.1",
"karma-jasmine-html-reporter": "^1.6.0",
"karma-json-reporter": "^1.2.1",
"karma-typescript-es6-transform": "^5.5.1",
"karma-webpack": "^5.0.0",
"mockdate": "^3.0.5",
"ng-packagr": "^12.0.0",
"prettier": "1.18.2",
"protractor": "~7.0.0",
"protractor-jasmine2-html-reporter": "0.0.7",
"rxjs-marbles": "^7.0.0",
"ts-node": "8.4.1",
"tslint": "^6.1.3",
"typescript": "4.2.4",
"webpack": "^5.37.1"
},
"author": "Mercury Team",
"license": ""
}
907
We figured it out. As you can see in our packages.json, we have a dependency on webpack. It seems angular-devkit/build-angular does as well. We believe this created the known issue of multiple webpacks colliding and causing issues. Removing our dependency on webpack fixed the issue.
162
Yep, the issue is related to the 2 different webpack libs. To resolve that add in to your package.json the next block:
"resolutions": {
"webpack": "5.41.1"
},
In my case it was wrong path.
I ran the command from git Bash with wrong camelCase letters.
like: c://Dev/Product
instead of: c://dev/Product
Fixed the path and it works.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
