diff --git a/packages/abc/count-down/count-down.component.ts b/packages/abc/count-down/count-down.component.ts
index fcac7c55aa..f454a70939 100644
--- a/packages/abc/count-down/count-down.component.ts
+++ b/packages/abc/count-down/count-down.component.ts
@@ -19,7 +19,9 @@ import { CountdownComponent, CountdownConfig, CountdownEvent } from 'ngx-countdo
   }`,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [CountdownComponent]
 })
 export class CountDownComponent {
   @ViewChild('cd', { static: false }) readonly instance!: CountdownComponent;
diff --git a/packages/abc/count-down/count-down.module.ts b/packages/abc/count-down/count-down.module.ts
index 8072d7fd98..8696780dc4 100644
--- a/packages/abc/count-down/count-down.module.ts
+++ b/packages/abc/count-down/count-down.module.ts
@@ -8,8 +8,7 @@ import { CountDownComponent } from './count-down.component';
 const COMPONENTS = [CountDownComponent];
 
 @NgModule({
-  imports: [CommonModule, CountdownModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, CountdownModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class CountDownModule {}
diff --git a/packages/abc/count-down/demo/accuracy.md b/packages/abc/count-down/demo/accuracy.md
index af40cadd51..9ae461471a 100644
--- a/packages/abc/count-down/demo/accuracy.md
+++ b/packages/abc/count-down/demo/accuracy.md
@@ -18,13 +18,13 @@ import { Component } from '@angular/core';
 
 import { CountdownConfig } from 'ngx-countdown';
 
-import { CountDownModule } from '@delon/abc/count-down';
+import { CountDownComponent } from '@delon/abc/count-down';
 
 @Component({
   selector: 'app-demo',
   template: ` <count-down [config]="config" /> `,
   standalone: true,
-  imports: [CountDownModule]
+  imports: [CountDownComponent]
 })
 export class DemoComponent {
   config: CountdownConfig = {
diff --git a/packages/abc/count-down/demo/simple.md b/packages/abc/count-down/demo/simple.md
index ecbaff31f5..8823805be6 100644
--- a/packages/abc/count-down/demo/simple.md
+++ b/packages/abc/count-down/demo/simple.md
@@ -18,7 +18,7 @@ import { Component, inject } from '@angular/core';
 
 import { CountdownEvent } from 'ngx-countdown';
 
-import { CountDownModule } from '@delon/abc/count-down';
+import { CountDownComponent } from '@delon/abc/count-down';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
@@ -32,7 +32,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';
     <button nz-button (click)="cd.instance.resume()">Resume</button>
   `,
   standalone: true,
-  imports: [CountDownModule, NzButtonModule]
+  imports: [CountDownComponent, NzButtonModule]
 })
 export class DemoComponent {
   private readonly msg = inject(NzMessageService);
diff --git a/packages/abc/date-picker/date-picker.module.ts b/packages/abc/date-picker/date-picker.module.ts
index 3837441b63..e2bc8ad5e3 100644
--- a/packages/abc/date-picker/date-picker.module.ts
+++ b/packages/abc/date-picker/date-picker.module.ts
@@ -10,8 +10,7 @@ import { RangePickerDirective } from './range.directive';
 const COMPONENTS = [RangePickerDirective, RangePickerShortcutTplComponent];
 
 @NgModule({
-  imports: [CommonModule, FormsModule, NzDatePickerModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, FormsModule, NzDatePickerModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class DatePickerModule {}
diff --git a/packages/abc/date-picker/demo/basic.md b/packages/abc/date-picker/demo/basic.md
index 0958c3bbab..9e562c2e8b 100644
--- a/packages/abc/date-picker/demo/basic.md
+++ b/packages/abc/date-picker/demo/basic.md
@@ -18,7 +18,7 @@ import { JsonPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { DatePickerModule } from '@delon/abc/date-picker';
+import { RangePickerDirective } from '@delon/abc/date-picker';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 
 @Component({
@@ -28,7 +28,7 @@ import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
     <nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end" />
   `,
   standalone: true,
-  imports: [JsonPipe, FormsModule, NzDatePickerModule, DatePickerModule]
+  imports: [JsonPipe, FormsModule, NzDatePickerModule, RangePickerDirective]
 })
 export class DemoComponent {
   i: { start?: Date; end?: Date } = {};
diff --git a/packages/abc/date-picker/demo/shortcut.md b/packages/abc/date-picker/demo/shortcut.md
index 3ff0b3d61d..d861c318bf 100644
--- a/packages/abc/date-picker/demo/shortcut.md
+++ b/packages/abc/date-picker/demo/shortcut.md
@@ -18,7 +18,7 @@ import { JsonPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { DatePickerModule } from '@delon/abc/date-picker';
+import { RangePickerDirective } from '@delon/abc/date-picker';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 
 @Component({
@@ -28,7 +28,7 @@ import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
     <nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end" shortcut />
   `,
   standalone: true,
-  imports: [JsonPipe, FormsModule, NzDatePickerModule, DatePickerModule]
+  imports: [JsonPipe, FormsModule, NzDatePickerModule, RangePickerDirective]
 })
 export class DemoComponent {
   i: { start?: Date; end?: Date } = {};
diff --git a/packages/abc/date-picker/range-shortcut.component.ts b/packages/abc/date-picker/range-shortcut.component.ts
index 414131d656..7d503fde8b 100644
--- a/packages/abc/date-picker/range-shortcut.component.ts
+++ b/packages/abc/date-picker/range-shortcut.component.ts
@@ -7,14 +7,15 @@ import { AlainDateRangePickerShortcutItem } from '@delon/util/config';
   template: `
     <ng-template #tpl>
       @for (i of list; track $index) {
-        <a (click)="click(i)" [innerHTML]="i._text" [ngClass]="{ 'ml-sm': !$first }"></a>
+        <a (click)="click(i)" [innerHTML]="i._text" [class.ml-sm]="!$first"></a>
       }
     </ng-template>
-  `
+  `,
+  standalone: true
 })
 export class RangePickerShortcutTplComponent {
   @ViewChild('tpl', { static: true })
-  tpl!: TemplateRef<void>;
+  readonly tpl!: TemplateRef<void>;
 
   list: AlainDateRangePickerShortcutItem[] = [];
 
diff --git a/packages/abc/date-picker/range.directive.ts b/packages/abc/date-picker/range.directive.ts
index f1458ddbd4..b9579e7882 100644
--- a/packages/abc/date-picker/range.directive.ts
+++ b/packages/abc/date-picker/range.directive.ts
@@ -24,7 +24,8 @@ import { RangePickerShortcutTplComponent } from './range-shortcut.component';
 
 @Directive({
   selector: 'nz-range-picker[extend]',
-  exportAs: 'extendRangePicker'
+  exportAs: 'extendRangePicker',
+  standalone: true
 })
 export class RangePickerDirective implements OnDestroy, AfterViewInit {
   static ngAcceptInputType_shortcut: AlainDateRangePickerShortcut | string | null;
diff --git a/packages/abc/down-file/demo/simple.md b/packages/abc/down-file/demo/simple.md
index 39a866393a..933895eb36 100644
--- a/packages/abc/down-file/demo/simple.md
+++ b/packages/abc/down-file/demo/simple.md
@@ -16,7 +16,7 @@ Download a file.
 ```ts
 import { Component } from '@angular/core';
 
-import { DownFileModule } from '@delon/abc/down-file';
+import { DownFileDirective } from '@delon/abc/down-file';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 
 @Component({
@@ -29,7 +29,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
     }
   `,
   standalone: true,
-  imports: [DownFileModule, NzButtonModule]
+  imports: [DownFileDirective, NzButtonModule]
 })
 export class DemoComponent {
   fileTypes = ['.xlsx', '.docx', '.pptx', '.pdf'];
diff --git a/packages/abc/down-file/down-file.directive.ts b/packages/abc/down-file/down-file.directive.ts
index 91e5402567..cbeb2ddf12 100644
--- a/packages/abc/down-file/down-file.directive.ts
+++ b/packages/abc/down-file/down-file.directive.ts
@@ -12,7 +12,8 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types';
   exportAs: 'downFile',
   host: {
     '(click)': '_click($event)'
-  }
+  },
+  standalone: true
 })
 export class DownFileDirective {
   private isFileSaverSupported = true;
diff --git a/packages/abc/down-file/down-file.module.ts b/packages/abc/down-file/down-file.module.ts
index a6fb5f3857..6365e6c678 100644
--- a/packages/abc/down-file/down-file.module.ts
+++ b/packages/abc/down-file/down-file.module.ts
@@ -8,8 +8,7 @@ import { DownFileDirective } from './down-file.directive';
 const DIRECTIVES = [DownFileDirective];
 
 @NgModule({
-  imports: [CommonModule, AlainThemeModule],
-  declarations: [...DIRECTIVES],
-  exports: [...DIRECTIVES]
+  imports: [CommonModule, AlainThemeModule, ...DIRECTIVES],
+  exports: DIRECTIVES
 })
 export class DownFileModule {}
diff --git a/packages/abc/full-content/full-content-toggle.directive.ts b/packages/abc/full-content/full-content-toggle.directive.ts
index 76a006f4a7..79a4639b7a 100644
--- a/packages/abc/full-content/full-content-toggle.directive.ts
+++ b/packages/abc/full-content/full-content-toggle.directive.ts
@@ -7,7 +7,8 @@ import { FullContentComponent } from './full-content.component';
   exportAs: 'fullToggle',
   host: {
     '(click)': '_click()'
-  }
+  },
+  standalone: true
 })
 export class FullContentToggleDirective {
   constructor(private parent: FullContentComponent) {}
diff --git a/packages/abc/full-content/full-content.component.ts b/packages/abc/full-content/full-content.component.ts
index dd3675fe7b..b5b41359c1 100644
--- a/packages/abc/full-content/full-content.component.ts
+++ b/packages/abc/full-content/full-content.component.ts
@@ -39,7 +39,8 @@ const hideTitleCls = `full-content__hidden-title`;
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true
 })
 export class FullContentComponent implements AfterViewInit, OnInit, OnChanges, OnDestroy {
   static ngAcceptInputType_fullscreen: BooleanInput;
diff --git a/packages/abc/full-content/full-content.module.ts b/packages/abc/full-content/full-content.module.ts
index bebc5c13ea..59a01dc8a3 100644
--- a/packages/abc/full-content/full-content.module.ts
+++ b/packages/abc/full-content/full-content.module.ts
@@ -7,8 +7,7 @@ import { FullContentComponent } from './full-content.component';
 const COMPONENTS = [FullContentComponent, FullContentToggleDirective];
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class FullContentModule {}
diff --git a/packages/abc/global-footer/demo/basic.md b/packages/abc/global-footer/demo/basic.md
index ee7b45e139..614c887864 100644
--- a/packages/abc/global-footer/demo/basic.md
+++ b/packages/abc/global-footer/demo/basic.md
@@ -9,7 +9,7 @@ browser: 400
 ```ts
 import { Component } from '@angular/core';
 
-import { GlobalFooterLink, GlobalFooterModule } from '@delon/abc/global-footer';
+import { GlobalFooterComponent, GlobalFooterLink } from '@delon/abc/global-footer';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
 @Component({
@@ -30,7 +30,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     `
   ],
   standalone: true,
-  imports: [GlobalFooterModule, NzIconModule]
+  imports: [GlobalFooterComponent, NzIconModule]
 })
 export class DemoComponent {
   links: GlobalFooterLink[] = [
diff --git a/packages/abc/global-footer/global-footer-item.component.ts b/packages/abc/global-footer/global-footer-item.component.ts
index ead0a6e386..63eddb5662 100644
--- a/packages/abc/global-footer/global-footer-item.component.ts
+++ b/packages/abc/global-footer/global-footer-item.component.ts
@@ -8,7 +8,8 @@ import { BooleanInput, InputBoolean } from '@delon/util/decorator';
   template: ` <ng-template #host><ng-content /></ng-template> `,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true
 })
 export class GlobalFooterItemComponent {
   static ngAcceptInputType_blankTarget: BooleanInput;
diff --git a/packages/abc/global-footer/global-footer.component.ts b/packages/abc/global-footer/global-footer.component.ts
index b837e3a215..dbf9155e16 100644
--- a/packages/abc/global-footer/global-footer.component.ts
+++ b/packages/abc/global-footer/global-footer.component.ts
@@ -31,7 +31,8 @@ import { GlobalFooterLink } from './global-footer.types';
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true
 })
 export class GlobalFooterComponent implements OnInit {
   private dir$ = this.directionality.change?.pipe(takeUntilDestroyed());
@@ -48,7 +49,7 @@ export class GlobalFooterComponent implements OnInit {
     return this._links;
   }
 
-  @ContentChildren(GlobalFooterItemComponent) items!: QueryList<GlobalFooterItemComponent>;
+  @ContentChildren(GlobalFooterItemComponent) readonly items!: QueryList<GlobalFooterItemComponent>;
 
   constructor(
     private router: Router,
diff --git a/packages/abc/global-footer/global-footer.module.ts b/packages/abc/global-footer/global-footer.module.ts
index 3937496da4..c5efa9234a 100644
--- a/packages/abc/global-footer/global-footer.module.ts
+++ b/packages/abc/global-footer/global-footer.module.ts
@@ -8,8 +8,7 @@ import { GlobalFooterComponent } from './global-footer.component';
 const COMPONENTS = [GlobalFooterComponent, GlobalFooterItemComponent];
 
 @NgModule({
-  imports: [CommonModule, RouterModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, RouterModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class GlobalFooterModule {}
diff --git a/packages/abc/media/demo/custom.md b/packages/abc/media/demo/custom.md
index a6aa173963..e5a895139d 100644
--- a/packages/abc/media/demo/custom.md
+++ b/packages/abc/media/demo/custom.md
@@ -18,7 +18,7 @@ import { Component } from '@angular/core';
 
 import type Plyr from 'plyr';
 
-import { MediaModule } from '@delon/abc/media';
+import { MediaComponent } from '@delon/abc/media';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 
 @Component({
@@ -31,7 +31,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
     <div media #media [source]="source" [options]="options"></div>
   `,
   standalone: true,
-  imports: [NzButtonModule, MediaModule]
+  imports: [NzButtonModule, MediaComponent]
 })
 export class DemoComponent {
   source: Plyr.SourceInfo = {
diff --git a/packages/abc/media/demo/mp3.md b/packages/abc/media/demo/mp3.md
index e8ade8165c..b77179a4d3 100644
--- a/packages/abc/media/demo/mp3.md
+++ b/packages/abc/media/demo/mp3.md
@@ -16,7 +16,7 @@ Specify `type="audio"` to play MP3.
 ```ts
 import { Component } from '@angular/core';
 
-import { MediaModule } from '@delon/abc/media';
+import { MediaComponent } from '@delon/abc/media';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 
 @Component({
@@ -30,7 +30,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
     <div media #media type="audio" [source]="mp3"></div>
   `,
   standalone: true,
-  imports: [NzButtonModule, MediaModule]
+  imports: [NzButtonModule, MediaComponent]
 })
 export class DemoComponent {
   mp3 = `https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3`;
diff --git a/packages/abc/media/demo/mp4.md b/packages/abc/media/demo/mp4.md
index 753fb70ae3..6b629d623c 100644
--- a/packages/abc/media/demo/mp4.md
+++ b/packages/abc/media/demo/mp4.md
@@ -16,7 +16,7 @@ Simplest of usage.
 ```ts
 import { Component } from '@angular/core';
 
-import { MediaModule } from '@delon/abc/media';
+import { MediaComponent } from '@delon/abc/media';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 
 @Component({
@@ -30,7 +30,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
     <div media #media [source]="mp4"></div>
   `,
   standalone: true,
-  imports: [NzButtonModule, MediaModule]
+  imports: [NzButtonModule, MediaComponent]
 })
 export class DemoComponent {
   mp4 = `https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4`;
diff --git a/packages/abc/media/media.component.ts b/packages/abc/media/media.component.ts
index a89fce5ee2..fc6b7d0311 100644
--- a/packages/abc/media/media.component.ts
+++ b/packages/abc/media/media.component.ts
@@ -37,7 +37,8 @@ export type MediaType = 'html5' | 'youtube' | 'video' | 'audio';
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true
 })
 export class MediaComponent implements OnChanges, AfterViewInit, OnDestroy {
   static ngAcceptInputType_delay: NumberInput;
diff --git a/packages/abc/media/media.module.ts b/packages/abc/media/media.module.ts
index ea5a90e159..65acbe1546 100644
--- a/packages/abc/media/media.module.ts
+++ b/packages/abc/media/media.module.ts
@@ -6,8 +6,7 @@ import { MediaComponent } from './media.component';
 const COMPONENTS = [MediaComponent];
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class MediaModule {}
diff --git a/packages/abc/sg/sg-container.component.ts b/packages/abc/sg/sg-container.component.ts
index 2227f6e378..05c0af2d18 100644
--- a/packages/abc/sg/sg-container.component.ts
+++ b/packages/abc/sg/sg-container.component.ts
@@ -16,7 +16,8 @@ import { InputNumber, NumberInput } from '@delon/util/decorator';
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true
 })
 export class SGContainerComponent {
   static ngAcceptInputType_gutter: NumberInput;
diff --git a/packages/abc/sg/sg.component.ts b/packages/abc/sg/sg.component.ts
index d4dd6ad593..2609615954 100644
--- a/packages/abc/sg/sg.component.ts
+++ b/packages/abc/sg/sg.component.ts
@@ -28,7 +28,8 @@ const prefixCls = `sg`;
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true
 })
 export class SGComponent implements OnChanges, AfterViewInit {
   static ngAcceptInputType_col: NumberInput;
diff --git a/packages/abc/sg/sg.module.ts b/packages/abc/sg/sg.module.ts
index ea6d156146..6bd1bf365f 100644
--- a/packages/abc/sg/sg.module.ts
+++ b/packages/abc/sg/sg.module.ts
@@ -7,8 +7,7 @@ import { SGComponent } from './sg.component';
 const COMPONENTS = [SGContainerComponent, SGComponent];
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class SGModule {}