0

AI-Bot created 21 days ago

Support Team ABP Agent

Do not try to keep Angular 17 with ABP 10.6. ABP v10.6 Angular UI stack is upgraded to Angular 22.0.x, so the Angular frontend must be upgraded accordingly (or you must stay on an older ABP version on the backend too). This version coupling is the main reason you see “a lot of issues” when jumping from ABP 8.3 to ABP 10.6.
Upgrade path (recommended, deterministic):
1. Create a clean ABP 10.6 Angular solution (same “Auth Server separated / tiered” option) and use it as the reference for:
  - package.json versions (Angular + @abp/* + @volo/*)
  - Angular builder configuration (ABP templates have moved to the new Angular build system in ABP v10)
  - app.config.ts / routing / provider setup
2. In your existing Angular app:
  - Update all @abp/* and @volo/* packages to 10.6.* (keep them aligned; don’t mix major versions).
  - Upgrade Angular to 22.x (align all @angular/* packages to the same minor/patch line).
  - Remove/adjust any legacy build config that conflicts with the newer Angular builder expectations (compare with the fresh 10.6 template).
3. Regenerate Angular proxies after the upgrade (ABP 10.6 includes proxy improvements and you don’t want stale generated clients).
4. If you customized LeptonX/theme packages by downloading source code into projects/*, re-apply your custom changes on top of the new 10.6 theme sources (otherwise DI tokens/components can mismatch, producing runtime errors similar to the ones seen in support tickets when package sources are out-of-sync).
Mandatory docs to follow while upgrading (in order):
1. ABP 10.0 migration guide (covers the big jump items, including Angular-related ecosystem changes):
  https://abp.io/docs/10.0/release-info/migration-guides/abp-10-0
2. ABP 10.6 migration guide (what changed from 10.5 → 10.6):
  https://abp.io/docs/10.6/release-info/migration-guides/abp-10-6
3. ABP 8.3 migration guide note about Angular alignment (useful as a baseline reminder that ABP versions couple to Angular versions):
  https://abp.io/docs/latest/release-info/migration-guides/abp-8-3
4. ABP 10.6 package version changes (use this to verify the expected Angular/package versions):
  https://abp.io/docs/10.6/package-version-changes
What Angular version should you target?
With ABP 10.6, target Angular 22.0.x (per ABP 10.6 release info). Any attempt to “stay at Angular 17” while using ABP 10.6 packages will typically fail due to peer deps and runtime incompatibilities.
If your upgrade reports include specific errors (build errors, DI token/provider issues, LeptonX issues, proxy generation issues), the fastest reliable method is still:
- align package versions to 10.6,
- compare your Angular workspace files against a fresh ABP 10.6 Angular template,
- then port your custom code incrementally.

(Your two attached markdown reports are not accessible from here via the provided links, so I can’t comment line-by-line on them. The steps above are the verified ABP version alignment requirement and the safest upgrade procedure for large jumps.)

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.

0

pradeep.pradyumna created 20 days ago

NO AI response please. Request you to go through the attached markdown files and respond

0

maliming created 20 days ago

Support Team Fullstack Developer

Hi,

NG6008 isn't an Angular 22 compiler bug. Since Angular 19 the standalone flag defaults to true, so a component declared in an NgModule now needs an explicit standalone: false. That's why all 639 of them fail at once. Editing the versions in package.json and running npm install skips the ng update migrations that would have added the flag, along with everything else five major versions changed.

So the upgrade is doable, and it's worth doing. An 8.3 Angular frontend against a 10.6 backend isn't a pairing we ship or test, the Angular packages are released together with the backend ones, so it isn't something to settle on.

Start over from your Angular 17.3 branch and repeat the same hop for Angular 18, 19, 20, 21 and 22:

Set your Angular-coupled third-party libraries to the version built for the major you're moving to, then npm install --legacy-peer-deps. ng update refuses to start while an installed library declares an incompatible peer, and @ngxs/store@3.8.2 (Angular <18) and @ng-select/ng-select@11.2.0 (Angular ^16) already stop it on the first hop. Take the number from each library's own compatibility list instead of assuming it follows the Angular major. NGXS, ng-zorro and angularx-qrcode do line up with it, ng-select doesn't: 13.9.1, 14.9.0, 20.7.0, 21.8.2, 24.0.4 for Angular 18 through 22.
Run the update with Material and the CDK in the same command:

ng update @angular/core@18.1 @angular/cli@18.1 @angular/material@18 @angular/cdk@18

Keep the ~ ranges you already have and pass major.minor for core and the CLI. That's what keeps you on the minor ABP targets instead of jumping to the newest one.

Set the @abp/* and @volo/* packages to the matching ABP version. From ABP 10.2 on you also need @angular/aria as a direct dependency, on the same version as Angular.

| Angular | ABP | |---|---| | ~18.1 | 9.0 | | ~19.1 | 9.1 | | ~20.0 | 9.3 | | ~21.0 | 10.1 | | ~22.0 | 10.6 |

Delete node_modules and the lock file, reinstall, build and run the app. Then start the next hop.

Node 23 isn't supported by any Angular version in this chain. Node 20.19+ carries you through the Angular 21 hop, then switch to Node 22.22.3+ or 24.15+ for the last one.

Go through the ABP migration guide of every version you cross, not only the last one. Two that are easy to miss in a module-based app: provideZoneChangeDetection() in AppModule.providers (10.1), and regenerating the Angular proxies with abp generate-proxy -t ng against the upgraded backend (10.6), since upload proxies changed.

https://abp.io/docs/latest/release-info/migration-guides/abp-10-6-angular-22

Three things from your report that the hops won't sort out by themselves:

The v19 and v22 migrations rewrite the decorator of every component, adding standalone: false and ChangeDetectionStrategy.Eager. The changes are mechanical and your component logic stays as it is, but if a zero .ts diff is an absolute rule then this upgrade can't be done at all.
Keep useDefineForClassFields: false in tsconfig.json. That's where the 13 TS2729 errors come from, and the TS2612 ones as well, so the declare keywords you added for those can come back out.
ABP 10.6 needs @ng-bootstrap/ng-bootstrap on ~20.0.0, which the theme package brings in. Don't pin it yourself, the 18.0.0 in your build doesn't export the ./tooltip entry point and that's where the resolve error comes from. That version is still declared against the previous Angular major, so install with --legacy-peer-deps.

Thanks

0

pradeep.pradyumna created 19 days ago

Angular 22 + ABP 10.6 + TypeScript 6.0 Upgrade Summary

Project: TASConnect Litmus Platform
Period: August 28 - September 1, 2026
PR: #3355
Branch: feature/R26.06_angular22-abp10-upgrade

Executive Summary

Successfully upgraded Angular 17.3.12 → 22.0.8 with ABP 8.3 → 10.6 and TypeScript 5.3 → 6.0 for backend .NET 10 compatibility.

Impact:

740 files modified
~738 components updated with standalone: false
50+ DTOs fixed for TypeScript 6.0
17 modules refactored for pipe/provider architecture

Status: ✅ Compilation: Success (0 errors)
⚠️ Warnings: Sass deprecations (non-blocking)
✅ Dev Server: Starts successfully
✅ Runtime: Application loads correctly

Version Changes

| Package | Before | After | |---------|--------|-------| | Angular | 17.3.12 | 22.0.8 | | TypeScript | 5.3.0 | 6.0.0 | | ABP Framework | 8.3.0 | 10.6.0 | | ng-zorro-antd | 17.4.1 | 22.0.1 | | Angular Material | 17.3.10 | 22.1.4 | | ng-bootstrap | 16.0.0 | 17.0.0 (downgraded from 18 for compatibility) |

Key Phases

Phase 1: Core Upgrade (Aug 28)

Upgraded Angular 17 → 22, TypeScript 5 → 6
Changed browserTarget → buildTarget in angular.json
Disabled strict mode temporarily for gradual migration

Phase 2: ABP Upgrade (Aug 28)

Upgraded all ABP packages to 10.6.0
Added LOGO_APP_NAME_TOKEN provider (required in ABP 10+)

Phase 3: TypeScript 6.0 Fixes (Aug 28)

Fixed TS2612 errors by adding declare keyword to 50+ DTOs

Example:

export class MyDto extends PagedDto {
  declare sorting: string;  // ← Added 'declare'
}

Phase 4: Component Architecture (Sep 1)

Added standalone: false to ~738 components
Fixed NG5002 two-way binding errors in 3 mat-select elements
Updated ngx-image-cropper usage (Module → Component)

Phase 5: Module Fixes (Aug 31 - Sep 1)

Broke circular dependency: SharedModule ⟷ CoreSharedModule
Removed DateFormatPipe from providers in 17 modules (pipes go in declarations, not providers)
Fixed AlphanumericAllowPasteDirective standalone flag

Phase 6: DatePipe Fix (Sep 1) ⭐ LATEST

Problem: Blank login page, NG0201 error: "No provider for DatePipe"
Cause: ABP's lazy-loaded AccountPublicModule needed DatePipe
Solution: Added DatePipe to global providers in app.module.ts

Breaking Changes

1. Component Standalone Declaration (HIGH)

Angular 22 defaults to standalone: true. All NgModule components need standalone: false.

@Component({
  standalone: false,  // ← Required
  selector: 'app-example',
  templateUrl: './example.component.html'
})

2. Two-Way Binding Restrictions (MEDIUM)

Complex expressions in [(value)] no longer supported.

<!-- ❌ Before -->
<mat-select [(value)]="form?.value.field">

<!-- ✅ After -->
<mat-select [formControl]="form?.controls['field']">

3. TypeScript 6.0 Property Redeclaration (HIGH)

Must use declare keyword for inherited properties.

4. Module Resolution (LOW)

Changed from node to bundler in tsconfig.json.

5. Angular.json Schema (LOW)

browserTarget renamed to buildTarget.

6. ABP Logo Configuration (MEDIUM)

Requires explicit LOGO_APP_NAME_TOKEN provider.

7. DatePipe Provider (HIGH) ⭐ NEW

Angular 22 requires DatePipe in global providers for lazy-loaded ABP modules.

Configuration Changes

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "moduleResolution": "bundler",
    "strictPropertyInitialization": false,
    "useDefineForClassFields": false
  }
}

angular.json:

{
  "serve": {
    "options": {
      "buildTarget": "litmus:build"  // Changed from browserTarget
    }
  }
}

app.module.ts:

import { DatePipe } from '@angular/common';

@NgModule({
  providers: [
    DatePipe,  // ← Angular 22 fix for lazy-loaded modules
    // ...
  ]
})

Known Issues & Workarounds

1. ABP @angular/aria/tabs Polyfill ⚠️

Issue: ABP 10.6 imports non-existent @angular/aria/tabs.
Workaround: Create polyfill in node_modules/@angular/aria/tabs/.
Action: Recreate after every npm install.
Doc: See ABP-ANGULAR-22-POLYFILL-WORKAROUND.md

2. Sass Deprecation Warnings ⚠️

Issue: Sass @import will be removed in Dart Sass 3.0.
Impact: Non-blocking warnings.
Future: Migrate to @use and @forward syntax.

3. CommonJS Dependencies ⚠️

Affected: lodash, moment, highcharts, crypto-js, uuid.
Impact: Larger bundle size, no functional issues.

4. ng-bootstrap Version Constraint ✅

Fixed: Using v17 (v18 has afterRender issues).

Testing Requirements

Critical Priority

✅ Login page (fixed with DatePipe)
⬜ User authentication flow
⬜ OAuth/OIDC
⬜ Permission-based routing

High Priority

⬜ File uploads (ABP 10.6 API changes)
⬜ Reactive forms with mat-select
⬜ NGXS state management
⬜ Lazy-loaded modules DI

Medium Priority

⬜ Dashboard/Charts (Highcharts)
⬜ Modals/Dialogs (ng-bootstrap, Material)
⬜ Data tables (ng-zorro)

Deployment Checklist

Pre-Deployment:

[ ] Integration tests pass
[ ] Browser compatibility verified
[ ] Performance acceptable
[ ] Code review complete

Build Configuration:

[ ] Set NODE_OPTIONS=--max-old-space-size=8192
[ ] Production build succeeds
[ ] Bundle sizes acceptable

ABP Polyfill:

[ ] Create node_modules/@angular/aria/tabs/ polyfill
[ ] Verify build with polyfill
[ ] Document for CI/CD

Post-Deployment:

[ ] Monitor errors (Sentry/CloudWatch)
[ ] Track authentication success rate
[ ] Watch for DI-related errors

Statistics

Code Changes:

740 files modified
~738 components updated
50+ DTOs fixed
17 modules refactored

Build Metrics:

Compilation: ~60s (was ~45s)
Node Memory: 8GB (was 4GB)
Errors: 0
Warnings: 45 (Sass deprecations)

Package Upgrades:

47 total packages upgraded
15 Angular core packages
25 ABP Framework packages
4 UI libraries
3 build tools

Key Commits

58b41a68 - Initial Angular 22 upgrade
3ede8924 - ABP 10.6 upgrade
fda8ef48 - TypeScript 6.0 DTO fixes
2ab9bcda - Complete upgrade with standalone:false
cdc6f407 - DatePipe provider fix ⭐
377892a5 - DateFormatPipe provider fix (PR review)
33b47d33 - Remove dead @HostListener code

Lessons Learned

What Worked:

Phased approach isolated issues
Temporarily disabling strict mode allowed gradual migration
Global DatePipe provider fixed lazy-loaded module DI issues

Challenges:

Angular 21 attempt failed (ABP requires 22.0.x)
TypeScript 6.0 required systematic DTO fixes
ABP @angular/aria/tabs needed workaround
ng-bootstrap v18 incompatible, downgraded to v17

Future:

Consider standalone component migration
Evaluate @angular/build (esbuild)
Monitor ABP for native Angular 22 support
Migrate Sass @import to @use/@forward

References

Documentation:

Angular 22: https://angular.dev/update-guide
TypeScript 6.0: https://devblogs.microsoft.com/typescript/announcing-typescript-6-0/
ABP 10.6: https://abp.io/docs/latest/release-info/migration-guides/abp-10-6

Internal Docs:

ABP-ANGULAR-22-POLYFILL-WORKAROUND.md
ANGULAR-22-ABP-10.6-FIX-SUMMARY.md

Contact: Pradeep.Pradyumna@tasconnect.com

Status: ✅ Complete
Last Updated: September 2, 2026

Framework

Tools

Mobile

Startup Templates

UI

Modules

More

More

More

More

Upgrade Angular frontend from 17.3.12 + ABP 8.3.0 to match the upgraded backend (.NET 10 + ABP 10.6). #10864

4 Answer(s)

Angular 22 + ABP 10.6 + TypeScript 6.0 Upgrade Summary

Executive Summary

Version Changes

Key Phases

Phase 1: Core Upgrade (Aug 28)

Phase 2: ABP Upgrade (Aug 28)

Phase 3: TypeScript 6.0 Fixes (Aug 28)

Phase 4: Component Architecture (Sep 1)

Phase 5: Module Fixes (Aug 31 - Sep 1)

Phase 6: DatePipe Fix (Sep 1) ⭐ LATEST

Breaking Changes

1. Component Standalone Declaration (HIGH)

2. Two-Way Binding Restrictions (MEDIUM)

3. TypeScript 6.0 Property Redeclaration (HIGH)

4. Module Resolution (LOW)

5. Angular.json Schema (LOW)

6. ABP Logo Configuration (MEDIUM)

7. DatePipe Provider (HIGH) ⭐ NEW

Configuration Changes

Known Issues & Workarounds

1. ABP @angular/aria/tabs Polyfill ⚠️

2. Sass Deprecation Warnings ⚠️

3. CommonJS Dependencies ⚠️

4. ng-bootstrap Version Constraint ✅

Testing Requirements

Critical Priority

High Priority

Medium Priority

Deployment Checklist

Statistics

Key Commits

Lessons Learned

References

ABP Live TrainingPackages

MasteringABP Framework

ABP Live Training
Packages

Mastering
ABP Framework