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.

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?

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

Please check your email for sample code.

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.

Has anyone looked into this? Its urgent

Please help

I just upgraded ABP & VOLO packages to 9.3.2 and Angular to 20.2.1 from 8.0.4. Appliation suddenly started giving injection content error.

Stack Trace

(index):54 GET http://localhost:4200/assets/logo/actis-logo.png 404 (Not Found) root_effect_scheduler.mjs:3597 ERROR RuntimeError: NG0203: The _ContentProjectionService token injection failed. inject() function must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext. Find more at https://angular.dev/errors/NG0203 at injectInjectorOnly (core.mjs:1110:15) at ɵɵinject (core.mjs:1131:42) at inject2 (core.mjs:1217:12) at new _ToasterService (abp-ng.theme.shared.mjs:1991:37) at Object.ToasterService_Factory [as factory] (abp-ng.theme.shared.mjs:2061:14) at root_effect_scheduler.mjs:2154:47 at runInInjectorProfilerContext (root_effect_scheduler.mjs:720:9) at R3Injector.hydrate (root_effect_scheduler.mjs:2152:21) at R3Injector.get (root_effect_scheduler.mjs:2007:33) at R3Injector.retrieve (root_effect_scheduler.mjs:1903:25) handleError @ root_effect_scheduler.mjs:3597 (anonymous) @ debug_node.mjs:30625 invoke @ zone.js:398 run @ zone.js:113 runOutsideAngular @ debug_node.mjs:16576 (anonymous) @ debug_node.mjs:30617 (anonymous) @ core.mjs:1023 invoke @ zone.js:398 run @ zone.js:113 runOutsideAngular @ debug_node.mjs:16576 _callAndReportToErrorHandler @ core.mjs:1023 (anonymous) @ core.mjs:945 invoke @ zone.js:398 onInvoke @ debug_node.mjs:16685 invoke @ zone.js:397 run @ zone.js:113 run @ debug_node.mjs:16531 bootstrap @ core.mjs:904 bootstrapModuleFactory @ core.mjs:1073 (anonymous) @ core.mjs:1098 invoke @ zone.js:398 run @ zone.js:113 (anonymous) @ zone.js:2537 invokeTask @ zone.js:431 runTask @ zone.js:161 drainMicroTaskQueue @ zone.js:612 Promise.then nativeScheduleMicroTask @ zone.js:588 scheduleMicroTask @ zone.js:599 scheduleTask @ zone.js:420 scheduleTask @ zone.js:207 scheduleMicroTask @ zone.js:227 scheduleResolveOrReject @ zone.js:2527 then @ zone.js:2732 bootstrapModule @ core.mjs:1098 (anonymous) @ main.ts:12 main.ts:13 RuntimeError: NG0203: The _ContentProjectionService token injection failed. inject() function must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext. Find more at https://angular.dev/errors/NG0203 at injectInjectorOnly (core.mjs:1110:15) at ɵɵinject (core.mjs:1131:42) at inject2 (core.mjs:1217:12) at new _ToasterService (abp-ng.theme.shared.mjs:1991:37) at Object.ToasterService_Factory [as factory] (abp-ng.theme.shared.mjs:2061:14) at root_effect_scheduler.mjs:2154:47 at runInInjectorProfilerContext (root_effect_scheduler.mjs:720:9) at R3Injector.hydrate (root_effect_scheduler.mjs:2152:21) at R3Injector.get (root_effect_scheduler.mjs:2007:33) at R3Injector.retrieve (root_effect_scheduler.mjs:1903:25) (anonymous) @ main.ts:13 invoke @ zone.js:398 run @ zone.js:113 (anonymous) @ zone.js:2537 invokeTask @ zone.js:431 runTask @ zone.js:161 drainMicroTaskQueue @ zone.js:612 Promise.then nativeScheduleMicroTask @ zone.js:588 scheduleMicroTask @ zone.js:599 scheduleTask @ zone.js:420 scheduleTask @ zone.js:207 scheduleMicroTask @ zone.js:227 scheduleResolveOrReject @ zone.js:2527 then @ zone.js:2732 bootstrapModule @ core.mjs:1098 (anonymous) @ main.ts:12 root_effect_scheduler.mjs:3597 ERROR RuntimeError: NG0203: The _ConfirmationService token injection failed. inject() function must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext. Find more at https://angular.dev/errors/NG0203 at injectInjectorOnly (core.mjs:1110:15) at ɵɵinject (core.mjs:1131:42) at inject2 (core.mjs:1217:12) at Object.useFactory (abp-ng.theme.shared.mjs:4676:21) at Object.factory (root_effect_scheduler.mjs:2257:38) at root_effect_scheduler.mjs:2154:47 at runInInjectorProfilerContext (root_effect_scheduler.mjs:720:9) at R3Injector.hydrate (root_effect_scheduler.mjs:2152:21) at R3Injector.get (root_effect_scheduler.mjs:2007:33) at abp-ng.core.mjs:1126:42 handleError @ root_effect_scheduler.mjs:3597 (anonymous) @ debug_node.mjs:30625 invoke @ zone.js:398 run @ zone.js:113 runOutsideAngular @ debug_node.mjs:16576 (anonymous) @ debug_node.mjs:30617 ConsumerObserver2.next @ Subscriber.js:96 Subscriber2._next @ Subscriber.js:63 Subscriber2.next @ Subscriber.js:34 (anonymous) @ Subject.js:41 errorContext @ errorContext.js:19 Subject2.next @ Subject.js:31 emit @ debug_node.mjs:16219 (anonymous) @ debug_node.mjs:16722 invoke @ zone.js:398 run @ zone.js:113 runOutsideAngular @ debug_node.mjs:16576 onHandleError @ debug_node.mjs:16722 handleError @ zone.js:402 runGuarded @ zone.js:126 api.microtaskDrainDone @ zone.js:2324 drainMicroTaskQueue @ zone.js:619 Promise.then nativeScheduleMicroTask @ zone.js:588 scheduleMicroTask @ zone.js:599 scheduleTask @ zone.js:420 scheduleTask @ zone.js:207 scheduleMicroTask @ zone.js:227 scheduleResolveOrReject @ zone.js:2527 then @ zone.js:2732 bootstrapModule @ core.mjs:1098 (anonymous) @ main.ts:12 favicon.ico:1 GET http://localhost:4200/favicon.ico 404 (Not Found)

Screenshot

Steps to produce

1. Upgrade from 8.x.x to 9.x.x

Package.json (Current)

{ "name": "Base", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@abp/ng.components": "~9.3.2", "@abp/ng.core": "~9.3.2", "@abp/ng.oauth": "~9.3.2", "@abp/ng.setting-management": "~9.3.2", "@abp/ng.theme.basic": "~9.3.2", "@abp/ng.theme.shared": "~9.3.2", "@angular/animations": "~20.2.1", "@angular/cdk": "^20.2.0", "@angular/common": "~20.2.1", "@angular/compiler": "~20.2.1", "@angular/core": "~20.2.1", "@angular/forms": "~20.2.1", "@angular/localize": "~20.2.1", "@angular/material": "^20.2.0", "@angular/platform-browser": "~20.2.1", "@angular/platform-browser-dynamic": "~20.2.1", "@angular/router": "~20.2.1", "@swimlane/ngx-datatable": "^22.0.0", "@ngrx/effects": "^20.0.0", "@ngrx/store": "^20.0.0", "@ngrx/store-devtools": "^20.0.0", "@ngx-translate/core": "^16.0.4", "@ngx-translate/http-loader": "^16.0.1", "@volo/abp.commercial.ng.ui": "~9.3.2", "@volo/abp.ng.account": "~9.3.2", "@volo/abp.ng.audit-logging": "~9.3.2", "@volo/abp.ng.gdpr": "~9.3.2", "@volo/abp.ng.identity": "~9.3.2", "@volo/abp.ng.language-management": "~9.3.2", "@volo/abp.ng.openiddictpro": "~9.3.2", "@volo/abp.ng.saas": "~9.3.2", "@volo/abp.ng.text-template-management": "~9.3.2", "chart.js": "^4.4.1", "crypto-js": "^4.2.0", "ng2-charts": "^5.0.4", "ngx-cookie-service": "^20.0.1", "rxjs": "~7.8.0", "tslib": "^2.0.0", "zone.js": "~0.15.1" }, "devDependencies": { "@abp/ng.schematics": "~9.3.2", "@angular/build": "^20.2.0", "@angular/cli": "~20.2.0", "@angular/compiler-cli": "~20.2.1", "@tailwindcss/postcss": "^4.1.12", "@angular/language-service": "~20.2.1", "@types/crypto-js": "^4.2.2", "@types/jasmine": "~3.6.0", "@types/node": "^12.0.0", "autoprefixer": "^10.4.17", "jasmine-core": "~5.1.0", "karma": "~6.4.4", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.1.0", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.0.0", "postcss": "^8.5.6", "tailwindcss": "^4.1.12", "typescript": "~5.9.2" } }