15 Answer(s)

• 

  0

  AI-Bot created 6 days ago

  Support Team ABP Agent

  • After upgrading to ABP 9.3.x and Angular 20.x, you must follow the official migration guides to resolve breaking changes, especially for Angular DI and ABP UI packages.
  • The error you are seeing (NG0203: inject() function must be called from an injection context) is a known Angular 16+ breaking change, and ABP 9.3.x has adapted to Angular 20, but you must ensure all your ABP, VOLO, and Angular packages are on compatible versions and that your code and imports follow the new requirements.

  Required steps:

  1. Make sure all @abp/, @volo/, and @angular/* packages are on the exact same major/minor version (e.g., 9.3.2 for ABP/VOLO, 20.2.1 for Angular).
  2. Update your Node.js to at least v20.19.0 (required by Angular 20).
  3. Clean your workspace:
     • Delete node_modules and package-lock.json/yarn.lock.
     • Run a fresh install: npm install or yarn install.
  4. Review and update your code according to the migration guides:
     • Some deprecated APIs (like DOCUMENT token) are no longer globally available; update your imports as needed.
     • If you have custom providers, services, or use inject() outside of constructors/factories, refactor them to comply with Angular 16+ DI rules.

  Migration guides:

  • ABP 9.3 Migration Guide (Angular 20):
    https://abp.io/docs/latest/release-info/migration-guides/abp-9-3
  • Angular UI v3 Migration Guide (for reference on module structure and best practices):
    https://abp.io/docs/latest/framework/ui/angular/migration-guide-v3

  These guides provide step-by-step instructions and highlight breaking changes you must address.

  Summary:

  • Ensure all dependencies are aligned and up-to-date.
  • Refactor any custom code that uses inject() outside of supported contexts.
  • Follow the official migration guides for both ABP and Angular.

  Sources:

  • https://abp.io/docs/latest/release-info/migration-guides/abp-9-3
  • 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
• 

  0

  dev4ng created 6 days ago

  Please help

  Save Cancel
• 

  0

  dev4ng created 6 days ago

  Has anyone looked into this? Its urgent

  Save Cancel
• 

  0

  sumeyye.kurtulus created 6 days ago

  Support Team Angular Expert

  Hello, I will be checking and getting back to you now. Thank you for your cooperation.

  Save Cancel

  1
• 

  0

  sumeyye.kurtulus created 6 days ago

  Support Team Angular Expert

  I have checked the versions you provided. First of all, you need to use the angular version 20.0.x for ABP version 9.3.x.

  Also, I am assuming that you have been using the latest angular build system application builder. Could you also provide your angular.json?

  I also would like to inform that you can follow these documentations while updating https://abp.io/docs/latest/release-info/release-notes#9-3-2025-06-17 https://abp.io/docs/latest/release-info/migration-guides

  Save Cancel
• 

  0

  dev4ng created 6 days ago

  Angular.json

  { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "actis-base-template": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular/build:application", "options": { "outputPath": "dist/actis-base-template", "index": "src/index.html", "browser": "src/main.ts", "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "**/*", "input": "public" } ], "styles": [ { "input": "node_modules/@swimlane/ngx-datatable/index.css", "inject": true, "bundleName": "ngx-datatable-index" }, { "input": "node_modules/@swimlane/ngx-datatable/assets/icons.css", "inject": true, "bundleName": "ngx-datatable-icons" }, { "input": "node_modules/@swimlane/ngx-datatable/themes/material.css", "inject": true, "bundleName": "ngx-datatable-material" }, { "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css", "inject": true, "bundleName": "fontawesome-all.min" }, { "input": "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css", "inject": true, "bundleName": "fontawesome-v4-shims.min" }, { "input": "node_modules/ng-zorro-antd/tree/style/index.min.css", "inject": false, "bundleName": "ng-zorro-antd-tree" }, "src/scss/fonts.scss", "src/scss/material.scss", "src/scss/tailwind.scss", "src/styles.scss" ], "scripts": [], "allowedCommonJsDependencies": ["qrcode", "crypto-js"] }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "budgets": [ { "type": "initial", "maximumWarning": "3mb", "maximumError": "5mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "outputHashing": "all" }, "uat": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.uat.ts" } ], "budgets": [ { "type": "initial", "maximumWarning": "3mb", "maximumError": "5mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "outputHashing": "all" }, "development": { "optimization": false, "extractLicenses": false, "sourceMap": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular/build:dev-server", "configurations": { "production": { "buildTarget": "actis-base-template:build:production" }, "development": { "buildTarget": "actis-base-template:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular/build:extract-i18n", "options": { "buildTarget": "actis-base-template:build" } }, "test": { "builder": "@angular/build:karma", "options": { "polyfills": ["zone.js", "zone.js/testing"], "tsConfig": "tsconfig.spec.json", "inlineStyleLanguage": "scss", "assets": ["src/favicon.ico", "src/assets"], "styles": ["src/scss/styles.scss"], "scripts": [] } } } } }, "schematics": { "@schematics/angular:component": { "type": "component" }, "@schematics/angular:directive": { "type": "directive" }, "@schematics/angular:service": { "type": "service" }, "@schematics/angular:guard": { "typeSeparator": "." }, "@schematics/angular:interceptor": { "typeSeparator": "." }, "@schematics/angular:module": { "typeSeparator": "." }, "@schematics/angular:pipe": { "typeSeparator": "." }, "@schematics/angular:resolver": { "typeSeparator": "." } } }

  Upgrades are aligned with Migration guide.

  Save Cancel
• 

  0

  sumeyye.kurtulus created 6 days ago

  Support Team Angular Expert

  Thank you for providing extra details. However, I do not replicate the same problem on my side. Could you try downgrading the angular version to 20.0.x then use the 5.8.x version for the typescript version? If you need further assistance, you can also send a minimal example to this address: sumeyye.kurtulus@volosoft.com. Thank you again for your cooperation.

  Save Cancel
• 

  0

  dev4ng created 6 days ago

  I adjusted the versions as you mentioned above but same thing still.

  Please check your email for sample code.

  Save Cancel
• 

  0

  sumeyye.kurtulus created 6 days ago

  Support Team Angular Expert

  Thank you for sharing a sample. Could you also try these instead for the application config

  provideAbpCore(withOptions({
        environment: environment.abpConf,
        registerLocaleFn: registerLocale(),
      })),
      provideAbpOAuth(),
      // CoreModule.forRoot({
      //   environment: environment.abpConf,
      //   registerLocaleFn: registerLocale(),
      // }).providers!,
      // AbpOAuthModule.forRoot().providers!,
  

  We will provide full support for this builder in the next version. Please note that Angular may be incompatible with the latest updates in comparison to our packages.

  At the same time, we will review related packages that could potentially cause issues in upcoming patch releases, without waiting for the next major version. You can follow the progress here: https://github.com/abpframework/abp/releases

  Save Cancel
• 

  0

  dev4ng created 6 days ago

  Switched to app.config.ts (below) same result.

  `import { ApplicationConfig, isDevMode } from '@angular/core'; import { provideRouter } from '@angular/router';

  import { provideAbpCore, withOptions } from '@abp/ng.core'; import { HttpClient, provideHttpClient } from '@angular/common/http'; import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field'; import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { provideEffects } from '@ngrx/effects'; import { provideStore } from '@ngrx/store'; import { provideStoreDevtools } from '@ngrx/store-devtools'; import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { environment } from '../environments/environment'; import { routes } from './app.routes'; import { SidebarEffects } from './core/store/sidebar/sidebar.effects'; import { sidebarReducer } from './core/store/sidebar/sidebar.reducer'; import { topbarReducer } from './core/store/topbar/topbar.reducer'; // import { registerLocale } from '@abp/ng.core/locale'; import { provideAbpOAuth } from '@abp/ng.oauth'; import { provideAbpThemeShared } from '@abp/ng.theme.shared'; import { provideCommercialUiConfig } from '@volo/abp.commercial.ng.ui/config'; import { provideAccountPublicConfig } from '@volo/abp.ng.account/public/config'; import { provideAuditLoggingConfig } from '@volo/abp.ng.audit-logging/config'; import { provideIdentityConfig } from '@volo/abp.ng.identity/config'; import { provideLanguageManagementConfig } from '@volo/abp.ng.language-management/config'; import { registerLocale } from '@volo/abp.ng.language-management/locale'; import { provideOpeniddictproConfig } from '@volo/abp.ng.openiddictpro/config'; import { provideSaasConfig } from '@volo/abp.ng.saas/config'; import { provideTextTemplateManagementConfig } from '@volo/abp.ng.text-template-management/config';

  export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); }

  /**

  • Ngrx reducers */ const reducers = { sidebar: sidebarReducer, topbar: topbarReducer, };

  export const appConfig: ApplicationConfig = { providers: [ // ABP

  provideAbpCore(withOptions({
      environment: environment.abpConf,
      registerLocaleFn: registerLocale(),
  })),
  provideAbpOAuth(),
  provideAbpThemeShared(),
  provideAccountPublicConfig(),
  provideIdentityConfig(),
  provideLanguageManagementConfig(),
  provideAuditLoggingConfig(),
  provideSaasConfig(),
  provideOpeniddictproConfig(),
  provideTextTemplateManagementConfig(),
  provideCommercialUiConfig(),
  
  // Angular
  provideRouter(routes),
  provideAnimationsAsync(),
  provideHttpClient(),
  
  // NgRx
  provideStore(reducers),
  provideEffects(SidebarEffects),
  provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() }),
  
  // Others
  TranslateModule.forRoot({
    defaultLanguage: 'en',
    loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient],
    },
  }).providers!,
  
  // Configs
  { provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: { duration: 2500 } },
  {
    provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
    useValue: { appearance: 'outline' },
  },
  

  ], }; `

  Can you provide me a sample which is working on Angular 20?

  Save Cancel
• 

  0

  sumeyye.kurtulus created 5 days ago

  Support Team Angular Expert

  We will be adding full support for this builder in the next version. Please keep in mind that Angular may have compatibility issues with the latest updates compared to our packages.

  In the meantime, we are also reviewing related packages that could introduce problems in upcoming patch releases, so fixes may be applied before the next major version. You can track our progress here: https://github.com/abpframework/abp/issues/23608 https://github.com/abpframework/abp/releases

  Save Cancel
• 

  0

  dev4ng created 5 days ago

  I tried create a new app using ABP cli with angular, still angular app doesn't works.

  Can you share a working angular 20 code? Old builder will also work for me.

  Save Cancel
• 

  0

  sumeyye.kurtulus created 5 days ago

  Support Team Angular Expert

  Could you please specify the cli version you use for creating the project?

  Save Cancel
• 

  0

  dev4ng created 4 days ago

  

  Save Cancel
• 

  0

  sumeyye.kurtulus created 4 days ago

  Support Team Angular Expert

  Hello again, thank you for providing extra details.

  I have tried with the old cli as you have also did and encountered the problems you mentioned. We will be fixing them for the next cli release. Hence, we recommend you to use the new studio cli https://abp.io/docs/latest/studio since it provides more stable features compared to the old one.

  If you want to solve the problems manually you will need to make these configurations, or I can send you a sample as well.

  // app.config.ts
  // ...
  
  import { provideThemeLeptonX } from '@volosoft/abp.ng.theme.lepton-x';
  import { provideSideMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts';
  
  providers: [
  	// remove this part
  	// importProvidersFrom([
  	//	ThemeLeptonxModule.forRoot(),
  	//	SideMenuLayoutModule.forRoot()
  	//])
  	
  	// use this intead
  	  provideThemeLeptonX(),
      provideSideMenuLayout(),
  
  ]
  

  // tsconfig.json
  // ...
   "paths": {
        "@angular/*": ["node_modules/@angular/*"],
        "@abp/*": ["node_modules/@abp/*"],
        "@volo/*": ["node_modules/@volo/*"],
        "@volosoft/*": ["node_modules/@volosoft/*"],
        "@swimlane/*": ["node_modules/@swimlane/*"],
        "@ngx-validate/core": ["node_modules/@ngx-validate/core"],
        "@ng-bootstrap/ng-bootstrap": ["node_modules/@ng-bootstrap/ng-bootstrap"]
   },
  

  On the contrary, if you still prefer using the application builder instead, you can remove the relative paths in tsconfig.json as a temporary workaround until we fix the problems.

  You will also need to replace registerLocale with registerLocaleForEsBuild function here in this case.

  // app.config.ts
  provideAbpCore(
        withOptions({
          environment,
          registerLocaleFn: registerLocaleForEsBuild(),
        })
  ),
  

  Save Cancel