Dependency & Build Issues After Reinstalling node_modules (Angular + ASP.NET Zero 11.2.1) #12640 | Support Center

csona created 6 months ago

Hi Team,

I am working on an ASP.NET Zero 11.2.1 project using .NET Core + Angular (v13).

Environment Details:

ASP.NET Zero Version: 11.2.1 Angular Version: 13.x Node Version: v24.14.0 Package Managers Used: Yarn & npm

Issue Description: When I delete the node_modules folder and reinstall dependencies, I encounter inconsistent and intermittent errors. Sometimes errors occur during yarn install, while in other cases yarn install succeeds but npm start fails. The errors are mostly related to TypeScript compilation, incompatibility of @types packages (like lodash and node), dependency version conflicts.

Observed Behavior: The project works fine when existing node_modules is not deleted. However, after a fresh install, different errors appear each time, indicating possible dependency version drift or incompatibility.

What I Suspect: There may be a mismatch between TypeScript version, @types/* packages, and Angular version. Also, using both Yarn and npm might be causing inconsistent dependency resolution. Additionally, Node version v24 might not be fully compatible with this setup.

Request: Could you please help with:

Identifying the exact root cause of these dependency issues Recommending the supported Node version for ASP.NET Zero 11.2.1 (Angular setup) Suggesting compatible versions of TypeScript and @types packages Advising whether to use only npm or Yarn for dependency management Any required changes in package.json to stabilize the setup

I am attaching my current package.json for your reference.

{
  "name": "abp-zero-template",
  "version": "11.2.1",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "publish": "gulp build && ng build --configuration production",
    "publish-k8s": "gulp build && ng build --configuration k8s --verbose",
    "start": "ng serve --host 0.0.0.0 --port 4200",
    "hmr": "gulp buildDev && ng serve --host 0.0.0.0 --port 4200 --hmr",
    "test": "gulp buildDev && ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "gulp buildDev && protractor",
    "create-dynamic-bundles": "gulp buildDev",
    "nswag": "cd nswag/ && refresh.bat"
  },
  "private": false,
  "dependencies": {
    "@angular/animations": "^13.1.0",
    "@angular/cdk": "^12.2.7",
    "@angular/common": "^13.1.0",
    "@angular/compiler": "^13.1.0",
    "@angular/core": "^13.1.0",
    "@angular/forms": "^13.1.0",
    "@angular/platform-browser": "^13.1.0",
    "@angular/platform-browser-dynamic": "^13.1.0",
    "@angular/platform-server": "^13.1.0",
    "@angular/router": "^13.1.0",
    "@fullcalendar/core": "^5.9.0",
    "@microsoft/signalr": "^6.0.1",
    "@popperjs/core": "^2.10.2",
    "@swimlane/ngx-charts": "^19.2.0",
    "abp-ng2-module": "^6.4.0",
    "abp-web-resources": "^5.4.0",
    "adal-angular": "^1.0.17",
    "angular-gridster2": "^12.1.0",
    "angular-oauth2-oidc": "^12.1.0",
    "angular2-counto": "^1.2.5",
    "angular2-text-mask": "^9.0.0",
    "animate.css": "^4.1.0",
    "chart.js": "^3.5.1",
    "cookieconsent": "^3.1.1",
    "core-js": "^3.18.1",
    "devextreme": "23.2",
    "devextreme-angular": "23.2",
    "devextreme-aspnet-data-nojquery": "^2.6.1",
    "devextreme-schematics": "^1.1.13",
    "exceljs": "^4.4.0",
    "famfamfam-flags": "^1.0.0",
    "file-saver": "^2.0.5",
    "html2canvas": "^1.0.0-rc.7",
    "js-cookie": "^3.0.1",
    "jspdf": "^1.5.3",
    "just-compare": "^1.4.0",
    "localforage": "^1.10.0",
    "lodash-es": "^4.17.21",
    "luxon": "^2.0.2",
    "moment": "^2.29.4",
    "msal": "^1.4.13",
    "ng2-file-upload": "^1.4.0",
    "ngx-bootstrap": "^8.0.0",
    "ngx-captcha": "^10.0.0",
    "ngx-chips": "^2.2.2",
    "ngx-clipboard": "^14.0.1",
    "ngx-file-drop": "^9.0.1",
    "ngx-image-cropper": "^4.0.1",
    "ngx-perfect-scrollbar": "^10.1.1",
    "ngx-spinner": "^12.0.0",
    "object-path": "^0.11.8",
    "primeicons": "^4.1.0",
    "primeng": "^13.0.1",
    "push.js": "^1.0.12",
    "quill": "^1.3.7",
    "rtl-detect": "^1.0.4",
    "rxjs": "^6.6.7",
    "simple-line-icons": "^2.4.1",
    "sweetalert2": "^11.1.7",
    "text-mask-addons": "^3.8.0",
    "tslib": "^2.3.1",
    "webdriver-manager": "^12.1.8",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.1.1",
    "@angular/cli": "^13.1.1",
    "@angular/compiler-cli": "^13.1.0",
    "@angularclass/hmr": "^3.0.0",
    "@angularclass/hmr-loader": "^3.0.4",
    "@types/jasmine": "~3.9.1",
    "@types/jasminewd2": "^2.0.10",
    "@types/lodash-es": "^4.17.5",
    "@types/luxon": "^2.0.4",
    "@types/node": "^16.10.1",
    "codelyzer": "^6.0.2",
    "globby": "^11.0.4",
    "gulp": "^4.0.1",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-less": "^5.0.0",
    "gulp-postcss": "^9.0.1",
    "gulp-uglify": "^3.0.2",
    "jasmine-core": "~3.9.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "merge-stream": "^2.0.0",
    "nswag": "^13.13.2",
    "postcss-url": "^10.1.3",
    "prettier": "2.4.1",
    "protractor": "~7.0.0",
    "ts-node": "~10.2.1",
    "tslint": "~6.1.0",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "4.5.4"
  }
}

Thanks in advance for your support.

3 Answer(s)

0
oguzhanagir created 6 months ago
Support Team
Hi @csona

The behavior you’re experiencing is expected given the current setup. There are multiple incompatibilities in your environment that lead to non deterministic installs.

Root causes:

Unsupported Node version ASP.NET Zero 11.2.1 (Angular 13) is not compatible with Node v24. Angular 13 officially supports Node 14 / 16 (recommended: 16.x LTS).

Mixed package managers (npm + yarn) Using both causes different lockfile resolutions (package-lock.json vs yarn.lock), which leads to inconsistent dependency trees.

Loose dependency versions (^) Your package.json allows version drift (especially for @types/*), which explains why each fresh install produces different TypeScript errors.

Recommended fixes:

Downgrade Node Use: Node 16.x (LTS)

(Node 18 may work, but 16 is safest for Angular 13)

Use a single package manager (optional) Choose one:

Prefer npm

Remove yarn.lock if using npm

Clean install properly

rm -rf node_modules package-lock.json npm cache clean --force npm install

Lock critical versions Avoid ^ for sensitive packages:

typescript (already fixed at 4.5.4)

@types/node - keep aligned with Node 16 (e.g. 16.x)

@types/lodash-es - ensure compatibility with TS 4.5

Optional stabilization Add:

npm install --save-exact

to prevent future drift.

Once Node is downgraded and dependency resolution is stabilized, the issue should disappear.

After trying these steps, if the problem persists on your end, please don't hesitate to contact us. We would be happy to help.

Best regards.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

csona created 6 months ago

Hi, I did all above steps as you mentioned but then I get errors like below when I hit npm install command.

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: @angular/[email protected] npm ERR! node_modules/@angular/common npm ERR! @angular/common@"^13.1.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @angular/common@"^12.2.8" from [email protected] npm ERR! node_modules/abp-ng2-module npm ERR! abp-ng2-module@"^6.4.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

But, I tried npm install --legacy-peer-deps, then it installs successfully and even application run successfully with npm start command.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0
oguzhanagir created 6 months ago
Support Team
Hi @csona

Glad to hear --legacy-peer-deps worked! To make npm install work directly without needing to pass the flag every time, you can add a .npmrc file to the root of your Angular project with the following content:

legacy-peer-deps=true

After adding this file, a plain npm install will work without any extra flags. This also ensures consistent behavior across all developer machines and CI/CD pipelines.

The root cause is that [email protected] declares a peer dependency on @angular/common@^12.x, but your project uses Angular 13. npm v7+ enforces peer dependencies strictly by default, which triggers the conflict error. The .npmrc setting restores the legacy resolution behavior permanently.

Hope this helps!

Best regards.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)

Have an answer to this question? Log in and write your answer.