I’m working on an Angular project and encountered multiple issues when trying to run the application using ng serve. The build fails with the following errors:
./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Maximum call stack size exceeded
./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Maximum call stack size exceeded
Error: Can't resolve './node_modules/angular-archwizard/styles/archwizard.css' in '/home/seifou/projects/monitor-dz/monitorDZ-FRONT'
Here’s what I’ve tried so far:
- Checked for circular dependencies in my AppModule and other modules but didn’t find any obvious issues.
- Cleared node_modules and reinstalled dependencies using npm install.
- Updated my angular.json to ensure all styles are properly included.
Relevant details:
- Angular version: 16.2.0
- Node version: 18.19.1
package.json
{
"name": "vien-angular",
"version": "1.1.1",
"engines": {
"node": ">=14.20.0",
"npm": ">=6.0.0"
},
"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ng build --output-path Vien-angular --aot --configuration production"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.2.0",
"@angular/cdk": "^16.2.0",
"@angular/cli": "^16.2.0",
"@angular/common": "^16.2.0",
"@angular/compiler": "^16.2.0",
"@angular/compiler-cli": "^16.2.0",
"@angular/core": "^16.2.0",
"@angular/forms": "^16.2.0",
"@angular/platform-browser": "^16.2.0",
"@angular/platform-browser-dynamic": "^16.2.0",
"@angular/router": "^16.2.0",
"@ckeditor/ckeditor5-angular": "^3.0.0",
"@ckeditor/ckeditor5-build-classic": "^36.0.1",
"@glidejs/glide": "^3.4.1",
"@ng-select/ng-select": "^11.1.0",
"@ngx-translate/core": "^14.0.0",
"@perfectmemory/ngx-contextmenu": "^16.0.2",
"@swimlane/ngx-datatable": "^20.1.0",
"angular-archwizard": "^6.1.0",
"angular-calendar": "^0.28.22",
"angular-svg-round-progressbar": "^11.0.0",
"angular2-hotkeys": "^13.4.0",
"angular2-notifications": "^16.0.1",
"chart.js": "^4.3.0",
"ckeditor4-angular": "^5.0.0",
"date-fns": "^2.30.0",
"express": "^4.18.0",
"file-saver": "^2.0.2",
"firebase": "^11.0.2",
"html-to-pdfmake": "^2.1.0",
"html2canvas": "^1.3.2",
"jspdf": "^2.5.1",
"moment": "^2.30.1",
"ng2-nouislider": "^1.8.2",
"ngx-bootstrap": "^11.0.2",
"ngx-dropzone-wrapper": "^16.0.0",
"ngx-ellipsis": "^4.1.3",
"ngx-lightbox": "^2.2.0",
"ngx-quill": "^23.0.0",
"nouislider": "^15.8.1",
"openai": "^4.4.0",
"path": "^0.12.7",
"pdfmake": "^0.2.15",
"quill": "^1.3.7",
"rxjs": "^7.8.1",
"sortablejs": "^1.15.0",
"tslib": "^2.0.0",
"video.js": "^8.19.1",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.2.0",
"@angular/language-service": "^16.2.0",
"@types/jasmine": "^4.3.1",
"@types/jasminewd2": "~2.0.10",
"@types/node": "^16.11.7",
"jasmine-core": "^4.6.0",
"jasmine-spec-reporter": "^7.0.0",
"karma": "^6.4.0",
"karma-chrome-launcher": "^3.2.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "^5.1.0",
"karma-jasmine-html-reporter": "^2.1.0",
"protractor": "^7.0.0",
"resolve-url-loader": "^5.0.0",
"sass": "^1.81.0",
"sass-loader": "^12.4.0",
"ts-node": "^10.9.2",
"tslint": "~6.1.3",
"webpack-cli": "^5.1.4",
"webpack-merge": "^5.8.0"
}
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"Vien-Angular": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"stylePreprocessorOptions": {
"includePaths": ["src/assets/css/sass"]
},
"outputPath": "dist/",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"styles": [
"src/assets/css/vendor/bootstrap.min.css",
"src/assets/css/vendor/bootstrap.rtl.only.min.css",
"./node_modules/@glidejs/glide/dist/css/glide.core.min.css",
"./node_modules/quill/dist/quill.snow.css",
"./node_modules/quill/dist/quill.bubble.css",
"./node_modules/@ng-select/ng-select/themes/default.theme.css",
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"./node_modules/angular-archwizard/archwizard.css",
"./node_modules/angular-calendar/css/angular-calendar.css",
"./node_modules/ngx-lightbox/lightbox.css",
"./node_modules/video.js/dist/video-js.min.css",
"src/assets/css/sass/themes/vien.light.blueyale.scss",
"src/assets/css/sass/themes/vien.light.bluenavy.scss",
"src/assets/css/sass/themes/vien.light.blueolympic.scss",
"src/assets/css/sass/themes/vien.dark.blueyale.scss",
"src/assets/css/sass/themes/vien.dark.bluenavy.scss",
"src/assets/css/sass/themes/vien.dark.blueolympic.scss",
"./node_modules/nouislider/dist/nouislider.min.css"
],
"scripts": [],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": {
"scripts": true,
"styles": true,
"vendor": false
},
"optimization": false,
"namedChunks": true,
"allowedCommonJsDependencies": [
"firebase",
"@firebase/app",
"@firebase/database",
"@firebase/firestore",
"@firebase/functions",
"@firebase/performance",
"@firebase/remote-config",
"@firebase/component",
"@videojs/xhr",
"global/document",
"global/window",
"keycode",
"mux.js/lib/tools/parse-sidx",
"mux.js/lib/utils/clock",
"safe-json-parse/tuple",
"videojs-vtt.js",
"ngx-quill",
"ngx-lightbox",
"chart.js",
"pdfmake/build/pdfmake",
"pdfmake/build/vfs_fonts",
"file-saver",
"moment"
]
},
"configurations": {
"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": "3mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "Vien-Angular:build"
},
"configurations": {
"production": {
"browserTarget": "Vien-Angular:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "Vien-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"],
"scripts": []
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "Vien-Angular:serve"
},
"configurations": {
"production": {
"devServerTarget": "Vien-Angular:serve:production"
}
}
}
}
}
},
"cli": {
"analytics": false
}
}
Any guidance on resolving these issues would be greatly appreciated!
