migrate: components, pipes, provider etc. to ng 19

npm/ng-packs/packages/account/config/src/providers/route.provider.ts

@@ -1,9 +1,11 @@
 import { eLayoutType, RoutesService } from '@abp/ng.core';
-import { APP_INITIALIZER } from '@angular/core';
+import { inject, provideAppInitializer } from '@angular/core';
 import { eAccountRouteNames } from '../enums/route-names';
 
 export const ACCOUNT_ROUTE_PROVIDERS = [
-  { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
+  provideAppInitializer(() => {
+    configureRoutes(inject(RoutesService));
+  }),
 ];
 
 export function configureRoutes(routes: RoutesService) {

npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.ts

@@ -17,6 +17,7 @@ const { required } = Validators;
 const PASSWORD_FIELDS = ['newPassword', 'repeatNewPassword'];
 
 @Component({
+  standalone: false,
   selector: 'abp-change-password-form',
   templateUrl: './change-password.component.html',
   exportAs: 'abpChangePasswordForm',

npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.ts

@@ -4,6 +4,7 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
 import { finalize } from 'rxjs/operators';
 
 @Component({
+  standalone: false,
   selector: 'abp-forgot-password',
   templateUrl: 'forgot-password.component.html',
 })
@@ -14,7 +15,10 @@ export class ForgotPasswordComponent {
 
   isEmailSent = false;
 
-  constructor(private fb: UntypedFormBuilder, private accountService: AccountService) {
+  constructor(
+    private fb: UntypedFormBuilder,
+    private accountService: AccountService,
+  ) {
     this.form = this.fb.group({
       email: ['', [Validators.required, Validators.email]],
     });

npm/ng-packs/packages/account/src/lib/components/login/login.component.ts

@@ -10,6 +10,7 @@ import { getRedirectUrl } from '../../utils/auth-utils';
 const { maxLength, required } = Validators;
 
 @Component({
+  standalone: false,
   selector: 'abp-login',
   templateUrl: './login.component.html',
 })

npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts

@@ -6,6 +6,7 @@ import { eAccountComponents } from '../../enums/components';
 import { ManageProfileStateService } from '../../services/manage-profile.state.service';
 
 @Component({
+  standalone: false,
   selector: 'abp-manage-profile',
   templateUrl: './manage-profile.component.html',
   animations: [trigger('fadeIn', [transition(':enter', useAnimation(fadeIn))])],

npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts

@@ -7,6 +7,7 @@ import {
 import { UntypedFormGroup } from '@angular/forms';
 
 @Component({
+  standalone: false,
   selector: 'abp-personal-settings-half-row',
   template: ` <div class="w-50 d-inline">
     <label [attr.for]="name" class="form-label">{{ displayName | abpLocalization }} </label>

npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts

@@ -15,6 +15,7 @@ import {
 import { eAccountComponents } from '../../enums';
 
 @Component({
+  standalone: false,
   selector: 'abp-personal-settings-form',
   templateUrl: './personal-settings.component.html',
   exportAs: 'abpPersonalSettingsForm',

npm/ng-packs/packages/account/src/lib/components/register/register.component.ts

@@ -11,6 +11,7 @@ import { getRedirectUrl } from '../../utils/auth-utils';
 const { maxLength, required, email } = Validators;
 
 @Component({
+  standalone: false,
   selector: 'abp-register',
   templateUrl: './register.component.html',
 })

npm/ng-packs/packages/account/src/lib/components/reset-password/reset-password.component.ts

@@ -9,6 +9,7 @@ import { finalize } from 'rxjs/operators';
 const PASSWORD_FIELDS = ['password', 'confirmPassword'];
 
 @Component({
+  standalone: false,
   selector: 'abp-reset-password',
   templateUrl: './reset-password.component.html',
 })

npm/ng-packs/packages/components/chart.js/src/chart.component.ts

@@ -16,6 +16,7 @@ import {
 let Chart: any;
 
 @Component({
+  standalone: false,
   selector: 'abp-chart',
   template: `
     <div
@@ -57,7 +58,10 @@ export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
 
   chart: any;
 
-  constructor(public el: ElementRef, private cdr: ChangeDetectorRef) {}
+  constructor(
+    public el: ElementRef,
+    private cdr: ChangeDetectorRef,
+  ) {}
 
   ngAfterViewInit() {
     import('chart.js/auto').then(module => {
@@ -101,7 +105,7 @@ export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
       type: this.type as any,
       data: this.data,
       options: this.options,
-      plugins: this.plugins
+      plugins: this.plugins,
     });
   };
 

npm/ng-packs/packages/components/extensible/ng-package.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "../../../node_modules/ng-packagr/ng-entrypoint.schema.json",
   "lib": {
     "entryFile": "src/public-api.ts"
   }

npm/ng-packs/packages/components/extensible/src/lib/components/date-time-picker/extensible-date-time-picker.component.ts

@@ -25,7 +25,6 @@ import { selfFactory } from '../../utils/factory.util';
 
 @Component({
   exportAs: 'abpExtensibleDateTimePicker',
-  standalone: true,
   imports: [
     CommonModule,
     ReactiveFormsModule,

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts

@@ -47,14 +47,12 @@ import { eExtensibleComponents } from '../../enums/components';
 import { ExtensibleDateTimePickerComponent } from '../date-time-picker/extensible-date-time-picker.component';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { ExtensibleFormPropService } from '../../services/extensible-form-prop.service';
-import { CreateInjectorPipe } from '../../pipes/create-injector.pipe';
 import { CommonModule } from '@angular/common';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'abp-extensible-form-prop',
   templateUrl: './extensible-form-prop.component.html',
-  standalone: true,
   imports: [
     ExtensibleDateTimePickerComponent,
     NgbDatepickerModule,
@@ -64,7 +62,6 @@ import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
     NgxValidateCoreModule,
     NgbTooltip,
     NgbTypeaheadModule,
-    CreateInjectorPipe,
     ShowPasswordDirective,
     PermissionDirective,
     LocalizationModule,

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts

@@ -21,7 +21,6 @@ import { CommonModule } from '@angular/common';
 import { PropDataDirective } from '../../directives/prop-data.directive';
 
 @Component({
-  standalone: true,
   exportAs: 'abpExtensibleForm',
   selector: 'abp-extensible-form',
   templateUrl: './extensible-form.component.html',

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

@@ -55,7 +55,6 @@ const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
 @Component({
   exportAs: 'abpExtensibleTable',
   selector: 'abp-extensible-table',
-  standalone: true,
   imports: [
     AbpVisibleDirective,
     NgxDatatableModule,

npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts

@@ -15,7 +15,6 @@ import { NgClass, NgTemplateOutlet } from '@angular/common';
 
 @Component({
   exportAs: 'abpGridActions',
-  standalone: true,
   imports: [
     NgbDropdownModule,
     EllipsisDirective,

npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/page-toolbar.component.ts

@@ -15,7 +15,6 @@ import { NgClass, NgComponentOutlet } from '@angular/common';
 @Component({
   exportAs: 'abpPageToolbar',
   selector: 'abp-page-toolbar',
-  standalone: true,
   imports: [
     CreateInjectorPipe,
     PermissionDirective,

npm/ng-packs/packages/components/page/src/page-part.directive.ts

@@ -24,7 +24,10 @@ export interface PageRenderStrategy {
 
 export const PAGE_RENDER_STRATEGY = new InjectionToken<PageRenderStrategy>('PAGE_RENDER_STRATEGY');
 
-@Directive({ selector: '[abpPagePart]' })
+@Directive({
+  standalone: false,
+  selector: '[abpPagePart]',
+})
 export class PagePartDirective implements OnInit, OnDestroy, OnChanges {
   hasRendered = false;
   type!: string;

npm/ng-packs/packages/components/page/src/page-parts.component.ts

@@ -7,6 +7,7 @@ export enum PageParts {
 }
 
 @Component({
+  standalone: false,
   selector: 'abp-page-title-container',
   template: ` <ng-content></ng-content> `,
   encapsulation: ViewEncapsulation.None,
@@ -14,6 +15,7 @@ export enum PageParts {
 export class PageTitleContainerComponent {}
 
 @Component({
+  standalone: false,
   selector: 'abp-page-breadcrumb-container',
   template: ` <ng-content></ng-content> `,
   encapsulation: ViewEncapsulation.None,
@@ -21,6 +23,7 @@ export class PageTitleContainerComponent {}
 export class PageBreadcrumbContainerComponent {}
 
 @Component({
+  standalone: false,
   selector: 'abp-page-toolbar-container',
   template: ` <ng-content></ng-content> `,
   encapsulation: ViewEncapsulation.None,

npm/ng-packs/packages/components/page/src/page.component.ts

@@ -7,6 +7,7 @@ import {
 } from './page-parts.component';
 
 @Component({
+  standalone: false,
   selector: 'abp-page',
   templateUrl: './page.component.html',
   encapsulation: ViewEncapsulation.None,

npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts

@@ -23,6 +23,7 @@ import { DISABLE_TREE_STYLE_LOADING_TOKEN } from '../disable-tree-style-loading.
 export type DropEvent = NzFormatEmitEvent & { pos: number };
 
 @Component({
+  standalone: false,
   selector: 'abp-tree',
   templateUrl: 'tree.component.html',
   styleUrls: ['tree.component.scss'],

npm/ng-packs/packages/components/tree/src/lib/templates/expanded-icon-template.directive.ts

@@ -1,6 +1,7 @@
 import { Directive, TemplateRef } from '@angular/core';
 
 @Directive({
+  standalone: false,
   selector: '[abpTreeExpandedIconTemplate],[abp-tree-expanded-icon-template]',
 })
 export class ExpandedIconTemplateDirective {

npm/ng-packs/packages/components/tree/src/lib/templates/tree-node-template.directive.ts

@@ -1,6 +1,7 @@
 import { Directive, TemplateRef } from '@angular/core';
 
 @Directive({
+  standalone: false,
   selector: '[abpTreeNodeTemplate],[abp-tree-node-template]',
 })
 export class TreeNodeTemplateDirective {

npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts

@@ -2,7 +2,10 @@ import { ChangeDetectorRef, Component, inject, Input } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 // Not an abstract class on purpose. Do not change!
-@Component({ template: '' })
+@Component({
+  standalone: false,
+  template: '',
+})
 export class AbstractNgModelComponent<T = any, U = T> implements ControlValueAccessor {
   protected _value!: T;
   protected cdRef = inject(ChangeDetectorRef);

npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts

@@ -14,6 +14,7 @@ import { DYNAMIC_LAYOUTS_TOKEN } from '../tokens/dynamic-layout.token';
 import { EnvironmentService } from '../services';
 
 @Component({
+  standalone: false,
   selector: 'abp-dynamic-layout',
   template: `
     @if (isLayoutVisible) {
@@ -28,7 +29,6 @@ export class DynamicLayoutComponent implements OnInit {
   readonly layouts = inject(DYNAMIC_LAYOUTS_TOKEN);
   isLayoutVisible = true;
 
-
   protected readonly router = inject(Router);
   protected readonly route = inject(ActivatedRoute);
   protected readonly routes = inject(RoutesService);
@@ -46,7 +46,7 @@ export class DynamicLayoutComponent implements OnInit {
     this.checkLayoutOnNavigationEnd();
     this.listenToLanguageChange();
   }
-  
+
   ngOnInit(): void {
     if (this.layout) {
       return;

npm/ng-packs/packages/core/src/lib/components/replaceable-route-container.component.ts

@@ -6,6 +6,7 @@ import { ReplaceableComponentsService } from '../services/replaceable-components
 import { SubscriptionService } from '../services/subscription.service';
 
 @Component({
+  standalone: false,
   selector: 'abp-replaceable-route-container',
   template: `
     <ng-container *ngComponentOutlet="externalComponent || defaultComponent"></ng-container>

npm/ng-packs/packages/core/src/lib/components/router-outlet.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'abp-router-outlet',
   template: ` <router-outlet></router-outlet> `,
 })

npm/ng-packs/packages/core/src/lib/handlers/routes.handler.ts

@@ -7,7 +7,10 @@ import { RoutesService } from '../services/routes.service';
   providedIn: 'root',
 })
 export class RoutesHandler {
-  constructor(private routes: RoutesService, @Optional() private router: Router) {
+  constructor(
+    private routes: RoutesService,
+    @Optional() private router: Router,
+  ) {
     this.addRoutes();
   }
 

npm/ng-packs/packages/core/src/lib/pipes/localization.pipe.ts

@@ -4,6 +4,7 @@ import { LocalizationService } from '../services/localization.service';
 
 @Injectable()
 @Pipe({
+  standalone: false,
   name: 'abpLocalization',
 })
 export class LocalizationPipe implements PipeTransform {

npm/ng-packs/packages/core/src/lib/pipes/safe-html.pipe.ts

@@ -2,7 +2,10 @@ import { inject, Injectable, Pipe, PipeTransform, SecurityContext } from '@angul
 import { DomSanitizer } from '@angular/platform-browser';
 
 @Injectable()
-@Pipe({ name: 'abpSafeHtml' })
+@Pipe({
+  standalone: false,
+  name: 'abpSafeHtml',
+})
 export class SafeHtmlPipe implements PipeTransform {
   private readonly sanitizer = inject(DomSanitizer);
 

npm/ng-packs/packages/core/src/lib/pipes/short-date-time.pipe.ts

@@ -4,6 +4,7 @@ import { ConfigStateService } from '../services';
 import { getShortDateShortTimeFormat } from '../utils/date-utils';
 
 @Pipe({
+  standalone: false,
   name: 'shortDateTime',
   pure: true,
 })

npm/ng-packs/packages/core/src/lib/pipes/short-date.pipe.ts

@@ -4,6 +4,7 @@ import { ConfigStateService } from '../services';
 import { getShortDateFormat } from '../utils/date-utils';
 
 @Pipe({
+  standalone: false,
   name: 'shortDate',
   pure: true,
 })

npm/ng-packs/packages/core/src/lib/pipes/short-time.pipe.ts

@@ -4,6 +4,7 @@ import { ConfigStateService } from '../services';
 import { getShortTimeFormat } from '../utils/date-utils';
 
 @Pipe({
+  standalone: false,
   name: 'shortTime',
   pure: true,
 })

npm/ng-packs/packages/core/src/lib/pipes/sort.pipe.ts

@@ -1,7 +1,9 @@
 import { Injectable, Pipe, PipeTransform } from '@angular/core';
 export type SortOrder = 'asc' | 'desc';
+
 @Injectable()
 @Pipe({
+  standalone: false,
   name: 'abpSort',
 })
 export class SortPipe implements PipeTransform {

npm/ng-packs/packages/core/src/lib/pipes/to-injector.pipe.ts

@@ -5,6 +5,7 @@ export const INJECTOR_PIPE_DATA_TOKEN = new InjectionToken<PipeTransform>(
 );
 
 @Pipe({
+  standalone: false,
   name: 'toInjector',
 })
 export class ToInjectorPipe implements PipeTransform {

npm/ng-packs/packages/core/src/lib/providers/cookie-language.provider.ts

@@ -1,23 +1,18 @@
-import { APP_INITIALIZER, Injector, Provider } from '@angular/core';
+import { Injector, inject, provideAppInitializer } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { SessionStateService } from '../services/session-state.service';
 import { COOKIE_LANGUAGE_KEY } from '../tokens/cookie-language-key.token';
 
 export function setLanguageToCookie(injector: Injector) {
-  return () => {
+  const sessionState = injector.get(SessionStateService);
-    const sessionState = injector.get(SessionStateService);
+  const document = injector.get(DOCUMENT);
-    const document = injector.get(DOCUMENT);
+  const cookieLanguageKey = injector.get(COOKIE_LANGUAGE_KEY);
-    const cookieLanguageKey = injector.get(COOKIE_LANGUAGE_KEY);
+  sessionState.getLanguage$().subscribe(language => {
-    sessionState.getLanguage$().subscribe(language => {
+    const cookieValue = encodeURIComponent(`c=${language}|uic=${language}`);
-      const cookieValue = encodeURIComponent(`c=${language}|uic=${language}`);
+    document.cookie = `${cookieLanguageKey}=${cookieValue}`;
-      document.cookie = `${cookieLanguageKey}=${cookieValue}`;
+  });
-    });
-  };
 }
 
-export const CookieLanguageProvider: Provider = {
+export const CookieLanguageProvider = provideAppInitializer(() => {
-  provide: APP_INITIALIZER,
+  setLanguageToCookie(inject(Injector));
-  useFactory: setLanguageToCookie,
+});
-  deps: [Injector],
-  multi: true,
-};

npm/ng-packs/packages/core/src/lib/providers/core-module-config.provider.ts

@@ -1,4 +1,10 @@
-import { makeEnvironmentProviders, APP_INITIALIZER, Injector, Provider } from '@angular/core';
+import {
+  makeEnvironmentProviders,
+  Injector,
+  Provider,
+  inject,
+  provideAppInitializer,
+} from '@angular/core';
 import { TitleStrategy } from '@angular/router';
 import {
   provideHttpClient,
@@ -22,7 +28,7 @@ import { ABP, SortableItem } from '../models';
 import { AuthErrorFilterService } from '../abstracts';
 import { DEFAULT_DYNAMIC_LAYOUTS } from '../constants';
 import { LocalizationService, LocalStorageListenerService, AbpTitleStrategy } from '../services';
-import { DefaultQueueManager, getInitialData, localeInitializer, noop } from '../utils';
+import { DefaultQueueManager, getInitialData, localeInitializer } from '../utils';
 import { CookieLanguageProvider, IncludeLocalizationResourcesProvider, LocaleProvider } from './';
 
 export enum CoreFeatureKind {
@@ -104,38 +110,17 @@ export function provideAbpCore(...features: CoreFeature<CoreFeatureKind>[]) {
         headerName: 'RequestVerificationToken',
       }),
     ),
+    provideAppInitializer(() => {
+      getInitialData(inject(Injector));
+      localeInitializer(inject(Injector));
+
+      inject(LocalizationService);
+      inject(LocalStorageListenerService);
+      inject(RoutesHandler);
+    }),
+
     LocaleProvider,
     CookieLanguageProvider,
-    {
-      provide: APP_INITIALIZER,
-      multi: true,
-      deps: [Injector],
-      useFactory: getInitialData,
-    },
-    {
-      provide: APP_INITIALIZER,
-      multi: true,
-      deps: [Injector],
-      useFactory: localeInitializer,
-    },
-    {
-      provide: APP_INITIALIZER,
-      multi: true,
-      deps: [LocalizationService],
-      useFactory: noop,
-    },
-    {
-      provide: APP_INITIALIZER,
-      multi: true,
-      deps: [LocalStorageListenerService],
-      useFactory: noop,
-    },
-    {
-      provide: APP_INITIALIZER,
-      multi: true,
-      deps: [RoutesHandler],
-      useFactory: noop,
-    },
     {
       provide: SORT_COMPARE_FUNC,
       useFactory: compareFuncFactory,

npm/ng-packs/packages/core/src/lib/utils/initial-utils.ts

@@ -16,60 +16,52 @@ import { AuthService } from '../abstracts';
 import { CHECK_AUTHENTICATION_STATE_FN_KEY } from '../tokens/check-authentication-state';
 import { noop } from './common-utils';
 
-export function getInitialData(injector: Injector) {
+export async function getInitialData(injector: Injector) {
-  const fn = async () => {
+  const environmentService = injector.get(EnvironmentService);
-    const environmentService = injector.get(EnvironmentService);
+  const configState = injector.get(ConfigStateService);
-    const configState = injector.get(ConfigStateService);
+  const options = injector.get(CORE_OPTIONS) as ABP.Root;
-    const options = injector.get(CORE_OPTIONS) as ABP.Root;
 
-    environmentService.setState(options.environment as Environment);
+  environmentService.setState(options.environment as Environment);
-    await getRemoteEnv(injector, options.environment);
+  await getRemoteEnv(injector, options.environment);
-    await parseTenantFromUrl(injector);
+  await parseTenantFromUrl(injector);
-    const authService = injector.get(AuthService, undefined, { optional: true });
+  const authService = injector.get(AuthService, undefined, { optional: true });
-    const checkAuthenticationState = injector.get(CHECK_AUTHENTICATION_STATE_FN_KEY, noop, {
+  const checkAuthenticationState = injector.get(CHECK_AUTHENTICATION_STATE_FN_KEY, noop, {
-      optional: true,
+    optional: true,
-    });
+  });
-    if (!options.skipInitAuthService && authService) {
+  if (!options.skipInitAuthService && authService) {
-      await authService.init();
+    await authService.init();
-    }
+  }
-    if (options.skipGetAppConfiguration) return;
+  if (options.skipGetAppConfiguration) return;
 
-    const result$ = configState.refreshAppState().pipe(
+  const result$ = configState.refreshAppState().pipe(
-      tap(() => checkAuthenticationState(injector)),
+    tap(() => checkAuthenticationState(injector)),
-      tap(() => {
+    tap(() => {
-        const currentTenant = configState.getOne('currentTenant') as CurrentTenantDto;
+      const currentTenant = configState.getOne('currentTenant') as CurrentTenantDto;
-        injector.get(SessionStateService).setTenant(currentTenant);
+      injector.get(SessionStateService).setTenant(currentTenant);
-      }),
+    }),
-      catchError(error => {
+    catchError(error => {
-        const appInitErrorHandlers = injector.get(APP_INIT_ERROR_HANDLERS, null);
+      const appInitErrorHandlers = injector.get(APP_INIT_ERROR_HANDLERS, null);
-        if (appInitErrorHandlers && appInitErrorHandlers.length) {
+      if (appInitErrorHandlers && appInitErrorHandlers.length) {
-          appInitErrorHandlers.forEach(func => func(error));
+        appInitErrorHandlers.forEach(func => func(error));
-        }
+      }
 
-        return throwError(error);
+      return throwError(() => error);
-      }),
+    }),
-    );
+  );
-    await lastValueFrom(result$);
+  await lastValueFrom(result$);
-  };
-
-  return fn;
 }
 
 export function localeInitializer(injector: Injector) {
-  const fn = () => {
+  const sessionState = injector.get(SessionStateService);
-    const sessionState = injector.get(SessionStateService);
+  const { registerLocaleFn }: ABP.Root = injector.get(CORE_OPTIONS);
-    const { registerLocaleFn }: ABP.Root = injector.get(CORE_OPTIONS);
-
-    const lang = sessionState.getLanguage() || 'en';
 
-    return new Promise((resolve, reject) => {
+  const lang = sessionState.getLanguage() || 'en';
-      registerLocaleFn(lang).then(module => {
-        if (module?.default) registerLocaleData(module.default);
 
-        return resolve('resolved');
+  return new Promise((resolve, reject) => {
-      }, reject);
+    registerLocaleFn(lang).then(module => {
-    });
+      if (module?.default) registerLocaleData(module.default);
-  };
 
-  return fn;
+      return resolve('resolved');
+    }, reject);
+  });
 }

npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.ts

@@ -3,14 +3,9 @@ import { Component } from '@angular/core';
 import { FeatureManagementComponent } from '../feature-management/feature-management.component';
 
 @Component({
-  standalone: true,
   selector: 'abp-feature-management-tab',
   templateUrl: './feature-management-tab.component.html',
-  imports: [
+  imports: [ReplaceableTemplateDirective, LocalizationModule, FeatureManagementComponent],
-    ReplaceableTemplateDirective,
-    LocalizationModule,
-    FeatureManagementComponent,
-  ],
 })
 export class FeatureManagementTabComponent {
   visibleFeatures = false;

npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html

@@ -27,7 +27,7 @@
                     <h4>{{ selectedGroupDisplayName }}</h4>
                     <hr class="mt-2 mb-3" />
 
-                    @for (feature of features[group.name]; track feature.id; let i = $index) {
+                    @for (feature of features[group.name]; track feature.id || i; let i = $index) {
                       <div class="mt-2" [ngStyle]="feature.style" (keyup.enter)="save()">
                         @switch (feature.valueType?.name) {
                           @case (valueTypes.ToggleStringValueType) {

npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts

@@ -27,7 +27,6 @@ enum ValueTypes {
 }
 
 @Component({
-  standalone: true,
   selector: 'abp-feature-management',
   templateUrl: './feature-management.component.html',
   exportAs: 'abpFeatureManagement',

npm/ng-packs/packages/feature-management/src/lib/providers/feature-management-settings.provider.ts

@@ -1,15 +1,13 @@
 import { SettingTabsService } from '@abp/ng.setting-management/config';
-import { APP_INITIALIZER } from '@angular/core';
+import { inject, provideAppInitializer } from '@angular/core';
 import { eFeatureManagementTabNames } from '../enums/feature-management-tab-names';
 import { FeatureManagementTabComponent } from '../components';
 
 export const FEATURE_MANAGEMENT_SETTINGS_PROVIDERS = [
-  {
+  provideAppInitializer(() => {
-    provide: APP_INITIALIZER,
+    const initializerFn = configureSettingTabs(inject(SettingTabsService));
-    useFactory: configureSettingTabs,
+    return initializerFn();
-    deps: [SettingTabsService],
+  }),
-    multi: true,
-  },
 ];
 
 export function configureSettingTabs(settingtabs: SettingTabsService) {

npm/ng-packs/packages/generators/src/generators/generate-proxy/generator.ts

@@ -1,5 +1,5 @@
 import { GenerateProxyGeneratorSchema } from './schema';
-import { Tree } from '@nrwl/devkit';
+import { Tree } from '@nx/devkit';
 import { wrapAngularDevkitSchematic } from '@nx/devkit/ngcli-adapter';
 
 export default async function (host: Tree, schema: GenerateProxyGeneratorSchema) {

npm/ng-packs/packages/identity/config/src/providers/route.provider.ts

@@ -1,11 +1,14 @@
 import { eLayoutType, RoutesService } from '@abp/ng.core';
 import { eThemeSharedRouteNames } from '@abp/ng.theme.shared';
-import { APP_INITIALIZER } from '@angular/core';
+import { inject, provideAppInitializer } from '@angular/core';
 import { eIdentityPolicyNames } from '../enums/policy-names';
 import { eIdentityRouteNames } from '../enums/route-names';
 
 export const IDENTITY_ROUTE_PROVIDERS = [
-  { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
+  provideAppInitializer(() => {
+    const initializerFn = configureRoutes(inject(RoutesService));
+    return initializerFn();
+  }),
 ];
 
 export function configureRoutes(routesService: RoutesService) {

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts

@@ -13,6 +13,7 @@ import { finalize } from 'rxjs/operators';
 import { eIdentityComponents } from '../../enums/components';
 
 @Component({
+  standalone: false,
   selector: 'abp-roles',
   templateUrl: './roles.component.html',
   providers: [

npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts

@@ -36,6 +36,7 @@ import { finalize, switchMap, tap } from 'rxjs/operators';
 import { eIdentityComponents } from '../../enums/components';
 
 @Component({
+  standalone: false,
   selector: 'abp-users',
   templateUrl: './users.component.html',
   providers: [

npm/ng-packs/packages/oauth/src/lib/providers/oauth-module-config.provider.ts

@@ -9,7 +9,7 @@ import {
   AuthErrorFilterService,
   noop,
 } from '@abp/ng.core';
-import { APP_INITIALIZER, Provider, makeEnvironmentProviders } from '@angular/core';
+import { Provider, makeEnvironmentProviders, inject, provideAppInitializer } from '@angular/core';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
 import { AbpOAuthGuard, abpOAuthGuard } from '../guards';
@@ -51,12 +51,11 @@ export function provideAbpOAuth() {
       multi: true,
     },
     NavigateToManageProfileProvider,
-    {
+    provideAppInitializer(() => {
-      provide: APP_INITIALIZER,
+      const initializerFn = noop();
-      multi: true,
+      inject(OAuthConfigurationHandler);
-      deps: [OAuthConfigurationHandler],
+      return initializerFn();
-      useFactory: noop,
+    }),
-    },
     OAuthModule.forRoot().providers as Provider[],
     { provide: OAuthStorage, useClass: AbpLocalStorageService },
     { provide: AuthErrorFilterService, useExisting: OAuthErrorFilterService },

npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts

@@ -34,6 +34,7 @@ type PermissionWithGroupName = PermissionGrantInfoDto & {
 };
 
 @Component({
+  standalone: false,
   selector: 'abp-permission-management',
   templateUrl: './permission-management.component.html',
   exportAs: 'abpPermissionManagement',

npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.ts

@@ -12,6 +12,7 @@ import { ConfigStateService, LocalizationService } from '@abp/ng.core';
 const { required, email } = Validators;
 
 @Component({
+  standalone: false,
   selector: 'abp-email-setting-group',
   templateUrl: 'email-setting-group.component.html',
   animations: [collapse],

npm/ng-packs/packages/setting-management/config/src/lib/providers/features.token.ts

@@ -1,5 +1,5 @@
 import { ConfigStateService, featuresFactory, noop } from '@abp/ng.core';
-import { APP_INITIALIZER, inject, InjectionToken } from '@angular/core';
+import { inject, InjectionToken, provideAppInitializer } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -30,10 +30,7 @@ export const SETTING_MANAGEMENT_ROUTE_VISIBILITY = new InjectionToken<Observable
 );
 
 export const SETTING_MANAGEMENT_FEATURES_PROVIDERS = [
-  {
+  provideAppInitializer(() => {
-    provide: APP_INITIALIZER,
+    inject(SETTING_MANAGEMENT_ROUTE_VISIBILITY);
-    useFactory: noop,
+  }),
-    deps: [SETTING_MANAGEMENT_ROUTE_VISIBILITY],
-    multi: true,
-  },
 ];

npm/ng-packs/packages/setting-management/config/src/lib/providers/route.provider.ts

@@ -1,6 +1,6 @@
-import { eLayoutType, noop, RoutesService } from '@abp/ng.core';
+import { eLayoutType, RoutesService } from '@abp/ng.core';
 import { eThemeSharedRouteNames } from '@abp/ng.theme.shared';
-import { APP_INITIALIZER, inject, InjectionToken } from '@angular/core';
+import { inject, InjectionToken, provideAppInitializer } from '@angular/core';
 import { debounceTime, map } from 'rxjs/operators';
 import { eSettingManagementRouteNames } from '../enums/route-names';
 import { SettingTabsService } from '../services/settings-tabs.service';
@@ -35,11 +35,8 @@ export const SETTING_MANAGEMENT_HAS_SETTING = new InjectionToken<Observable<bool
 );
 
 export const SETTING_MANAGEMENT_ROUTE_PROVIDERS = [
-  { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
+  provideAppInitializer(() => {
-  {
+    configureRoutes(inject(RoutesService));
-    provide: APP_INITIALIZER,
+    inject(SETTING_MANAGEMENT_HAS_SETTING);
-    useFactory: noop,
+  }),
-    deps: [SETTING_MANAGEMENT_HAS_SETTING],
-    multi: true,
-  },
 ];

npm/ng-packs/packages/setting-management/config/src/lib/providers/setting-tab.provider.ts

@@ -1,15 +1,12 @@
-import { APP_INITIALIZER } from '@angular/core';
+import { inject, provideAppInitializer } from '@angular/core';
 import { EmailSettingGroupComponent } from '../components/email-setting-group/email-setting-group.component';
 import { eSettingManamagementSettingTabNames } from '../enums/setting-tab-names';
 import { SettingTabsService } from '../services/settings-tabs.service';
 
 export const SETTING_MANAGEMENT_SETTING_TAB_PROVIDERS = [
-  {
+  provideAppInitializer(() => {
-    provide: APP_INITIALIZER,
+    configureSettingTabs(inject(SettingTabsService));
-    useFactory: configureSettingTabs,
+  }),
-    deps: [SettingTabsService],
-    multi: true,
-  },
 ];
 
 export function configureSettingTabs(settingTabs: SettingTabsService) {

npm/ng-packs/packages/setting-management/config/src/lib/providers/visible.provider.ts

@@ -1,4 +1,4 @@
-import { APP_INITIALIZER, Injector } from '@angular/core';
+import { Injector, inject, provideAppInitializer } from '@angular/core';
 import { combineLatest } from 'rxjs';
 import { RoutesService } from '@abp/ng.core';
 import { SETTING_MANAGEMENT_HAS_SETTING } from './route.provider';
@@ -6,25 +6,20 @@ import { SETTING_MANAGEMENT_ROUTE_VISIBILITY } from './features.token';
 import { eSettingManagementRouteNames } from '../enums';
 
 export const SETTING_MANAGEMENT_VISIBLE_PROVIDERS = [
-  {
+  provideAppInitializer(() => {
-    provide: APP_INITIALIZER,
+    setSettingManagementVisibility(inject(Injector));
-    useFactory: setSettingManagementVisibility,
+  }),
-    deps: [Injector],
-    multi: true,
-  },
 ];
 
 export function setSettingManagementVisibility(injector: Injector) {
-  return () => {
+  const settingManagementHasSetting$ = injector.get(SETTING_MANAGEMENT_HAS_SETTING);
-    const settingManagementHasSetting$ = injector.get(SETTING_MANAGEMENT_HAS_SETTING);
+  const isSettingManagementFeatureEnable$ = injector.get(SETTING_MANAGEMENT_ROUTE_VISIBILITY);
-    const isSettingManagementFeatureEnable$ = injector.get(SETTING_MANAGEMENT_ROUTE_VISIBILITY);
+  const routes = injector.get(RoutesService);
-    const routes = injector.get(RoutesService);
+  combineLatest([settingManagementHasSetting$, isSettingManagementFeatureEnable$]).subscribe(
-    combineLatest([settingManagementHasSetting$, isSettingManagementFeatureEnable$]).subscribe(
+    ([settingManagementHasSetting, isSettingManagementFeatureEnable]) => {
-      ([settingManagementHasSetting, isSettingManagementFeatureEnable]) => {
+      routes.patch(eSettingManagementRouteNames.Settings, {
-        routes.patch(eSettingManagementRouteNames.Settings, {
+        invisible: !(settingManagementHasSetting && isSettingManagementFeatureEnable),
-          invisible: !(settingManagementHasSetting && isSettingManagementFeatureEnable),
+      });
-        });
+    },
-      },
+  );
-    );
-  };
 }

npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts

@@ -4,6 +4,7 @@ import { Component, OnDestroy, OnInit, TrackByFunction } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 @Component({
+  standalone: false,
   selector: 'abp-setting-management',
   templateUrl: './setting-management.component.html',
 })

npm/ng-packs/packages/tenant-management/config/src/providers/route.provider.ts

@@ -1,11 +1,14 @@
 import { eLayoutType, RoutesService } from '@abp/ng.core';
 import { eThemeSharedRouteNames } from '@abp/ng.theme.shared';
-import { APP_INITIALIZER } from '@angular/core';
+import { inject, provideAppInitializer } from '@angular/core';
 import { eTenantManagementPolicyNames } from '../enums/policy-names';
 import { eTenantManagementRouteNames } from '../enums/route-names';
 
 export const TENANT_MANAGEMENT_ROUTE_PROVIDERS = [
-  { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
+  provideAppInitializer(() => {
+    const initializerFn = configureRoutes(inject(RoutesService));
+    return initializerFn();
+  }),
 ];
 
 export function configureRoutes(routes: RoutesService) {

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts

@@ -13,6 +13,7 @@ import { finalize } from 'rxjs/operators';
 import { eTenantManagementComponents } from '../../enums/components';
 
 @Component({
+  standalone: false,
   selector: 'abp-tenants',
   templateUrl: './tenants.component.html',
   providers: [

npm/ng-packs/packages/theme-basic/ng-package.json

@@ -4,8 +4,5 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "allowedNonPeerDependencies": [
+  "allowedNonPeerDependencies": ["@abp/ng.theme.shared", "@abp/ng.account.core"]
-    "@abp/ng.theme.shared",
-    "@abp/ng.account.core"
-  ]
 }

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts

@@ -3,6 +3,7 @@ import { eLayoutType, SubscriptionService } from '@abp/ng.core';
 import { LayoutService } from '../../services/layout.service';
 
 @Component({
+  standalone: false,
   selector: 'abp-layout-account',
   templateUrl: './account-layout.component.html',
   providers: [LayoutService, SubscriptionService],

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts

@@ -2,6 +2,7 @@ import { AuthWrapperService } from '@abp/ng.account.core';
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'abp-auth-wrapper',
   templateUrl: './auth-wrapper.component.html',
   providers: [AuthWrapperService],

npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts

@@ -2,6 +2,7 @@ import { TenantBoxService } from '@abp/ng.account.core';
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'abp-tenant-box',
   templateUrl: './tenant-box.component.html',
   providers: [TenantBoxService],

npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts

@@ -4,6 +4,7 @@ import { AfterViewInit, Component, inject } from '@angular/core';
 import { LayoutService } from '../../services/layout.service';
 
 @Component({
+  standalone: false,
   selector: 'abp-layout-application',
   templateUrl: './application-layout.component.html',
   animations: [slideFromBottom, collapseWithMargin],

npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts

@@ -2,10 +2,9 @@ import { Component } from '@angular/core';
 import { eLayoutType } from '@abp/ng.core';
 
 @Component({
+  standalone: false,
   selector: 'abp-layout-empty',
-  template: `
+  template: ` <router-outlet></router-outlet> `,
-    <router-outlet></router-outlet>
-  `,
 })
 export class EmptyLayoutComponent {
   static type = eLayoutType.empty;

npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts

@@ -2,16 +2,12 @@ import { ApplicationInfo, EnvironmentService } from '@abp/ng.core';
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'abp-logo',
   template: `
     <a class="navbar-brand" routerLink="/">
       @if (appInfo.logoUrl) {
-        <img
+        <img [src]="appInfo.logoUrl" [alt]="appInfo.name" width="100%" height="auto" />
-          [src]="appInfo.logoUrl"
-          [alt]="appInfo.name"
-          width="100%"
-          height="auto"
-        />
       } @else {
         {{ appInfo.name }}
       }

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts

@@ -10,6 +10,7 @@ import { Component, Inject, TrackByFunction } from '@angular/core';
 import { Observable } from 'rxjs';
 
 @Component({
+  standalone: false,
   selector: 'abp-current-user',
   templateUrl: './current-user.component.html',
 })

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
+  standalone: false,
   selector: 'abp-languages',
   template: `
     @if (((dropdownLanguages$ | async)?.length || 0) > 0) {

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts

@@ -2,6 +2,7 @@ import { NavItem, NavItemsService } from '@abp/ng.theme.shared';
 import { Component, Input, TrackByFunction } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'abp-nav-items',
   templateUrl: 'nav-items.component.html',
 })

npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts

@@ -2,6 +2,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
 import { PageAlertService } from '@abp/ng.theme.shared';
 
 @Component({
+  standalone: false,
   selector: 'abp-page-alert-container',
   templateUrl: './page-alert-container.component.html',
   encapsulation: ViewEncapsulation.None,

npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts

@@ -10,6 +10,7 @@ import {
 } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'abp-routes',
   templateUrl: 'routes.component.html',
 })
@@ -22,7 +23,10 @@ export class RoutesComponent {
 
   trackByFn: TrackByFunction<TreeNode<ABP.Route>> = (_, item) => item.name;
 
-  constructor(public readonly routesService: RoutesService, protected renderer: Renderer2) {}
+  constructor(
+    public readonly routesService: RoutesService,
+    protected renderer: Renderer2,
+  ) {}
 
   isDropdown(node: TreeNode<ABP.Route>) {
     return !node?.isLeaf || this.routesService.hasChildren(node.name);

npm/ng-packs/packages/theme-basic/src/lib/components/validation-error/validation-error.component.ts

@@ -2,10 +2,11 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
 import { Validation, ValidationErrorComponent as ErrorComponent } from '@ngx-validate/core';
 
 @Component({
+  standalone: false,
   selector: 'abp-validation-error',
   template: `
     @for (error of abpErrors; track $index) {
-      <div class="invalid-feedback" >
+      <div class="invalid-feedback">
         {{ error.message | abpLocalization: error.interpoliteParams }}
       </div>
     }

npm/ng-packs/packages/theme-basic/src/lib/providers/nav-item.provider.ts

@@ -1,16 +1,14 @@
 import { NavItemsService } from '@abp/ng.theme.shared';
-import { APP_INITIALIZER } from '@angular/core';
+import { inject, provideAppInitializer } from '@angular/core';
 import { CurrentUserComponent } from '../components/nav-items/current-user.component';
 import { LanguagesComponent } from '../components/nav-items/languages.component';
 import { eThemeBasicComponents } from '../enums/components';
 
 export const BASIC_THEME_NAV_ITEM_PROVIDERS = [
-  {
+  provideAppInitializer(() => {
-    provide: APP_INITIALIZER,
+    const initializerFn = configureNavItems(inject(NavItemsService));
-    useFactory: configureNavItems,
+    return initializerFn();
-    deps: [NavItemsService],
+  }),
-    multi: true,
-  },
 ];
 
 export function configureNavItems(navItems: NavItemsService) {

npm/ng-packs/packages/theme-basic/src/lib/providers/styles.provider.ts

@@ -1,5 +1,5 @@
 import { CONTENT_STRATEGY, DomInsertionService, ReplaceableComponentsService } from '@abp/ng.core';
-import { APP_INITIALIZER } from '@angular/core';
+import { inject, provideAppInitializer } from '@angular/core';
 import { AccountLayoutComponent } from '../components/account-layout/account-layout.component';
 import { ApplicationLayoutComponent } from '../components/application-layout/application-layout.component';
 import { EmptyLayoutComponent } from '../components/empty-layout/empty-layout.component';
@@ -7,12 +7,13 @@ import styles from '../constants/styles';
 import { eThemeBasicComponents } from '../enums/components';
 
 export const BASIC_THEME_STYLES_PROVIDERS = [
-  {
+  provideAppInitializer(() => {
-    provide: APP_INITIALIZER,
+    const initializerFn = configureStyles(
-    useFactory: configureStyles,
+      inject(DomInsertionService),
-    deps: [DomInsertionService, ReplaceableComponentsService],
+      inject(ReplaceableComponentsService),
-    multi: true,
+    );
-  },
+    return initializerFn();
+  }),
 ];
 
 export function configureStyles(

npm/ng-packs/packages/theme-basic/src/lib/providers/theme-basic-config.provider.ts

@@ -1,4 +1,4 @@
-import { APP_INITIALIZER, makeEnvironmentProviders } from '@angular/core';
+import { makeEnvironmentProviders, inject, provideAppInitializer } from '@angular/core';
 import { noop } from '@abp/ng.core';
 import {
   VALIDATION_ERROR_TEMPLATE,
@@ -29,11 +29,10 @@ export function provideThemeBasicConfig() {
       useValue: 'is-invalid',
     },
     LazyStyleHandler,
-    {
+    provideAppInitializer(() => {
-      provide: APP_INITIALIZER,
+      const initializerFn = noop();
-      useFactory: noop,
+      inject(LazyStyleHandler);
-      multi: true,
+      return initializerFn();
-      deps: [LazyStyleHandler],
+    }),
-    },
   ]);
 }

npm/ng-packs/packages/theme-basic/src/lib/providers/user-menu.provider.ts

@@ -1,15 +1,13 @@
 import { AuthService, NAVIGATE_TO_MANAGE_PROFILE } from '@abp/ng.core';
 import { UserMenuService } from '@abp/ng.theme.shared';
-import { APP_INITIALIZER, Injector } from '@angular/core';
+import { Injector, inject, provideAppInitializer } from '@angular/core';
 import { eUserMenuItems } from '../enums/user-menu-items';
 
 export const BASIC_THEME_USER_MENU_PROVIDERS = [
-  {
+  provideAppInitializer(() => {
-    provide: APP_INITIALIZER,
+    const initializerFn = configureUserMenu(inject(Injector));
-    useFactory: configureUserMenu,
+    return initializerFn();
-    deps: [Injector],
+  }),
-    multi: true,
-  },
 ];
 
 export function configureUserMenu(injector: Injector) {

npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.ts

@@ -2,6 +2,7 @@ import { ABP } from '@abp/ng.core';
 import { Component, Input } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'abp-breadcrumb-items',
   templateUrl: './breadcrumb-items.component.html',
 })

npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -12,6 +12,7 @@ import { map, startWith } from 'rxjs/operators';
 import { eThemeSharedRouteNames } from '../../enums/route-names';
 
 @Component({
+  standalone: false,
   selector: 'abp-breadcrumb',
   templateUrl: './breadcrumb.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,

npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts

@@ -12,6 +12,7 @@ import {
 } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'abp-button',
   template: `
     <button

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts

@@ -1,6 +1,7 @@
 import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'abp-card-body',
   template: ` <div [ngClass]="cardBodyClass" [ngStyle]="cardBodyStyle">
     <ng-content></ng-content>

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts

@@ -1,6 +1,7 @@
 import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'abp-card-footer',
   template: `
     <div [ngStyle]="cardFooterStyle" [ngClass]="cardFooterClass">

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts

@@ -1,6 +1,7 @@
 import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'abp-card-header',
   template: `
     <div [ngClass]="cardHeaderClass" [ngStyle]="cardHeaderStyle">

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.directive.ts

@@ -1,6 +1,7 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
+  standalone: false,
   selector: `abp-card-header, [abp-card-header], [abpCardHeader]`,
 })
 export class CardHeaderDirective {

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-img-top.directive.ts

@@ -1,6 +1,7 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
+  standalone: false,
   selector: `abp-card-img-top, [abp-card-img-top], [abpCardImgTop]`,
 })
 export class CardImgTopDirective {

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-subtitle.directive.ts

@@ -1,6 +1,7 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
+  standalone: false,
   selector: `abp-card-subtitle, [abp-card-subtitle], [abpCardSubtitle]`,
 })
 export class CardSubtitleDirective {

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.directive.ts

@@ -1,6 +1,7 @@
 import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
+  standalone: false,
   selector: `abp-card-title, [abp-card-title], [abpCardTitle]`,
 })
 export class CardTitleDirective {

npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'abp-card',
   template: ` <div class="card" [ngClass]="cardClass" [ngStyle]="cardStyle">
     <ng-content></ng-content>

npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts

@@ -3,6 +3,7 @@ import { Component, EventEmitter, forwardRef, Injector, Input, Output } from '@a
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
+  standalone: false,
   selector: 'abp-checkbox',
   template: `
     <div class="mb-3">

npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts

@@ -4,6 +4,7 @@ import { Confirmation } from '../../models/confirmation';
 import { CONFIRMATION_ICONS, ConfirmationIcons } from '../../tokens/confirmation-icons.token';
 
 @Component({
+  standalone: false,
   selector: 'abp-confirmation',
   templateUrl: './confirmation.component.html',
   styleUrls: ['./confirmation.component.scss'],

npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts

@@ -3,6 +3,7 @@ import { Component, EventEmitter, forwardRef, Injector, Input, Output } from '@a
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
+  standalone: false,
   selector: 'abp-form-input',
   template: `
     <div class="mb-3">

npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts

@@ -22,6 +22,7 @@ import { LocalizationParam } from '@abp/ng.core';
 import { ErrorScreenErrorCodes } from '../../models';
 
 @Component({
+  standalone: false,
   selector: 'abp-http-error-wrapper',
   templateUrl: './http-error-wrapper.component.html',
   styleUrls: ['http-error-wrapper.component.scss'],
@@ -72,7 +73,7 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr
       });
 
       customComponentRef.instance.errorStatus = this.status;
-      
+
       //In our custom "HttpErrorComponent", we have a "status" property.
       //We used to have "errorStatus", but it wasn't signal type. "status" variable is signal type.
       //I've checked because of backward compatibility. Developers might have their own custom HttpErrorComponent.
@@ -80,7 +81,7 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr
       if (customComponentRef.instance.status) {
         customComponentRef.instance.status.set(this.status);
       }
-      
+
       customComponentRef.instance.destroy$ = this.destroy$;
 
       this.appRef.attachView(customComponentRef.hostView);

npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts

@@ -4,7 +4,6 @@ import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'abp-internet-status',
-  standalone: true,
   imports: [LocalizationModule, NgbTooltip],
   template: `
     @if (!isOnline()) {
@@ -12,7 +11,7 @@ import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
         <i
           ngbTooltip="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}"
           container="body"
-          placement="left-top" 
+          placement="left-top"
           class="fa fa-wifi text-blinking blink"
         >
         </i>

npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 import { combineLatest, Subscription, timer } from 'rxjs';
 
 @Component({
+  standalone: false,
   selector: 'abp-loader-bar',
   template: `
     <div id="abp-loader-bar" [ngClass]="containerClass" [class.is-loading]="isLoading">
@@ -13,7 +14,7 @@ import { combineLatest, Subscription, timer } from 'rxjs';
         [style.width.vw]="progressLevel"
         [ngStyle]="{
           'background-color': color,
-          'box-shadow': boxShadow
+          'box-shadow': boxShadow,
         }"
       ></div>
     </div>

npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading.component.ts

@@ -1,6 +1,7 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'abp-loading',
   template: `
     <div class="abp-loading">

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal-close.directive.ts

@@ -1,7 +1,10 @@
 import { Directive, HostListener, Optional } from '@angular/core';
 import { ModalComponent } from './modal.component';
 
-@Directive({ selector: '[abpClose]' })
+@Directive({
+  standalone: false,
+  selector: '[abpClose]',
+})
 export class ModalCloseDirective {
   constructor(@Optional() private modal: ModalComponent) {
     if (!modal) {
@@ -13,4 +16,4 @@ export class ModalCloseDirective {
   onClick() {
     this.modal?.close();
   }
-}
+}

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts

@@ -26,6 +26,7 @@ import { DismissableModal, ModalDismissMode, ModalRefService } from './modal-ref
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 
 @Component({
+  standalone: false,
   selector: 'abp-modal',
   templateUrl: './modal.component.html',
   styleUrls: ['./modal.component.scss'],

npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts

@@ -4,12 +4,11 @@ import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 
 /**
- * @deprecated use ShowPasswordDirective directive 
+ * @deprecated use ShowPasswordDirective directive
  * https://abp.io/docs/latest/framework/ui/angular/show-password-directive
  */
 @Component({
   selector: 'abp-password',
-  standalone: true,
   imports: [CommonModule, FormsModule],
   templateUrl: `./password.component.html`,
   providers: [

npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts

@@ -4,6 +4,7 @@ import { toastInOut } from '../../animations/toast.animations';
 import { Toaster } from '../../models/toaster';
 
 @Component({
+  standalone: false,
   selector: 'abp-toast-container',
   templateUrl: './toast-container.component.html',
   styleUrls: ['./toast-container.component.scss'],

npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.scss

@@ -1,11 +1,13 @@
+@use 'sass:color';
+
 @mixin fillColor($background, $color) {
   border: 2px solid $background;
   background-color: $background;
   color: $color;
   box-shadow: 0 0 10px -5px rgba(#000, 0.4);
   &:hover {
-    border: 2px solid darken($background, 5);
+    border: 2px solid color.scale($background, $lightness: -5%);
-    background-color: darken($background, 5);
+    background-color: color.scale($background, $lightness: -5%);
     box-shadow: 0 0 15px -5px rgba(#000, 0.4);
   }
 }

npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Toaster } from '../../models/toaster';
 @Component({
+  standalone: false,
   selector: 'abp-toast',
   templateUrl: './toast.component.html',
   styleUrls: ['./toast.component.scss'],

npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts

@@ -16,7 +16,10 @@ import { Subscription, timer } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { LoadingComponent } from '../components/loading/loading.component';
 
-@Directive({ selector: '[abpLoading]' })
+@Directive({
+  standalone: false,
+  selector: '[abpLoading]',
+})
 export class LoadingDirective implements OnInit, OnDestroy {
   private _loading!: boolean;
 

npm/ng-packs/packages/theme-shared/src/lib/providers/ng-bootstrap-config.provider.ts

@@ -1,13 +1,14 @@
-import { APP_INITIALIZER } from '@angular/core';
+import { inject, provideAppInitializer } from '@angular/core';
 import { NgbInputDatepickerConfig, NgbTypeaheadConfig } from '@ng-bootstrap/ng-bootstrap';
 
 export const NG_BOOTSTRAP_CONFIG_PROVIDERS = [
-  {
+  provideAppInitializer(() => {
-    provide: APP_INITIALIZER,
+    const initializerFn = configureNgBootstrap(
-    useFactory: configureNgBootstrap,
+      inject(NgbInputDatepickerConfig),
-    deps: [NgbInputDatepickerConfig, NgbTypeaheadConfig],
+      inject(NgbTypeaheadConfig),
-    multi: true,
+    );
-  },
+    return initializerFn();
+  }),
 ];
 
 export function configureNgBootstrap(

npm/ng-packs/packages/theme-shared/src/lib/providers/route.provider.ts

@@ -1,9 +1,12 @@
 import { RoutesService } from '@abp/ng.core';
-import { APP_INITIALIZER } from '@angular/core';
+import { inject, provideAppInitializer } from '@angular/core';
 import { eThemeSharedRouteNames } from '../enums/route-names';
 
 export const THEME_SHARED_ROUTE_PROVIDERS = [
-  { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
+  provideAppInitializer(() => {
+    const initializerFn = configureRoutes(inject(RoutesService));
+    return initializerFn();
+  }),
 ];
 
 export function configureRoutes(routesService: RoutesService) {