From 2e054d6fb86f7d407f41ed9d8740508bd7eb5383 Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Wed, 16 Jul 2025 20:57:47 +0300 Subject: [PATCH] Refactor components to use standalone Angular imports on theme-basic package --- .../account-layout/account-layout.component.ts | 8 ++++---- .../auth-wrapper/auth-wrapper.component.ts | 3 +-- .../account-layout/tenant-box/tenant-box.component.ts | 6 ++---- .../application-layout/application-layout.component.ts | 8 ++++---- .../components/empty-layout/empty-layout.component.ts | 4 ++-- .../src/lib/components/logo/logo.component.ts | 3 +-- .../lib/components/nav-items/current-user.component.ts | 4 ++-- .../lib/components/nav-items/languages.component.ts | 4 ++-- .../lib/components/nav-items/nav-items.component.ts | 4 ++-- .../page-alert-container.component.ts | 4 ++-- .../src/lib/components/routes/routes.component.ts | 10 ++++++---- .../validation-error/validation-error.component.ts | 3 +-- 12 files changed, 29 insertions(+), 32 deletions(-) diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts index e5b68e8901..04272609d9 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts @@ -1,27 +1,27 @@ import { AfterViewInit, Component } from '@angular/core'; import { eLayoutType, ReplaceableTemplateDirective, SubscriptionService } from '@abp/ng.core'; import { LayoutService } from '../../services/layout.service'; -import { CommonModule } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; import { LogoComponent } from '../logo/logo.component'; import { RoutesComponent } from '../routes/routes.component'; import { NavItemsComponent } from '../nav-items/nav-items.component'; import { AuthWrapperComponent } from './auth-wrapper/auth-wrapper.component'; import { PageAlertContainerComponent } from '../page-alert-container/page-alert-container.component'; -import { RouterModule } from '@angular/router'; +import { RouterOutlet } from '@angular/router'; @Component({ selector: 'abp-layout-account', templateUrl: './account-layout.component.html', providers: [LayoutService, SubscriptionService], imports: [ - CommonModule, + NgTemplateOutlet, LogoComponent, RoutesComponent, NavItemsComponent, AuthWrapperComponent, PageAlertContainerComponent, ReplaceableTemplateDirective, - RouterModule, + RouterOutlet, ], }) export class AccountLayoutComponent implements AfterViewInit { diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts index 5094551ed2..f1c0eec47b 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts @@ -1,6 +1,5 @@ import { AuthWrapperService } from '@abp/ng.account.core'; import { Component } from '@angular/core'; -import { CommonModule } from '@angular/common'; import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core'; import { TenantBoxComponent } from '../tenant-box/tenant-box.component'; @@ -8,7 +7,7 @@ import { TenantBoxComponent } from '../tenant-box/tenant-box.component'; selector: 'abp-auth-wrapper', templateUrl: './auth-wrapper.component.html', providers: [AuthWrapperService], - imports: [CommonModule, TenantBoxComponent, ReplaceableTemplateDirective, LocalizationPipe], + imports: [TenantBoxComponent, ReplaceableTemplateDirective, LocalizationPipe], }) export class AuthWrapperComponent { constructor(public service: AuthWrapperService) {} diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts index 4aadd1effb..156904d855 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts @@ -1,17 +1,15 @@ import { TenantBoxService } from '@abp/ng.account.core'; import { Component } from '@angular/core'; -import { CommonModule } from '@angular/common'; import { LocalizationPipe } from '@abp/ng.core'; import { ButtonComponent, ModalCloseDirective, ModalComponent } from '@abp/ng.theme.shared'; -import { FormsModule } from '@angular/forms'; +import { NgModel } from '@angular/forms'; @Component({ selector: 'abp-tenant-box', templateUrl: './tenant-box.component.html', providers: [TenantBoxService], imports: [ - CommonModule, - FormsModule, + NgModel, ModalComponent, LocalizationPipe, ButtonComponent, diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts index 2cfeb978b2..0cebc476a5 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts @@ -2,8 +2,8 @@ import { eLayoutType, ReplaceableTemplateDirective, SubscriptionService } from ' import { collapseWithMargin, slideFromBottom } from '@abp/ng.theme.shared'; import { AfterViewInit, Component, inject } from '@angular/core'; import { LayoutService } from '../../services/layout.service'; -import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; +import { NgTemplateOutlet } from '@angular/common'; +import { RouterOutlet } from '@angular/router'; import { LogoComponent } from '../logo/logo.component'; import { PageAlertContainerComponent } from '../page-alert-container/page-alert-container.component'; import { RoutesComponent } from '../routes/routes.component'; @@ -15,13 +15,13 @@ import { NavItemsComponent } from '../nav-items/nav-items.component'; animations: [slideFromBottom, collapseWithMargin], providers: [LayoutService, SubscriptionService], imports: [ - CommonModule, + NgTemplateOutlet, LogoComponent, PageAlertContainerComponent, RoutesComponent, NavItemsComponent, ReplaceableTemplateDirective, - RouterModule, + RouterOutlet, ], }) export class ApplicationLayoutComponent implements AfterViewInit { diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts index 16cd0951e5..2153ecf2c5 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; import { eLayoutType } from '@abp/ng.core'; -import { RouterModule } from '@angular/router'; +import { RouterOutlet } from '@angular/router'; @Component({ selector: 'abp-layout-empty', template: ` `, - imports: [RouterModule], + imports: [RouterOutlet], }) export class EmptyLayoutComponent { static type = eLayoutType.empty; diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts index fcaeacdf1a..5f694d5887 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts @@ -1,6 +1,5 @@ import { ApplicationInfo, EnvironmentService } from '@abp/ng.core'; import { Component } from '@angular/core'; -import { CommonModule } from '@angular/common'; @Component({ selector: 'abp-logo', @@ -13,7 +12,7 @@ import { CommonModule } from '@angular/common'; } `, - imports: [CommonModule], + imports: [], }) export class LogoComponent { get appInfo(): ApplicationInfo { diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts index 40f2d4a342..51cd4de8d0 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts @@ -11,14 +11,14 @@ import { import { AbpVisibleDirective, UserMenu, UserMenuService } from '@abp/ng.theme.shared'; import { Component, Inject, TrackByFunction } from '@angular/core'; import { Observable } from 'rxjs'; -import { CommonModule } from '@angular/common'; +import { NgClass } from '@angular/common'; import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'abp-current-user', templateUrl: './current-user.component.html', imports: [ - CommonModule, + NgClass, NgbDropdownModule, AbpVisibleDirective, PermissionDirective, diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts index 67d09d300b..8177b013a1 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts @@ -2,7 +2,7 @@ import { ConfigStateService, LanguageInfo, SessionStateService } from '@abp/ng.c import { Component } from '@angular/core'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; -import { CommonModule } from '@angular/common'; +import { NgClass } from '@angular/common'; import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; @Component({ @@ -39,7 +39,7 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; } `, - imports: [CommonModule, NgbDropdownModule], + imports: [NgClass, NgbDropdownModule], }) export class LanguagesComponent { get smallScreen(): boolean { diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts index d2e4a516b4..6d479501d5 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts @@ -1,12 +1,12 @@ import { AbpVisibleDirective, NavItem, NavItemsService } from '@abp/ng.theme.shared'; import { Component, TrackByFunction } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import { NgComponentOutlet } from '@angular/common'; import { PermissionDirective, ToInjectorPipe } from '@abp/ng.core'; @Component({ selector: 'abp-nav-items', templateUrl: 'nav-items.component.html', - imports: [CommonModule, AbpVisibleDirective, PermissionDirective, ToInjectorPipe], + imports: [NgComponentOutlet, AbpVisibleDirective, PermissionDirective, ToInjectorPipe], }) export class NavItemsComponent { trackByFn: TrackByFunction = (_, element) => element.id; diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts index b28cd6c81b..545ec4eb49 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts @@ -1,13 +1,13 @@ import { Component, ViewEncapsulation } from '@angular/core'; import { PageAlertService } from '@abp/ng.theme.shared'; -import { CommonModule } from '@angular/common'; +import { NgClass } from '@angular/common'; 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], + imports: [NgClass, LocalizationPipe, SafeHtmlPipe], }) export class PageAlertContainerComponent { constructor(public service: PageAlertService) {} diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts index 5d91c660da..5bc56ee765 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts @@ -16,17 +16,19 @@ import { TrackByFunction, ViewChildren, } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import { NgTemplateOutlet, NgClass, AsyncPipe } from '@angular/common'; import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; -import { RouterModule } from '@angular/router'; +import { RouterLink } from '@angular/router'; import { EllipsisDirective } from '@abp/ng.theme.shared'; @Component({ selector: 'abp-routes', templateUrl: 'routes.component.html', imports: [ - CommonModule, - RouterModule, + NgTemplateOutlet, + NgClass, + AsyncPipe, + RouterLink, NgbDropdownModule, LazyLocalizationPipe, PermissionDirective, diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/validation-error/validation-error.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/validation-error/validation-error.component.ts index bfa9d6cab2..213ebb6306 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/validation-error/validation-error.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/validation-error/validation-error.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; import { Validation, ValidationErrorComponent as ErrorComponent } from '@ngx-validate/core'; import { LocalizationPipe } from '@abp/ng.core'; @@ -14,7 +13,7 @@ import { LocalizationPipe } from '@abp/ng.core'; `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, - imports: [CommonModule, LocalizationPipe], + imports: [LocalizationPipe], }) export class ValidationErrorComponent extends ErrorComponent { get abpErrors(): (Validation.Error & { interpoliteParams?: string[] })[] {