diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html
deleted file mode 100644
index e98c2b1935..0000000000
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="mb-3">
-  <input
-    class="form-check-input"  
-    type="checkbox"
-    [(ngModel)]="value"
-    [id]="checkboxId"  
-    [readonly]="checkboxReadonly"
-    [ngClass]="checkboxClass" 
-    [ngStyle]="checkboxStyle" 
-    (blur)="onBlur.next()"
-    (focus)="onFocus.next()" 
-    >    
-    <label class="form-check-label" *ngIf="label" [ngClass]="labelClass" [for]="checkboxId" > {{label | abpLocalization}} </label>
-
-</div>
\ No newline at end of file
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.spec.ts
deleted file mode 100644
index 8abc252968..0000000000
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CheckboxComponent } from './checkbox.component';
-
-describe('CheckboxComponent', () => {
-  let component: CheckboxComponent;
-  let fixture: ComponentFixture<CheckboxComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [CheckboxComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(CheckboxComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
index e298dc7443..26d73f16b6 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
@@ -4,8 +4,22 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
   selector: 'abp-checkbox',
-  templateUrl: './checkbox.component.html',
-  styleUrls: ['./checkbox.component.scss'],
+  template: `
+    <div class="mb-3">
+      <input
+        class="form-check-input"  
+        type="checkbox"
+        [(ngModel)]="value"
+        [id]="checkboxId"  
+        [readonly]="checkboxReadonly"
+        [ngClass]="checkboxClass" 
+        [ngStyle]="checkboxStyle" 
+        (blur)="onBlur.next()"
+        (focus)="onFocus.next()" 
+      >    
+      <label class="form-check-label" *ngIf="label" [ngClass]="labelClass" [for]="checkboxId" > {{label | abpLocalization}} </label>
+    </div>
+  `,
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.html
deleted file mode 100644
index 5b3617bb63..0000000000
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="mb-3">
-  <label class="form-label" *ngIf="label" [ngClass]="labelClass" [for]="inputId" > {{label | abpLocalization}} </label>
-  <input
-    class="form-control"  
-    type="text"
-    [id]="inputId" 
-    [placeholder]="inputPlaceholder" 
-    [readonly]="inputReadonly"
-    [ngClass]="inputClass" 
-    [ngStyle]="inputStyle" 
-    (blur)="onBlur.next()"
-    (focus)="onFocus.next()" 
-    [(ngModel)]="value">
-</div>
-  
\ No newline at end of file
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.spec.ts
deleted file mode 100644
index ed506e891b..0000000000
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FormInputComponent } from './form-input.component';
-
-describe('FormInputComponent', () => {
-  let component: FormInputComponent;
-  let fixture: ComponentFixture<FormInputComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FormInputComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(FormInputComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
index bdf60ace58..fc306288e2 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
@@ -4,7 +4,22 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
   selector: 'abp-form-input',
-  templateUrl: './form-input.component.html',
+  template: `
+    <div class="mb-3">
+      <label class="form-label" *ngIf="label" [ngClass]="labelClass" [for]="inputId" > {{label | abpLocalization}} </label>
+      <input
+        class="form-control"  
+        type="text"
+        [id]="inputId" 
+        [placeholder]="inputPlaceholder" 
+        [readonly]="inputReadonly"
+        [ngClass]="inputClass" 
+        [ngStyle]="inputStyle" 
+        (blur)="onBlur.next()"
+        (focus)="onFocus.next()" 
+        [(ngModel)]="value">
+    </div>
+  `,
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -16,20 +31,13 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 export class FormInputComponent extends AbstractNgModelComponent {
   @Input() inputId!: string;
   @Input() inputReadonly: boolean = false;
-
   @Input() label: string = '';
   @Input() labelClass: string = '';
-
   @Input() inputPlaceholder: string = '';
-
   @Input() inputType: string = 'text';
-
   @Input() inputStyle: string = '';
-
   @Input() inputClass: string = '';
-
   @Output() onBlur = new EventEmitter<void>();
-
   @Output() onFocus = new EventEmitter<void>();
 
   constructor(injector: Injector) {