My angular project seems to suddenly fails to build on AWS Code Build. I even reverted back to a commit before I made changes to the project (these changes wouldn't have affected the packages or build commands anyway but thought I would just incase something had changed). When I build using ng build --prod on my machine it builds fine but when AWS Code Build runs during the pipeline execution it throws this error:
Error: ./src/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getResourceDependencies(...) is not a function or its return value is not iterable
at getDependencies (/codebuild/output/src145253754/src/node_modules/@ngtools/webpack/src/ivy/plugin.js:261:56)
at /codebuild/output/src145253754/src/node_modules/@ngtools/webpack/src/ivy/plugin.js:374:20
at analyzingFileEmitter (/codebuild/output/src145253754/src/node_modules/@ngtools/webpack/src/ivy/plugin.js:307:20)
at process._tickCallback (internal/process/next_tick.js:68:7)
@ multi ./src/main.ts main[0]
Error: ./src/polyfills.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getResourceDependencies(...) is not a function or its return value is not iterable
at getDependencies (/codebuild/output/src145253754/src/node_modules/@ngtools/webpack/src/ivy/plugin.js:261:56)
at /codebuild/output/src145253754/src/node_modules/@ngtools/webpack/src/ivy/plugin.js:374:20
at analyzingFileEmitter (/codebuild/output/src145253754/src/node_modules/@ngtools/webpack/src/ivy/plugin.js:307:20)
at process._tickCallback (internal/process/next_tick.js:68:7)
@ multi ./node_modules/@angular-devkit/build-angular/src/webpack/es5-polyfills.js zone.js/dist/zone-legacy ./src/polyfills.ts polyfills-es5[2]
[Container] 2021/01/23 16:26:06 Command did not exit successfully ng build --prod exit status 1
[Container] 2021/01/23 16:26:06 Phase complete: BUILD State: FAILED
[Container] 2021/01/23 16:26:06 Phase context status code: COMMAND_EXECUTION_ERROR Message: Error while executing command: ng build --prod. Reason: exit status 1
Here is the package.json file:
{
"name": "kingand-queen",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"dev": "eslint 'src/**/*.ts' && ng serve",
"build": "ng build",
"test": "ng test",
"lint": "eslint 'src/**/*.ts'",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^10.0.14",
"@angular/cdk": "^9.2.4",
"@angular/common": "^10.0.14",
"@angular/compiler": "^10.0.14",
"@angular/core": "^10.0.14",
"@angular/flex-layout": "^10.0.0-beta.32",
"@angular/forms": "^10.0.14",
"@angular/google-maps": "^10.2.7",
"@angular/localize": "^10.0.14",
"@angular/material": "^9.1.0",
"@angular/platform-browser": "^10.0.14",
"@angular/platform-browser-dynamic": "^10.0.14",
"@angular/router": "^10.0.14",
"@mdi/font": "^5.8.55",
"@ng-bootstrap/ng-bootstrap": "^6.1.0",
"@syncfusion/ej2-angular-calendars": "^18.3.48",
"@syncfusion/ej2-material-theme": "~17.2.48",
"@types/googlemaps": "3.39.14",
"aos": "^2.3.4",
"bootstrap": "^4.5.3",
"component": "^1.1.0",
"cookieconsent": "^3.1.1",
"hammerjs": "^2.0.8",
"jquery": "^3.4.1",
"moment": "^2.29.1",
"ng-gallery": "^5.0.0",
"ng-recaptcha": "^5.0.0",
"ngx-cookie-service": "^10.1.1",
"ngx-cookieconsent": "^2.2.3",
"ngx-gallery": "^5.10.0",
"ngx-lightbox": "^2.2.2",
"ngx-socket-io": "^3.2.0",
"rxjs": "~6.5.4",
"tslib": "^1.14.1",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.901.12",
"@angular-eslint/eslint-plugin": "0.0.1-alpha.32",
"@angular/cli": "^10.2.0",
"@angular/compiler-cli": "^10.0.14",
"@angular/language-service": "^10.0.14",
"@ngrx/schematics": "^9.1.0",
"@types/aos": "^3.0.3",
"@types/jasmine": "^3.5.14",
"@types/jasminewd2": "~2.0.3",
"@types/jquery": "^3.5.4",
"@types/node": "^12.19.6",
"@typescript-eslint/eslint-plugin": "^3.10.1",
"@typescript-eslint/parser": "^3.10.1",
"codelyzer": "^5.1.2",
"eslint": "^7.13.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"node-sass": "^4.14.1",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "^6.1.3",
"typescript": "^3.9.7"
}
}
Here is my tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
Here is my tsconfig.app.json:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
Finally, my buildspec.yml:
version: 0.2
phases:
install:
runtime-versions:
nodejs: 10
commands:
- echo Installing angular cli...
- npm install -g @angular/cli
- yarn add @angular-devkit/build-angular --dev
build:
commands:
- echo Build started...
- ng build --prod
artifacts:
files:
- '**/*'
base-directory: dist/KingandQueen
Now I have no idea why this is suddenly happening I have build the project about 50 times in the past with no issues up until today without knowingly performing updates that could have caused this issue. I have scoured GitHub error logs and stack overflow and couldn't find anything on this issue so any ideas on what the issues is here would be greatly appreciated.
Well after hours of scanning through GitHub, stack-overflow and all other various results from searching @ngtools/webpack/src/ivy/plugin.js I found one result of someone who may have a similar issue as me... However, this is probably a stretch because his seemed to be triggering only on his/her local machine and only upon running npm audit fix (Errors after npm audit fix angular 10.0.1). This is a very recent post, so I am assuming it must be a recent package issue or dependancy clash, most likely to do with @ngtools/webpack & @angular/compiler. However this is kind of a guess based on the logs, but upon looking into my local machine the file complained about node_modules/@ngtools/webpack/src/ivy/plugin.js did not exist yet built perfectly. So after hours or removing, updating and downgrading various packages, deleting my node_modules and rebuilding my package-lock.json file nothing seemed to work yet all the while it worked perfectly on my machine no matter what package.json changes I made. So I turned to my buildspec.yml and miraculously after trial and error resolved the build issue. Here is my working buildspec:
version: 0.2
phases:
install:
runtime-versions:
nodejs: 10
commands:
- echo Installing source NPM dependencies...
- npm install -y npm@latest
- npm install -g @angular/cli
- rm package-lock.json
pre_build:
commands:
- npm install
build:
commands:
- echo Build started...
- ng build --prod
artifacts:
files:
- '**/*'
base-directory: dist/KingandQueen
I believe, and I could easily be misguided here that for some reason a recent version of @angular/cli which was being installed upon the install stage caused the issue and hence removing the package-lock.json manually within the install stage ensured a fresh install and the npm install ensured the package-lock.json was freshly made.
I am still not entirely in the loop however, upon inspecting it has seemed to plague all my Code Pipelines with angular within my AWS account which features multiple different angular projects. Very strange indeed that it basically came out of nowhere after no kicking up a fuss for the last 6 months (50 plus builds of the project). Anyway good to get to the bottom of that one... I hope this is helpful for anyone else who may stumble into this problem.