refactor : migrate theme-basic package to inject() DI

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component } from '@angular/core';
+import { AfterViewInit, Component, inject } from '@angular/core';
 import { eLayoutType, ReplaceableTemplateDirective, SubscriptionService } from '@abp/ng.core';
 import { LayoutService } from '../../services/layout.service';
 import { CommonModule } from '@angular/common';
@@ -25,13 +25,13 @@ import { RouterModule } from '@angular/router';
   ],
 })
 export class AccountLayoutComponent implements AfterViewInit {
+  service = inject(LayoutService);
+
   // required for dynamic component
   static type = eLayoutType.account;
 
   authWrapperKey = 'Account.AuthWrapperComponent';
 
-  constructor(public service: LayoutService) {}
-
   ngAfterViewInit() {
     this.service.subscribeWindowSize();
   }

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

@@ -1,15 +1,15 @@
-import { AuthWrapperService } from '@abp/ng.account.core';
+import { AuthWrapperService } from '@abp/ng.account.core';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core';
+import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core';
-import { TenantBoxComponent } from '../tenant-box/tenant-box.component';
+import { TenantBoxComponent } from '../tenant-box/tenant-box.component';
+
+@Component({
+  selector: 'abp-auth-wrapper',
+  templateUrl: './auth-wrapper.component.html',
+  providers: [AuthWrapperService],
+  imports: [CommonModule, TenantBoxComponent, ReplaceableTemplateDirective, LocalizationPipe],
+})
+export class AuthWrapperComponent {
  service = inject(AuthWrapperService);
 
-@Component({
+}
-  selector: 'abp-auth-wrapper',
-  templateUrl: './auth-wrapper.component.html',
-  providers: [AuthWrapperService],
-  imports: [CommonModule, TenantBoxComponent, ReplaceableTemplateDirective, LocalizationPipe],
-})
-export class AuthWrapperComponent {
-  constructor(public service: AuthWrapperService) {}
-}

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

@@ -1,23 +1,23 @@
-import { TenantBoxService } from '@abp/ng.account.core';
+import { TenantBoxService } from '@abp/ng.account.core';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { LocalizationPipe } from '@abp/ng.core';
+import { LocalizationPipe } from '@abp/ng.core';
-import { ButtonComponent, ModalCloseDirective, ModalComponent } from '@abp/ng.theme.shared';
+import { ButtonComponent, ModalCloseDirective, ModalComponent } from '@abp/ng.theme.shared';
-import { FormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'abp-tenant-box',
+  templateUrl: './tenant-box.component.html',
+  providers: [TenantBoxService],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ModalComponent,
+    LocalizationPipe,
+    ButtonComponent,
+    ModalCloseDirective,
+  ],
+})
+export class TenantBoxComponent {
  service = inject(TenantBoxService);
 
-@Component({
+}
-  selector: 'abp-tenant-box',
-  templateUrl: './tenant-box.component.html',
-  providers: [TenantBoxService],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ModalComponent,
-    LocalizationPipe,
-    ButtonComponent,
-    ModalCloseDirective,
-  ],
-})
-export class TenantBoxComponent {
-  constructor(public service: TenantBoxService) {}
-}

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

@@ -1,5 +1,5 @@
 import { ApplicationInfo, EnvironmentService } from '@abp/ng.core';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
@@ -16,9 +16,9 @@ import { CommonModule } from '@angular/common';
   imports: [CommonModule],
 })
 export class LogoComponent {
+  private environment = inject(EnvironmentService);
+
   get appInfo(): ApplicationInfo {
     return this.environment.getEnvironment().application;
   }
-
-  constructor(private environment: EnvironmentService) {}
 }

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

@@ -9,7 +9,7 @@ import {
   ToInjectorPipe,
 } from '@abp/ng.core';
 import { AbpVisibleDirective, UserMenu, UserMenuService } from '@abp/ng.theme.shared';
-import { Component, Inject, TrackByFunction } from '@angular/core';
+import { Component, TrackByFunction, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
@@ -27,6 +27,12 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
   ],
 })
 export class CurrentUserComponent {
+  readonly navigateToManageProfile = inject(NAVIGATE_TO_MANAGE_PROFILE);
+  readonly userMenu = inject(UserMenuService);
+  private authService = inject(AuthService);
+  private configState = inject(ConfigStateService);
+  private sessionState = inject(SessionStateService);
+
   currentUser$: Observable<CurrentUserDto> = this.configState.getOne$('currentUser');
   selectedTenant$ = this.sessionState.getTenant$();
 
@@ -36,14 +42,6 @@ export class CurrentUserComponent {
     return window.innerWidth < 992;
   }
 
-  constructor(
-    @Inject(NAVIGATE_TO_MANAGE_PROFILE) public readonly navigateToManageProfile: () => void,
-    public readonly userMenu: UserMenuService,
-    private authService: AuthService,
-    private configState: ConfigStateService,
-    private sessionState: SessionStateService,
-  ) {}
-
   navigateToLogin() {
     this.authService.navigateToLogin();
   }

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

@@ -1,5 +1,5 @@
 import { ConfigStateService, LanguageInfo, SessionStateService } from '@abp/ng.core';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
@@ -42,6 +42,9 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
   imports: [CommonModule, NgbDropdownModule],
 })
 export class LanguagesComponent {
+  private sessionState = inject(SessionStateService);
+  private configState = inject(ConfigStateService);
+
   get smallScreen(): boolean {
     return window.innerWidth < 992;
   }
@@ -69,11 +72,6 @@ export class LanguagesComponent {
     return this.sessionState.getLanguage();
   }
 
-  constructor(
-    private sessionState: SessionStateService,
-    private configState: ConfigStateService,
-  ) {}
-
   onChangeLang(cultureName: string) {
     this.sessionState.setLanguage(cultureName);
   }

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

@@ -1,5 +1,5 @@
 import { AbpVisibleDirective, NavItem, NavItemsService } from '@abp/ng.theme.shared';
-import { Component, TrackByFunction } from '@angular/core';
+import { Component, TrackByFunction, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PermissionDirective, ToInjectorPipe } from '@abp/ng.core';
 
@@ -9,7 +9,7 @@ import { PermissionDirective, ToInjectorPipe } from '@abp/ng.core';
   imports: [CommonModule, AbpVisibleDirective, PermissionDirective, ToInjectorPipe],
 })
 export class NavItemsComponent {
-  trackByFn: TrackByFunction<NavItem> = (_, element) => element.id;
+  readonly navItems = inject(NavItemsService);
 
-  constructor(public readonly navItems: NavItemsService) {}
+  trackByFn: TrackByFunction<NavItem> = (_, element) => element.id;
 }

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

@@ -1,14 +1,14 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation, inject } from '@angular/core';
-import { PageAlertService } from '@abp/ng.theme.shared';
+import { PageAlertService } from '@abp/ng.theme.shared';
-import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { LocalizationPipe, SafeHtmlPipe } from '@abp/ng.core';
+import { LocalizationPipe, SafeHtmlPipe } from '@abp/ng.core';
+
+@Component({
+  selector: 'abp-page-alert-container',
+  templateUrl: './page-alert-container.component.html',
+  encapsulation: ViewEncapsulation.None,
+  imports: [CommonModule, LocalizationPipe, SafeHtmlPipe],
+})
+export class PageAlertContainerComponent {
  service = inject(PageAlertService);
 
-@Component({
+}
-  selector: 'abp-page-alert-container',
-  templateUrl: './page-alert-container.component.html',
-  encapsulation: ViewEncapsulation.None,
-  imports: [CommonModule, LocalizationPipe, SafeHtmlPipe],
-})
-export class PageAlertContainerComponent {
-  constructor(public service: PageAlertService) {}
-}

npm/ng-packs/packages/theme-basic/src/lib/handlers/lazy-style.handler.ts

@@ -1,6 +1,6 @@
 import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core';
 import { DocumentDirHandlerService, LocaleDirection } from '@abp/ng.theme.shared';
-import { Injectable, Injector } from '@angular/core';
+import { Injectable, Injector, inject } from '@angular/core';
 import { LAZY_STYLES } from '../tokens/lazy-styles.token';
 export const BOOTSTRAP = 'bootstrap-{{dir}}.min.css';
 
@@ -23,7 +23,9 @@ export class LazyStyleHandler {
     return this._dir;
   }
 
-  constructor(injector: Injector) {
+  constructor() {
+    const injector = inject(Injector);
+
     this.setStyles(injector);
     this.setLazyLoad(injector);
     this.listenToDirectionChanges(injector);

npm/ng-packs/packages/theme-basic/src/lib/services/layout.service.ts

@@ -1,11 +1,14 @@
 import {RouterEvents, SubscriptionService} from '@abp/ng.core';
-import { ChangeDetectorRef, Injectable } from '@angular/core';
+import { ChangeDetectorRef, Injectable, inject } from '@angular/core';
 import { fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { eThemeBasicComponents } from '../enums';
 
 @Injectable()
 export class LayoutService {
+  private subscription = inject(SubscriptionService);
+  private cdRef = inject(ChangeDetectorRef);
+
   isCollapsed = true;
 
   smallScreen!: boolean; // do not set true or false
@@ -16,9 +19,10 @@ export class LayoutService {
 
   navItemsComponentKey = eThemeBasicComponents.NavItems;
 
-  constructor(private subscription: SubscriptionService,
+  constructor() {
-              private cdRef: ChangeDetectorRef,
+    const subscription = this.subscription;
-              routerEvents:RouterEvents) {
+    const routerEvents = inject(RouterEvents);
+
     subscription.addOne(routerEvents.getNavigationEvents("End"),() => {
       this.isCollapsed = true;
     })