超出最大调用堆栈大小的错误 - 角度单温泉

Question

I am facing this issue when running npm run build (I am using single spa application), recently I have converted this angular application into single-spa and I have also upgraded the angular version to 10.2.5:

I have spent at least 3 days trying to resolve this issue, any ideas about how to resolve this issue?

Here is my package.json file

 { "name": "fmp", "version": "1.0.0", "private": true, "scripts": { "ng": "ng", "build": "npm run env -s && ng build --prod", "start": "npm run env -s && ng serve --proxy-config proxy.conf.js", "lint": "ng lint && stylelint \"src/**/*.scss\" --syntax scss && htmlhint \"src\" --config .htmlhintrc", "test": "npm run env -s && ng test", "test:ci": "npm run env -s && npm run lint -s && ng test --configuration=ci", "e2e": "npm run env -s && ng e2e", "translations:extract": "ngx-translate-extract --input ./src --output ./src/translations/template.json --format=json --clean --sort --marker extract", "docs": "hads ./docs -o", "env": "ngx-scripts env npm_package_version", "generate": "ng generate" }, "dependencies": { "@angular/animations": "~10.2.0", "@angular/cdk": "~10.2.0", "@angular/common": "~10.2.0", "@angular/compiler": "~10.2.0", "@angular/core": "~10.2.0", "@angular/elements": "~10.2.0", "@angular/flex-layout": "^8.0.0-beta.26", "@angular/forms": "~10.2.0", "@angular/material": "^8.1.3", "@angular/material-moment-adapter": "^8.2.3", "@angular/platform-browser": "~10.2.0", "@angular/platform-browser-dynamic": "~10.2.0", "@angular/router": "~10.2.0", "@fortawesome/fontawesome-free": "5.11.2", "@ng-bootstrap/ng-bootstrap": "^5.1.1", "@ngx-translate/core": "^11.0.1", "@swimlane/ngx-datatable": "16.0.2", "@webcomponents/custom-elements": "^1.2.4", "ag-grid-angular": "21.2.1", "ag-grid-community": "21.2.1", "angular-tree-component": "8.4.0", "angular2-text-mask": "9.0.0", "bootstrap": "^4.5.0", "classlist.js": "1.1.20150312", "codemirror": "5.49.0", "core-js": "^2.5.7", "enhanced-resolve": "4.1.0", "flot": "3.2.10", "ika.jvectormap": "1.0.0", "intl": "1.2.5", "jqcloud2": "2.0.3", "jquery": "3.4.1", "jquery-slimscroll": "1.3.8", "jquery-sparkline": "2.4.0", "jquery.browser": "0.1.0", "jquery.flot.tooltip": "0.9.0", "jqwidgets-ng": "^8.2.0", "lodash": "^4.17.15", "modernizr": "3.7.1", "moment": "2.24.0", "ng2-dnd": "5.0.2", "ng2-file-upload": "1.3.0", "ng2-material-dropdown": "0.10.1", "ng2-table": "1.3.2", "ng2-validation": "4.2.0", "ngx-bootstrap": "5.1.2", "ngx-infinite-scroll": "8.0.0", "ngx-select-ex": "3.7.2", "ngx-toastr": "^11.0.0", "ngx-virtual-scroller": "^3.0.3", "npm": "^6.11.3", "popper.js": "1.15.0", "rxjs": "~6.6.0", "screenfull": "5.0.0", "simple-line-icons": "2.4.1", "spinkit": "1.2.5", "summernote": "0.8.12", "sweetalert": "2.1.2", "ts-helpers": "1.1.2", "tslib": "1.10.0", "web-animations-js": "2.3.2", "zone.js": "0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1002.0", "@angular/cli": "~10.2.0", "@angular/compiler-cli": "~10.2.0", "@angular/language-service": "8.2.8", "@material/top-app-bar": "^3.2.0", "@ngneat/spectator": "^4.11.1", "@ngx-rocket/scripts": "^3.0.0", "@types/codemirror": "0.0.77", "@types/jasmine": "3.4.0", "@types/jasminewd2": "2.0.6", "@types/lodash": "4.14.139", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "hammerjs": "^2.0.8", "jasmine-core": "3.5.0", "jasmine-spec-reporter": "4.2.1", "karma": "5.0.9", "karma-chrome-launcher": "3.1.0", "karma-cli": "2.0.0", "karma-coverage-istanbul-reporter": "2.1.0", "karma-jasmine": "2.0.1", "karma-jasmine-html-reporter": "1.4.2", "karma-read-json": "1.1.0", "karma-spec-reporter": "0.0.32", "loaders.css": "0.1.2", "material-design-icons-iconfont": "^5.0.1", "ng-bullet": "^1.0.3", "prettier": "^1.14.0", "protractor": "5.4.4", "stylelint": "~9.6.0", "stylelint-config-prettier": "^4.0.0", "stylelint-config-recommended-scss": "~3.2.0", "stylelint-config-standard": "~18.2.0", "stylelint-scss": "~3.3.0", "ts-node": "8.4.1", "tslint": "5.20.0", "tslint-config-prettier": "^1.14.0", "typescript": "~4.0.2", "webdriver-manager": "12.1.7" }, "prettier": { "singleQuote": true, "overrides": [ { "files": "*.scss", "options": { "singleQuote": false } } ] } }

And the angular.json :

 { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "mfe-fmp": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "architect": { "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "outputPath": "docker/dist", "index": "src/index.html", "main": "src\\main.single-spa.ts", "tsConfig": "src/tsconfig.app.json", "polyfills": "src/polyfills.ts", "aot": true, "assets": [ "src/favicon.ico", "src/apple-touch-icon.png", "src/assets" ], "styles": [ ], "scripts": [], "customWebpackConfig": { "path": "extra-webpack.config.js", "libraryName": "mfe-fmp", "libraryTarget": "umd" } }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.dev.ts" } ], "optimization": true, "outputHashing": "none", "sourceMap": false, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true } } }, "serve": { "builder": "@angular-builders/custom-webpack:dev-server", "options": { "browserTarget": "mfe-fmp:build" }, "configurations": { "production": { "browserTarget": "mfe-fmp:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "mfe-fmp:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "karmaConfig": "src/karma.conf.js", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "scripts": [ ], "styles": [ ], "assets": [ "src/favicon.ico", "src/apple-touch-icon.png", "src/robots.txt", "src/manifest.json", "src/assets" ] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "src/tsconfig.app.json", "src/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } } } }, "e2e": { "projectType": "application", "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "mfe-fmp:serve" } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "e2e/tsconfig.e2e.json" ], "exclude": [ "**/node_modules/**" ] } } } } }, "defaultProject": "mfe-fmp" }

Thank you

Answer 1

Yep, @Drenai point is valid, was about to ask the same. Anyhow, I suggest you delete your current node_modules , npm cache clean --force , then npm ci to clean install.

If you want an interactive interface to guide you thru the process of updating your apps, this link to an interactive interface is part of Angular projects and it will help you specifing the right commands, dependencies, and versions. https://update.angular.io/