Merge pull request #21669 from abpframework/ng-update/19

Angular 19 version update

npm/ng-packs/apps/dev-app/src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'app-root',
   template: `
     <abp-loader-bar></abp-loader-bar>

npm/ng-packs/apps/dev-app/src/app/home/home.component.ts

@@ -2,6 +2,7 @@ import { AuthService } from '@abp/ng.core';
 import { Component, inject } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'app-home',
   templateUrl: './home.component.html',
 })

npm/ng-packs/apps/dev-app/src/app/route.provider.ts

@@ -1,20 +1,21 @@
 import { eLayoutType, RoutesService } from '@abp/ng.core';
-import { APP_INITIALIZER } from '@angular/core';
+import { inject, provideAppInitializer } from '@angular/core';
 
 export const APP_ROUTE_PROVIDER = [
-  { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
+  provideAppInitializer(() => {
+    configureRoutes();
+  }),
 ];
 
-function configureRoutes(routesService: RoutesService) {
+function configureRoutes() {
-  return () => {
+  const routesService = inject(RoutesService);
-    routesService.add([
+  routesService.add([
-      {
+    {
-        path: '/',
+      path: '/',
-        name: '::Menu:Home',
+      name: '::Menu:Home',
-        iconClass: 'fas fa-home',
+      iconClass: 'fas fa-home',
-        order: 1,
+      order: 1,
-        layout: eLayoutType.application,
+      layout: eLayoutType.application,
-      },
+    },
-    ]);
+  ]);
-  };
 }

npm/ng-packs/jest.config.ts

@@ -1,5 +1,5 @@
-import { getJestProjects } from '@nx/jest';
+import { getJestProjectsAsync } from '@nx/jest';
 
-export default {
+export default async () => ({
-  projects: getJestProjects(),
+  projects: await getJestProjectsAsync(),
-};
+});

npm/ng-packs/migrations.json

@@ -1,84 +1,159 @@
 {
   "migrations": [
     {
-      "cli": "nx",
+      "version": "20.0.0-beta.7",
-      "version": "19.2.0-beta.2",
+      "description": "Migration for v20.0.0-beta.7",
-      "description": "Updates the default workspace data directory to .nx/workspace-data",
+      "implementation": "./src/migrations/update-20-0-0/move-use-daemon-process",
-      "implementation": "./src/migrations/update-19-2-0/move-workspace-data-directory",
       "package": "nx",
-      "name": "19-2-0-move-graph-cache-directory"
+      "name": "move-use-daemon-process"
     },
     {
-      "cli": "nx",
+      "version": "20.0.1",
-      "version": "19.2.2-beta.0",
+      "description": "Set `useLegacyCache` to true for migrating workspaces",
-      "description": "Updates the nx wrapper.",
+      "implementation": "./src/migrations/update-20-0-1/use-legacy-cache",
-      "implementation": "./src/migrations/update-17-3-0/update-nxw",
+      "x-repair-skip": true,
       "package": "nx",
-      "name": "19-2-2-update-nx-wrapper"
+      "name": "use-legacy-cache"
     },
     {
-      "version": "19.2.4-beta.0",
+      "version": "20.2.0-beta.5",
-      "description": "Set project name in nx.json explicitly",
+      "description": "Update TypeScript ESLint packages to v8.13.0 if they are already on v8",
-      "implementation": "./src/migrations/update-19-2-4/set-project-name",
+      "implementation": "./src/migrations/update-20-2-0/update-typescript-eslint-v8-13-0",
-      "x-repair-skip": true,
+      "package": "@nx/eslint",
-      "package": "nx",
+      "name": "update-typescript-eslint-v8.13.0"
-      "name": "19-2-4-set-project-name"
+    },
+    {
+      "cli": "nx",
+      "version": "19.6.0-beta.4",
+      "description": "Update ciWebServerCommand to use static serve for the application.",
+      "implementation": "./src/migrations/update-19-6-0/update-ci-webserver-for-static-serve",
+      "package": "@nx/cypress",
+      "name": "update-19-6-0-update-ci-webserver-for-vite"
+    },
+    {
+      "cli": "nx",
+      "version": "20.0.0-beta.5",
+      "description": "replace getJestProjects with getJestProjectsAsync",
+      "implementation": "./src/migrations/update-20-0-0/replace-getJestProjects-with-getJestProjectsAsync",
+      "package": "@nx/jest",
+      "name": "replace-getJestProjects-with-getJestProjectsAsync"
+    },
+    {
+      "cli": "nx",
+      "version": "19.6.0-beta.4",
+      "description": "Ensure Module Federation DTS is turned off by default.",
+      "factory": "./src/migrations/update-19-6-0/turn-off-dts-by-default",
+      "package": "@nx/angular",
+      "name": "update-19-6-0"
+    },
+    {
+      "cli": "nx",
+      "version": "19.6.0-beta.7",
+      "requires": { "@angular/core": ">=18.2.0" },
+      "description": "Update the @angular/cli package version to ~18.2.0.",
+      "factory": "./src/migrations/update-19-6-0/update-angular-cli",
+      "package": "@nx/angular",
+      "name": "update-angular-cli-version-18-2-0"
+    },
+    {
+      "cli": "nx",
+      "version": "19.6.1-beta.0",
+      "description": "Ensure Target Defaults are set correctly for Module Federation.",
+      "factory": "./src/migrations/update-19-6-1/ensure-depends-on-for-mf",
+      "package": "@nx/angular",
+      "name": "update-19-6-1-ensure-module-federation-target-defaults"
+    },
+    {
+      "cli": "nx",
+      "version": "20.2.0-beta.2",
+      "description": "Update the ModuleFederationConfig import use @nx/module-federation.",
+      "factory": "./src/migrations/update-20-2-0/migrate-mf-imports-to-new-package",
+      "package": "@nx/angular",
+      "name": "update-20-2-0-update-module-federation-config-import"
+    },
+    {
+      "cli": "nx",
+      "version": "20.2.0-beta.2",
+      "description": "Update the withModuleFederation import use @nx/module-federation/angular.",
+      "factory": "./src/migrations/update-20-2-0/migrate-with-mf-import-to-new-package",
+      "package": "@nx/angular",
+      "name": "update-20-2-0-update-with-module-federation-import"
+    },
+    {
+      "cli": "nx",
+      "version": "20.2.0-beta.5",
+      "requires": { "@angular/core": ">=19.0.0" },
+      "description": "Update the @angular/cli package version to ~19.0.0.",
+      "factory": "./src/migrations/update-20-2-0/update-angular-cli",
+      "package": "@nx/angular",
+      "name": "update-angular-cli-version-19-0-0"
     },
     {
       "cli": "nx",
-      "version": "19.1.0-beta.6",
+      "version": "20.2.0-beta.5",
-      "description": "Migrate no-extra-semi rules into user config, out of nx extendable configs",
+      "requires": { "@angular/core": ">=19.0.0" },
-      "implementation": "./src/migrations/update-19-1-0-migrate-no-extra-semi/migrate-no-extra-semi",
+      "description": "Add the '@angular/localize/init' polyfill to the 'polyfills' option of targets using esbuild-based executors.",
-      "package": "@nx/eslint-plugin",
+      "factory": "./src/migrations/update-20-2-0/add-localize-polyfill-to-targets",
-      "name": "update-19-1-0-rename-no-extra-semi"
+      "package": "@nx/angular",
+      "name": "add-localize-polyfill-to-targets"
+    },
+    {
+      "cli": "nx",
+      "version": "20.2.0-beta.5",
+      "requires": { "@angular/core": ">=19.0.0" },
+      "description": "Update '@angular/ssr' import paths to use the new '/node' entry point when 'CommonEngine' is detected.",
+      "factory": "./src/migrations/update-20-2-0/update-angular-ssr-imports-to-use-node-entry-point",
+      "package": "@nx/angular",
+      "name": "update-angular-ssr-imports-to-use-node-entry-point"
     },
     {
       "cli": "nx",
-      "version": "19.1.0-beta.2",
+      "version": "20.2.0-beta.6",
-      "requires": { "@angular/core": ">=18.0.0" },
+      "requires": { "@angular/core": ">=19.0.0" },
-      "description": "Update the @angular/cli package version to ~18.0.0.",
+      "description": "Disable the Angular ESLint prefer-standalone rule if not set.",
-      "factory": "./src/migrations/update-19-1-0/update-angular-cli",
+      "factory": "./src/migrations/update-20-2-0/disable-angular-eslint-prefer-standalone",
       "package": "@nx/angular",
-      "name": "update-angular-cli-version-18-0-0"
+      "name": "disable-angular-eslint-prefer-standalone"
     },
     {
       "cli": "nx",
-      "version": "19.2.1-beta.0",
+      "version": "20.2.0-beta.8",
-      "requires": { "@angular-eslint/eslint-plugin": ">=18.0.0" },
+      "requires": { "@angular/core": ">=19.0.0" },
-      "description": "Installs the '@typescript-eslint/utils' package when having installed '@angular-eslint/eslint-plugin' or '@angular-eslint/eslint-plugin-template' with version >=18.0.0.",
+      "description": "Remove Angular ESLint rules that were removed in v19.0.0.",
-      "factory": "./src/migrations/update-19-2-1/add-typescript-eslint-utils",
+      "factory": "./src/migrations/update-20-2-0/remove-angular-eslint-rules",
       "package": "@nx/angular",
-      "name": "add-typescript-eslint-utils"
+      "name": "remove-angular-eslint-rules"
     },
     {
       "cli": "nx",
-      "version": "19.5.0-beta.1",
+      "version": "20.2.0-beta.8",
-      "requires": { "@angular/core": ">=18.1.0" },
+      "requires": { "@angular/core": ">=19.0.0" },
-      "description": "Update the @angular/cli package version to ~18.1.0.",
+      "description": "Remove the deprecated 'tailwindConfig' option from ng-packagr executors. Tailwind CSS configurations located at the project or workspace root will be picked up automatically.",
-      "factory": "./src/migrations/update-19-5-0/update-angular-cli",
+      "factory": "./src/migrations/update-20-2-0/remove-tailwind-config-from-ng-packagr-executors",
       "package": "@nx/angular",
-      "name": "update-angular-cli-version-18-1-0"
+      "name": "remove-tailwind-config-from-ng-packagr-executors"
     },
     {
-      "version": "18.0.0",
+      "version": "19.0.0",
-      "description": "Updates two-way bindings that have an invalid expression to use the longform expression instead.",
+      "description": "Updates non-standalone Directives, Component and Pipes to 'standalone:false' and removes 'standalone:true' from those who are standalone",
-      "factory": "./migrations/invalid-two-way-bindings/bundle",
+      "factory": "./bundles/explicit-standalone-flag#migrate",
       "package": "@angular/core",
-      "name": "invalid-two-way-bindings"
+      "name": "explicit-standalone-flag"
     },
     {
-      "version": "18.0.0",
+      "version": "19.0.0",
-      "description": "Replace deprecated HTTP related modules with provider functions",
+      "description": "Updates ExperimentalPendingTasks to PendingTasks",
-      "factory": "./migrations/http-providers/bundle",
+      "factory": "./bundles/pending-tasks#migrate",
       "package": "@angular/core",
-      "name": "migration-http-providers"
+      "name": "pending-tasks"
     },
     {
-      "version": "18.1.0",
+      "version": "19.0.0",
-      "description": "Updates calls to afterRender with an explicit phase to the new API",
+      "description": "Replaces `APP_INITIALIZER`, `ENVIRONMENT_INITIALIZER` & `PLATFORM_INITIALIZER` respectively with `provideAppInitializer`, `provideEnvironmentInitializer` & `providePlatformInitializer`.",
-      "factory": "./migrations/after-render-phase/bundle",
+      "factory": "./bundles/provide-initializer#migrate",
+      "optional": true,
       "package": "@angular/core",
-      "name": "migration-after-render-phase"
+      "name": "provide-initializer"
     }
   ]
 }

npm/ng-packs/package.json

@@ -46,51 +46,51 @@
   "devDependencies": {
     "@abp/ng.theme.lepton-x": "~4.0.3",
     "@abp/utils": "~9.0.2",
-    "@angular-devkit/build-angular": "~18.1.0",
+    "@angular-devkit/build-angular": "~19.0.0",
-    "@angular-devkit/core": "~18.1.0",
+    "@angular-devkit/core": "~19.0.0",
-    "@angular-devkit/schematics": "~18.1.0",
+    "@angular-devkit/schematics": "~19.0.0",
-    "@angular-devkit/schematics-cli": "~18.1.0",
+    "@angular-devkit/schematics-cli": "~19.0.0",
-    "@angular-eslint/eslint-plugin": "~18.1.0",
+    "@angular-eslint/eslint-plugin": "~19.0.0",
-    "@angular-eslint/eslint-plugin-template": "~18.1.0",
+    "@angular-eslint/eslint-plugin-template": "~19.0.0",
-    "@angular-eslint/template-parser": "~18.1.0",
+    "@angular-eslint/template-parser": "~19.0.0",
-    "@angular/animations": "~18.1.0",
+    "@angular/animations": "~19.0.0",
-    "@angular/cli": "~18.1.0",
+    "@angular/cli": "~19.0.0",
-    "@angular/common": "~18.1.0",
+    "@angular/common": "~19.0.0",
-    "@angular/compiler": "~18.1.0",
+    "@angular/compiler": "~19.0.0",
-    "@angular/compiler-cli": "~18.1.0",
+    "@angular/compiler-cli": "~19.0.0",
-    "@angular/core": "~18.1.0",
+    "@angular/core": "~19.0.0",
-    "@angular/forms": "~18.1.0",
+    "@angular/forms": "~19.0.0",
-    "@angular/language-service": "~18.1.0",
+    "@angular/language-service": "~19.0.0",
-    "@angular/localize": "~18.1.0",
+    "@angular/localize": "~19.0.0",
-    "@angular/platform-browser": "~18.1.0",
+    "@angular/platform-browser": "~19.0.0",
-    "@angular/platform-browser-dynamic": "~18.1.0",
+    "@angular/platform-browser-dynamic": "~19.0.0",
-    "@angular/router": "~18.1.0",
+    "@angular/router": "~19.0.0",
     "@fortawesome/fontawesome-free": "^6.0.0",
-    "@ng-bootstrap/ng-bootstrap": "~17.0.0",
+    "@ng-bootstrap/ng-bootstrap": "~18.0.0-rc.0",
-    "@ngneat/spectator": "^16.0.0",
+    "@ngneat/spectator": "~19.1.0",
     "@ngx-validate/core": "^0.2.0",
-    "@nx/angular": "~19.5.0",
+    "@nx/angular": "~20.2.0",
-    "@nx/cypress": "~19.5.0",
+    "@nx/cypress": "~20.2.0",
-    "@nx/devkit": "~19.5.0",
+    "@nx/devkit": "~20.2.0",
-    "@nx/eslint": "~19.5.0",
+    "@nx/eslint": "~20.2.0",
-    "@nx/eslint-plugin": "~19.5.0",
+    "@nx/eslint-plugin": "~20.2.0",
-    "@nx/jest": "~19.5.0",
+    "@nx/jest": "~20.2.0",
-    "@nx/js": "~19.5.0",
+    "@nx/js": "~20.2.0",
-    "@nx/plugin": "~19.5.0",
+    "@nx/plugin": "~20.2.0",
-    "@nx/workspace": "~19.5.0",
+    "@nx/workspace": "~20.2.0",
     "@popperjs/core": "~2.11.0",
-    "@schematics/angular": "~18.1.0",
+    "@schematics/angular": "~19.0.0",
     "@swc-node/register": "1.9.2",
     "@swc/cli": "0.3.12",
     "@swc/core": "~1.5.0",
     "@swc/helpers": "~0.5.0",
     "@swimlane/ngx-datatable": "^20.0.0",
-    "@types/jest": "29.4.4",
+    "@types/jest": "29.5.14",
     "@types/node": "^20.0.0",
     "@typescript-eslint/eslint-plugin": "7.16.0",
     "@typescript-eslint/parser": "7.16.0",
     "@typescript-eslint/utils": "^7.16.0",
-    "angular-oauth2-oidc": "^17.0.0",
+    "angular-oauth2-oidc": "^19.0.0",
     "autoprefixer": "^10.0.0",
     "bootstrap": "^5.0.0",
     "bootstrap-icons": "^1.0.0",
@@ -104,17 +104,16 @@
     "jest": "^29.0.0",
     "jest-canvas-mock": "^2.0.0",
     "jest-environment-jsdom": "^29.0.0",
-    "jest-preset-angular": "14.1.1",
+    "jest-preset-angular": "14.4.2",
     "jsonc-eslint-parser": "^2.0.0",
     "jsonc-parser": "^2.0.0",
     "just-clone": "^6.0.0",
     "just-compare": "^2.0.0",
     "lerna": "^4.0.0",
     "lint-staged": "^13.0.0",
-    "ng-packagr": "~18.1.0",
+    "ng-packagr": "~19.0.0",
-    "ng-zorro-antd": "^17.0.0",
+    "ng-zorro-antd": "^19.0.0-beta.0",
-    "nx": "~19.5.0",
+    "nx": "~20.2.0",
-    "perfect-scrollbar": "^1.0.0",
     "postcss": "^8.0.0",
     "postcss-import": "14.1.0",
     "postcss-preset-env": "7.5.0",
@@ -128,8 +127,8 @@
     "ts-toolbelt": "^9.0.0",
     "tslib": "^2.0.0",
     "tslint": "~6.1.0",
-    "typescript": "~5.5.0",
+    "typescript": "~5.6.0",
-    "zone.js": "~0.14.0"
+    "zone.js": "~0.15.0"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,html,css,scss}": [

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

@@ -1,56 +1,57 @@
 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();
+  }),
 ];
 
-export function configureRoutes(routes: RoutesService) {
+export function configureRoutes() {
-  return () => {
+  const routes = inject(RoutesService);
-    routes.add([
+  routes.add([
-      {
+    {
-        path: undefined,
+      path: undefined,
-        name: eAccountRouteNames.Account,
+      name: eAccountRouteNames.Account,
-        invisible: true,
+      invisible: true,
-        layout: eLayoutType.account,
+      layout: eLayoutType.account,
-        breadcrumbText: eAccountRouteNames.Account,
+      breadcrumbText: eAccountRouteNames.Account,
-        iconClass: 'bi bi-person-fill-gear',
+      iconClass: 'bi bi-person-fill-gear',
-        order: 1,
+      order: 1,
-      },
+    },
-      {
+    {
-        path: '/account/login',
+      path: '/account/login',
-        name: eAccountRouteNames.Login,
+      name: eAccountRouteNames.Login,
-        parentName: eAccountRouteNames.Account,
+      parentName: eAccountRouteNames.Account,
-        order: 1,
+      order: 1,
-      },
+    },
-      {
+    {
-        path: '/account/register',
+      path: '/account/register',
-        name: eAccountRouteNames.Register,
+      name: eAccountRouteNames.Register,
-        parentName: eAccountRouteNames.Account,
+      parentName: eAccountRouteNames.Account,
-        order: 2,
+      order: 2,
-      },
+    },
-      {
+    {
-        path: '/account/manage',
+      path: '/account/manage',
-        name: eAccountRouteNames.ManageProfile,
+      name: eAccountRouteNames.ManageProfile,
-        parentName: eAccountRouteNames.Account,
+      parentName: eAccountRouteNames.Account,
-        layout: eLayoutType.application,
+      layout: eLayoutType.application,
-        breadcrumbText: 'AbpAccount::Manage',
+      breadcrumbText: 'AbpAccount::Manage',
-        iconClass: 'bi bi-kanban-fill',
+      iconClass: 'bi bi-kanban-fill',
-        order: 3,
+      order: 3,
-      },
+    },
-      {
+    {
-        path: '/account/forgot-password',
+      path: '/account/forgot-password',
-        parentName: eAccountRouteNames.Account,
+      parentName: eAccountRouteNames.Account,
-        name: eAccountRouteNames.ForgotPassword,
+      name: eAccountRouteNames.ForgotPassword,
-        invisible: true,
+      invisible: true,
-      },
+    },
-      {
+    {
-        path: '/account/reset-password',
+      path: '/account/reset-password',
-        parentName: eAccountRouteNames.Account,
+      parentName: eAccountRouteNames.Account,
-        name: eAccountRouteNames.ResetPassword,
+      name: eAccountRouteNames.ResetPassword,
-        invisible: true,
+      invisible: true,
-      },
+    },
-    ]);
+  ]);
-  };
 }

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,19 @@
-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) {
+export function setLanguageToCookie() {
-  return () => {
+  const injector = inject(Injector);
-    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();
-  useFactory: setLanguageToCookie,
+});
-  deps: [Injector],
-  multi: true,
-};

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

@@ -1,4 +1,4 @@
-import { makeEnvironmentProviders, APP_INITIALIZER, Injector, Provider } from '@angular/core';
+import { makeEnvironmentProviders, Provider, inject, provideAppInitializer } from '@angular/core';
 import { TitleStrategy } from '@angular/router';
 import {
   provideHttpClient,
@@ -22,7 +22,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 +104,16 @@ export function provideAbpCore(...features: CoreFeature<CoreFeatureKind>[]) {
         headerName: 'RequestVerificationToken',
       }),
     ),
+    provideAppInitializer(() => {
+      getInitialData();
+      localeInitializer();
+      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

@@ -1,5 +1,5 @@
 import { registerLocaleData } from '@angular/common';
-import { InjectFlags, Injector } from '@angular/core';
+import { inject, Injector } from '@angular/core';
 import { tap, catchError } from 'rxjs/operators';
 import { lastValueFrom, throwError } from 'rxjs';
 import { ABP } from '../models/common';
@@ -16,60 +16,54 @@ 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() {
-  const fn = async () => {
+  const injector = inject(Injector);
-    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) {
+export function localeInitializer() {
-  const fn = () => {
+  const injector = inject(Injector);
-    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,26 +1,22 @@
 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,
+    configureSettingTabs();
-    useFactory: configureSettingTabs,
+  }),
-    deps: [SettingTabsService],
-    multi: true,
-  },
 ];
 
-export function configureSettingTabs(settingtabs: SettingTabsService) {
+export function configureSettingTabs() {
-  return () => {
+  const settingtabs = inject(SettingTabsService);
-    settingtabs.add([
+  settingtabs.add([
-      {
+    {
-        name: eFeatureManagementTabNames.FeatureManagement,
+      name: eFeatureManagementTabNames.FeatureManagement,
-        order: 100,
+      order: 100,
-        requiredPolicy: 'FeatureManagement.ManageHostFeatures',
+      requiredPolicy: 'FeatureManagement.ManageHostFeatures',
-        component: FeatureManagementTabComponent,
+      component: FeatureManagementTabComponent,
-      },
+    },
-    ]);
+  ]);
-  };
 }

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,39 +1,40 @@
 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(() => {
+    configureRoutes();
+  }),
 ];
 
-export function configureRoutes(routesService: RoutesService) {
+export function configureRoutes() {
-  return () => {
+  const routesService = inject(RoutesService);
-    routesService.add([
+  routesService.add([
-      {
+    {
-        path: undefined,
+      path: undefined,
-        name: eIdentityRouteNames.IdentityManagement,
+      name: eIdentityRouteNames.IdentityManagement,
-        parentName: eThemeSharedRouteNames.Administration,
+      parentName: eThemeSharedRouteNames.Administration,
-        requiredPolicy: eIdentityPolicyNames.IdentityManagement,
+      requiredPolicy: eIdentityPolicyNames.IdentityManagement,
-        iconClass: 'fa fa-id-card-o',
+      iconClass: 'fa fa-id-card-o',
-        layout: eLayoutType.application,
+      layout: eLayoutType.application,
-        order: 1,
+      order: 1,
-      },
+    },
-      {
+    {
-        path: '/identity/roles',
+      path: '/identity/roles',
-        name: eIdentityRouteNames.Roles,
+      name: eIdentityRouteNames.Roles,
-        parentName: eIdentityRouteNames.IdentityManagement,
+      parentName: eIdentityRouteNames.IdentityManagement,
-        requiredPolicy: eIdentityPolicyNames.Roles,
+      requiredPolicy: eIdentityPolicyNames.Roles,
-        order: 1,
+      order: 1,
-      },
+    },
-      {
+    {
-        path: '/identity/users',
+      path: '/identity/users',
-        name: eIdentityRouteNames.Users,
+      name: eIdentityRouteNames.Users,
-        parentName: eIdentityRouteNames.IdentityManagement,
+      parentName: eIdentityRouteNames.IdentityManagement,
-        requiredPolicy: eIdentityPolicyNames.Users,
+      requiredPolicy: eIdentityPolicyNames.Users,
-        order: 2,
+      order: 2,
-      },
+    },
-    ]);
+  ]);
-  };
 }

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

@@ -7,9 +7,8 @@ import {
   CHECK_AUTHENTICATION_STATE_FN_KEY,
   AbpLocalStorageService,
   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 +50,9 @@ export function provideAbpOAuth() {
       multi: true,
     },
     NavigateToManageProfileProvider,
-    {
+    provideAppInitializer(() => {
-      provide: APP_INITIALIZER,
+      inject(OAuthConfigurationHandler);
-      multi: true,
+    }),
-      deps: [OAuthConfigurationHandler],
-      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/schematics/package.json

@@ -4,16 +4,16 @@
   "author": "",
   "schematics": "./collection.json",
   "dependencies": {
-    "@angular-devkit/core": "~18.1.0",
+    "@angular-devkit/core": "~19.0.0",
-    "@angular-devkit/schematics": "~18.1.0",
+    "@angular-devkit/schematics": "~19.0.0",
-    "@angular/cli": "~18.1.0",
+    "@angular/cli": "~19.0.0",
     "got": "^11.5.2",
     "jsonc-parser": "^2.3.0",
     "should-quote": "^1.0.0",
-    "typescript": "5.0.4"
+    "typescript": "~5.6.0"
   },
   "devDependencies": {
-    "@schematics/angular": "~18.1.0",
+    "@schematics/angular": "~19.0.0",
     "@types/jest": "29.4.4",
     "@types/node": "20.2.5",
     "jest": "29.4.3",

npm/ng-packs/packages/schematics/src/commands/create-lib/index.ts

@@ -88,7 +88,11 @@ async function resolvePackagesDirFromAngularJson(host: Tree) {
 
 function readFirstLibInAngularJson(workspace: WorkspaceDefinition): ProjectDefinition | undefined {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  return Array.from(workspace.projects.values()).find(value => isLibrary(value));
+  const library = <ProjectDefinition | undefined>(
+    Array.from(workspace.projects.values()).find((value: ProjectDefinition) => isLibrary(value))
+  );
+
+  return library;
 }
 
 async function createLibFromModuleTemplate(tree: Tree, options: GenerateLibSchema) {

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 { ConfigStateService, featuresFactory } 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,24 +1,23 @@
-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';
 import { Observable } from 'rxjs';
 
-export function configureRoutes(routesService: RoutesService) {
+export function configureRoutes() {
-  return () => {
+  const routesService = inject(RoutesService);
-    routesService.add([
+  routesService.add([
-      {
+    {
-        name: eSettingManagementRouteNames.Settings,
+      name: eSettingManagementRouteNames.Settings,
-        path: '/setting-management',
+      path: '/setting-management',
-        parentName: eThemeSharedRouteNames.Administration,
+      parentName: eThemeSharedRouteNames.Administration,
-        layout: eLayoutType.application,
+      layout: eLayoutType.application,
-        order: 100,
+      order: 100,
-        iconClass: 'fa fa-cog',
+      iconClass: 'fa fa-cog',
-      },
+    },
-    ]);
+  ]);
-  };
 }
 
 export const SETTING_MANAGEMENT_HAS_SETTING = new InjectionToken<Observable<boolean>>(
@@ -35,11 +34,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();
-    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,26 +1,22 @@
-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();
-    useFactory: configureSettingTabs,
+  }),
-    deps: [SettingTabsService],
-    multi: true,
-  },
 ];
 
-export function configureSettingTabs(settingTabs: SettingTabsService) {
+export function configureSettingTabs() {
-  return () => {
+  const settingTabs = inject(SettingTabsService);
-    settingTabs.add([
+  settingTabs.add([
-      {
+    {
-        name: eSettingManamagementSettingTabNames.EmailSettingGroup,
+      name: eSettingManamagementSettingTabNames.EmailSettingGroup,
-        order: 100,
+      order: 100,
-        requiredPolicy: 'SettingManagement.Emailing',
+      requiredPolicy: 'SettingManagement.Emailing',
-        component: EmailSettingGroupComponent,
+      component: EmailSettingGroupComponent,
-      },
+    },
-    ]);
+  ]);
-  };
 }

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,21 @@ import { SETTING_MANAGEMENT_ROUTE_VISIBILITY } from './features.token';
 import { eSettingManagementRouteNames } from '../enums';
 
 export const SETTING_MANAGEMENT_VISIBLE_PROVIDERS = [
-  {
+  provideAppInitializer(() => {
-    provide: APP_INITIALIZER,
+    setSettingManagementVisibility();
-    useFactory: setSettingManagementVisibility,
+  }),
-    deps: [Injector],
-    multi: true,
-  },
 ];
 
-export function setSettingManagementVisibility(injector: Injector) {
+export function setSettingManagementVisibility() {
-  return () => {
+  const injector = inject(Injector);
-    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,32 +1,33 @@
 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(() => {
+    configureRoutes();
+  }),
 ];
 
-export function configureRoutes(routes: RoutesService) {
+export function configureRoutes() {
-  return () => {
+  const routes = inject(RoutesService);
-    routes.add([
+  routes.add([
-      {
+    {
-        path: undefined,
+      path: undefined,
-        name: eTenantManagementRouteNames.TenantManagement,
+      name: eTenantManagementRouteNames.TenantManagement,
-        parentName: eThemeSharedRouteNames.Administration,
+      parentName: eThemeSharedRouteNames.Administration,
-        requiredPolicy: eTenantManagementPolicyNames.TenantManagement,
+      requiredPolicy: eTenantManagementPolicyNames.TenantManagement,
-        layout: eLayoutType.application,
+      layout: eLayoutType.application,
-        iconClass: 'fa fa-users',
+      iconClass: 'fa fa-users',
-        order: 2,
+      order: 2,
-      },
+    },
-      {
+    {
-        path: '/tenant-management/tenants',
+      path: '/tenant-management/tenants',
-        name: eTenantManagementRouteNames.Tenants,
+      name: eTenantManagementRouteNames.Tenants,
-        parentName: eTenantManagementRouteNames.TenantManagement,
+      parentName: eTenantManagementRouteNames.TenantManagement,
-        requiredPolicy: eTenantManagementPolicyNames.Tenants,
+      requiredPolicy: eTenantManagementPolicyNames.Tenants,
-        order: 1,
+      order: 1,
-      },
+    },
-    ]);
+  ]);
-  };
 }

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

@@ -1,7 +1,8 @@
 import { NavItem, NavItemsService } from '@abp/ng.theme.shared';
-import { Component, Input, TrackByFunction } from '@angular/core';
+import { Component, 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,31 +1,27 @@
 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,
+    configureNavItems();
-    useFactory: configureNavItems,
+  }),
-    deps: [NavItemsService],
-    multi: true,
-  },
 ];
 
-export function configureNavItems(navItems: NavItemsService) {
+export function configureNavItems() {
-  return () => {
+  const navItems = inject(NavItemsService);
-    navItems.addItems([
+  navItems.addItems([
-      {
+    {
-        id: eThemeBasicComponents.Languages,
+      id: eThemeBasicComponents.Languages,
-        order: 100,
+      order: 100,
-        component: LanguagesComponent,
+      component: LanguagesComponent,
-      },
+    },
-      {
+    {
-        id: eThemeBasicComponents.CurrentUser,
+      id: eThemeBasicComponents.CurrentUser,
-        order: 100,
+      order: 100,
-        component: CurrentUserComponent,
+      component: CurrentUserComponent,
-      },
+    },
-    ]);
+  ]);
-  };
 }

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,8 @@ export function provideThemeBasicConfig() {
       useValue: 'is-invalid',
     },
     LazyStyleHandler,
-    {
+    provideAppInitializer(() => {
-      provide: APP_INITIALIZER,
+      inject(LazyStyleHandler);
-      useFactory: noop,
+    }),
-      multi: true,
-      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

@@ -1,8 +1,9 @@
 import { AbstractNgModelComponent } from '@abp/ng.core';
-import { Component, EventEmitter, forwardRef, Injector, Input, Output } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
 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

@@ -1,8 +1,9 @@
 import { AbstractNgModelComponent } from '@abp/ng.core';
-import { Component, EventEmitter, forwardRef, Injector, Input, Output } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
 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();
   }
-}
+}