diff --git a/npm/ng-packs/apps/dev-app/src/app/app.config.ts b/npm/ng-packs/apps/dev-app/src/app/app.config.ts
index db2f0d7b65..fbd3aae58b 100644
--- a/npm/ng-packs/apps/dev-app/src/app/app.config.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/app.config.ts
@@ -14,6 +14,8 @@ import { provideAccountConfig } from '@abp/ng.account/config';
 import { provideIdentityConfig } from '@abp/ng.identity/config';
 import { provideTenantManagementConfig } from '@abp/ng.tenant-management/config';
 import { provideFeatureManagementConfig } from '@abp/ng.feature-management';
+import { provideThemeBasicConfig } from '@abp/ng.theme.basic';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -35,6 +37,8 @@ export const appConfig: ApplicationConfig = {
     provideTenantManagementConfig(),
     provideFeatureManagementConfig(),
     provideZoneChangeDetection({ eventCoalescing: true }),
+    provideThemeBasicConfig(),
+    provideAnimations(),
     provideRouter(appRoutes),
     provideClientHydration(withEventReplay()),
   ],
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 e283279db5..35b2056a12 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
@@ -6,7 +6,7 @@ import {
   NAVIGATE_TO_MANAGE_PROFILE,
   SessionStateService,
 } from '@abp/ng.core';
-import { UserMenu, UserMenuService } from '@abp/ng.theme.shared';
+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';
@@ -15,7 +15,7 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 @Component({
   selector: 'abp-current-user',
   templateUrl: './current-user.component.html',
-  imports: [CommonModule, CoreModule, NgbDropdownModule],
+  imports: [CommonModule, CoreModule, NgbDropdownModule, AbpVisibleDirective],
 })
 export class CurrentUserComponent {
   currentUser$: Observable<CurrentUserDto> = this.configState.getOne$('currentUser');
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 f9ae0625f7..9719f3698c 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,4 +1,4 @@
-import { NavItem, NavItemsService } from '@abp/ng.theme.shared';
+import { AbpVisibleDirective, NavItem, NavItemsService } from '@abp/ng.theme.shared';
 import { Component, TrackByFunction } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CoreModule } from '@abp/ng.core';
@@ -6,7 +6,7 @@ import { CoreModule } from '@abp/ng.core';
 @Component({
   selector: 'abp-nav-items',
   templateUrl: 'nav-items.component.html',
-  imports: [CommonModule, CoreModule],
+  imports: [CommonModule, CoreModule, AbpVisibleDirective],
 })
 export class NavItemsComponent {
   trackByFn: TrackByFunction<NavItem> = (_, element) => element.id;