ABP 10.x + Angular 20: dependency conflicts (ngx-datatable) causing duplicate @angular/core and TS2451 redeclare errors (CI/CD blocked) #10294

1 Answer(s)

• 

  0

  AI-Bot created yesterday

  Support Team ABP Agent

  1. Solution

  Below is a concrete, “safe” way to get rid of the duplicate-@angular/core problem and align your project with what ABP 10 expects.

  ---

  1. Which ABP Angular version supports Angular 20?

  ABP v10.0 Angular UI is designed to run on Angular 20:

  • In the ABP 10.0 RC/10.0 release, Angular templates were migrated to the new esbuild-based Angular build system, explicitly mentioning Angular 20 support.
  • So, ABP Angular 10.x (including 10.0.2) is the version line that officially targets Angular 20.

  So, for Angular 20 you should be on:

  "@abp/ng.core": "10.0.2",
  "@abp/ng.components": "10.0.2",
  "@abp/ng.theme.shared": "10.0.2",
  ...
  "@angular/*": "20.0.7"   // or ~20.0.7
  

  (versions shown as example – key point is all ABP Angular packages in the 10.x line and all @angular/* on a single 20.0.x version).

  ---

  2. Is @abp/ng.theme.shared@10.0.2 expected to work with Angular 20?

  Yes.

  • @abp/ng.theme.shared@10.0.2 belongs to the ABP 10.0 Angular UI stack, which is built for Angular 20.
  • Peer warnings from @swimlane/ngx-datatable@21.1.0 (17.x || 18.x || 19.x) are expected when you move to Angular 20 and do not, by themselves, break the build.

  So from ABP’s side, @abp/ng.theme.shared@10.0.2 + Angular 20 is a valid combination.

  ---

  3. Why are you getting TS2451 “Cannot redeclare” errors and how to fix them?

  The blocking errors you pasted:

  TS2451: Cannot redeclare block-scoped variable 'ngI18nClosureMode'.
    node_modules/angular-oauth2-oidc/node_modules/@angular/core/...d.ts
    node_modules/@angular/core/...d.ts
  
  TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
    node_modules/angular-oauth2-oidc/node_modules/@angular/core/...d.ts
    node_modules/@angular/core/...d.ts
  

  show that a second copy of @angular/core was installed under:

  node_modules/angular-oauth2-oidc/node_modules/@angular/core
  

  This is a general Node/Angular dependency resolution issue (not specific to ABP), typically caused by:

  • Version misalignment in some @angular/* packages or libraries that depend on them.
  • A lock file (yarn.lock / package-lock.json) created with older ranges, causing npm/yarn to resolve a nested @angular/core inside a dependency such as angular-oauth2-oidc.

  This is not caused directly by ngx-datatable. The peer warning from ngx-datatable is mostly cosmetic in this context; the real build break is the nested @angular/core.

  3.1. Normalize Angular & ABP versions

  Make sure all your Angular & ABP Angular packages are on a single, consistent set of versions, without any ^ ranges that could drift:

  Example (you can adapt the exact patch version to yours, like 20.0.7):

  {
    "dependencies": {
      "@angular/animations": "~20.0.7",
      "@angular/common": "~20.0.7",
      "@angular/compiler": "~20.0.7",
      "@angular/core": "~20.0.7",
      "@angular/forms": "~20.0.7",
      "@angular/localize": "~20.0.7",
      "@angular/platform-browser": "~20.0.7",
      "@angular/platform-browser-dynamic": "~20.0.7",
      "@angular/router": "~20.0.7",
  
      "@abp/ng.core": "10.0.2",
      "@abp/ng.components": "10.0.2",
      "@abp/ng.oauth": "10.0.2",
      "@abp/ng.theme.shared": "10.0.2",
      // ...other @abp/* and @volo/* at 10.0.2-compatible versions
  
      // Keep other libs, but avoid pinning their own @angular/* versions
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~20.0.x",
      "@angular/cli": "~20.0.x",
      "@angular/compiler-cli": "~20.0.x",
      "@angular/language-service": "~20.0.x",
      // ...
    }
  }
  

  Key points:

  • Use ~ for @angular/* and exact (or ~10.0.2) for ABP packages, like ABP support examples do for other Angular versions.
  • Avoid any dependency in your package.json that independently pulls in another @angular/core version.

  3.2. Clean install to remove duplicate Angular trees

  After normalizing versions:

  1. Delete node_modules
  2. Delete your lock file (yarn.lock or package-lock.json)
  3. Reinstall dependencies in a clean environment:

  # if you use yarn
     yarn install
  
     # or npm
     npm install
  

  4. Verify that you now have only one @angular/core:

  npm ls @angular/core
     # or
     yarn why @angular/core
  

  You must see only the root @angular/core@20.0.7 and no nested copy such as angular-oauth2-oidc/node_modules/@angular/core.

  If you still see a nested @angular/core under any package, that package’s peer range conflicts strongly enough that npm/yarn is installing its own copy. In that case:

  • Try updating that library to a version compatible with Angular 20 (e.g. the latest angular-oauth2-oidc).
  • If necessary, add a resolutions/overrides block (Yarn / npm v8+) to force a single Angular version:

  {
      "overrides": {
        "@angular/core": "20.0.7",
        "@angular/common": "20.0.7",
        "@angular/platform-browser": "20.0.7",
        "@angular/platform-browser-dynamic": "20.0.7"
      }
    }
  

  Then delete lockfile + node_modules and reinstall again.

  In ABP support tickets for earlier versions, very similar “dependency normalization” (pinning all @angular/*, @abp/*, @volo/* to consistent ~ ranges and reinstalling) is exactly how build/startup issues were resolved.

  ---

  4. What about @swimlane/ngx-datatable specifically?

  • @swimlane/ngx-datatable@21.1.0 is pulled in transitively by @abp/ng.theme.shared.
  • Its peer range (17.x || 18.x || 19.x) is conservative; Angular 20 is newer, so npm/yarn warns.
  • In practice:
    • This warning alone doesn’t break ABP’s Angular UI.
    • The real breakage in your logs comes from angular-oauth2-oidc (or another library) installing its own @angular/core.

  So, you do not need to replace ngx-datatable just to get Angular 20 working. Focus on ensuring there is only one @angular/core in the tree as described above.

  If you want to be very strict in CI (treating warnings as errors), you can:

  • Either relax that CI rule for peer-dependency warnings, or
  • Replace ngx-datatable usage in your own code with another grid solution and remove it from your direct dependencies. But ABP’s theme will still bring it transitively until ABP replaces it in a future version; there is no official statement yet that it has been fully removed.

  ---

  5. Recommended migration/upgrade path for ABP + Angular 20

  1. Upgrade your solution to ABP 10.0.x using:
     • abp update (CLI), or
     • ABP Studio’s “Upgrade ABP Packages” action.
  2. Let the tool update:
     • All NuGet packages to 10.0.x.
     • All NPM ABP Angular packages to 10.0.x, including Angular CLI/config files.
  3. Ensure package.json @angular/* and @abp/* versions match what a fresh ABP 10 Angular template would generate (this is the safest way to avoid hidden version drift).
  4. Delete node_modules + lock file, reinstall.
  5. Confirm:

  npm ls @angular/core
  

  shows a single 20.0.x install. 6. Re-run:

  ng build --configuration production
  

  in CI and locally.

  This aligns your project with ABP’s official Angular 20 setup and eliminates the duplicate-core TS2451 errors.

  ---

  2. Sources

  • ABP 10.0 Migration Guide (includes .NET 10 and Angular 20 template changes):
    https://abp.io/docs/10.0/release-info/migration-guides/abp-10-0

  • ABP 10.0 RC Announcement (details Angular 20 / new esbuild-based builder and SSR for Angular UI):
    https://abp.io/community/announcements/announcing-abp-10-0-release-candidate-86lrnyox

  • Angular UI Migration v2.9 → v3 (older, but shows ABP’s pattern of tightly coupling a specific Angular major to an ABP major):
    https://abp.io/docs/latest/framework/ui/angular/migration-guide-v3

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel