diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.html
new file mode 100644
index 0000000000..87c8f27d70
--- /dev/null
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.html
@@ -0,0 +1,25 @@
+<div class="mb-3">
+    @if (showTitle()) {
+    <h5>{{ title() | abpLocalization }}</h5>
+    }
+    <div class="form-check form-switch mb-2">
+        <input class="form-check-input" type="checkbox" [id]="'grantAll-' + idPrefix()"
+            [checked]="state.allPermissionsSelected()"
+            (change)="state.toggleAllPermissions(!state.allPermissionsSelected())" />
+        <label class="form-check-label" [for]="'grantAll-' + idPrefix()">
+            {{ 'AbpPermissionManagement::GrantAllResourcePermissions' | abpLocalization }}
+        </label>
+    </div>
+    <div class="border rounded p-3" style="max-height: 300px; overflow-y: auto;">
+        @for (perm of permissions(); track perm.name) {
+        <div class="form-check">
+            <input class="form-check-input" type="checkbox" [id]="'perm-' + idPrefix() + '-' + perm.name"
+                [checked]="state.isPermissionSelected(perm.name || '')"
+                (change)="state.togglePermission(perm.name || '')" />
+            <label class="form-check-label" [for]="'perm-' + idPrefix() + '-' + perm.name">
+                {{ perm.displayName }}
+            </label>
+        </div>
+        }
+    </div>
+</div>
\ No newline at end of file
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.ts
index e59cc67e12..fe36cbb800 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.ts
@@ -9,41 +9,7 @@ interface PermissionItem {
 
 @Component({
     selector: 'abp-permission-checkbox-list',
-    template: `
-        <div class="mb-3">
-            @if (showTitle()) {
-                <h5>{{ title() | abpLocalization }}</h5>
-            }
-            <div class="form-check form-switch mb-2">
-                <input
-                    class="form-check-input"
-                    type="checkbox"
-                    [id]="'grantAll-' + idPrefix()"
-                    [checked]="state.allPermissionsSelected()"
-                    (change)="state.toggleAllPermissions(!state.allPermissionsSelected())"
-                />
-                <label class="form-check-label" [for]="'grantAll-' + idPrefix()">
-                    {{ 'AbpPermissionManagement::GrantAllResourcePermissions' | abpLocalization }}
-                </label>
-            </div>
-            <div class="border rounded p-3" style="max-height: 300px; overflow-y: auto;">
-                @for (perm of permissions(); track perm.name) {
-                    <div class="form-check">
-                        <input
-                            class="form-check-input"
-                            type="checkbox"
-                            [id]="'perm-' + idPrefix() + '-' + perm.name"
-                            [checked]="state.isPermissionSelected(perm.name || '')"
-                            (change)="state.togglePermission(perm.name || '')"
-                        />
-                        <label class="form-check-label" [for]="'perm-' + idPrefix() + '-' + perm.name">
-                            {{ perm.displayName }}
-                        </label>
-                    </div>
-                }
-            </div>
-        </div>
-    `,
+    templateUrl: './permission-checkbox-list.component.html',
     imports: [LocalizationPipe],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.html
new file mode 100644
index 0000000000..55e7000f27
--- /dev/null
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.html
@@ -0,0 +1,15 @@
+<div class="position-relative">
+    <label class="form-label">{{ 'AbpPermissionManagement::SearchProviderKey' | abpLocalization }}</label>
+    <input type="text" class="form-control"
+        [placeholder]="'AbpPermissionManagement::SearchProviderKey' | abpLocalization" [ngModel]="state.searchFilter()"
+        (ngModelChange)="onSearchInput($event)" (focus)="onSearchFocus()" (blur)="onSearchBlur($event)" />
+    @if (state.searchResults().length > 0 && state.showDropdown()) {
+    <div class="list-group position-absolute w-100 shadow" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
+        @for (result of state.searchResults(); track result.providerKey) {
+        <button type="button" class="list-group-item list-group-item-action" (mousedown)="selectProviderKey(result)">
+            {{ result.providerDisplayName || result.providerKey }}
+        </button>
+        }
+    </div>
+    }
+</div>
\ No newline at end of file
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.ts
index 17a37e7456..57bbf8600a 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.ts
@@ -7,36 +7,7 @@ import { ResourcePermissionStateService } from '../../../services/resource-permi
 
 @Component({
     selector: 'abp-provider-key-search',
-    template: `
-        <div class="position-relative">
-            <label class="form-label">{{ 'AbpPermissionManagement::SearchProviderKey' | abpLocalization }}</label>
-            <input
-                type="text"
-                class="form-control"
-                [placeholder]="'AbpPermissionManagement::SearchProviderKey' | abpLocalization"
-                [ngModel]="state.searchFilter()"
-                (ngModelChange)="onSearchInput($event)"
-                (focus)="onSearchFocus()"
-                (blur)="onSearchBlur($event)"
-            />
-            @if (state.searchResults().length > 0 && state.showDropdown()) {
-                <div
-                    class="list-group position-absolute w-100 shadow"
-                    style="z-index: 1000; max-height: 200px; overflow-y: auto;"
-                >
-                    @for (result of state.searchResults(); track result.providerKey) {
-                        <button
-                            type="button"
-                            class="list-group-item list-group-item-action"
-                            (mousedown)="selectProviderKey(result)"
-                        >
-                            {{ result.providerDisplayName || result.providerKey }}
-                        </button>
-                    }
-                </div>
-            }
-        </div>
-    `,
+    templateUrl: './provider-key-search.component.html',
     imports: [FormsModule, LocalizationPipe],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.html
new file mode 100644
index 0000000000..b2018b6c7c
--- /dev/null
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.html
@@ -0,0 +1,28 @@
+@if (mode() === 'add') {
+<div class="mb-3">
+    <label class="form-label fw-bold">
+        {{ 'AbpPermissionManagement::SelectProvider' | abpLocalization }}
+    </label>
+    <div class="mb-2">
+        @for (provider of state.providers(); track provider.name; let i = $index) {
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" [id]="'provider-' + i" [value]="provider.name"
+                [checked]="state.selectedProviderName() === provider.name"
+                (change)="state.onProviderChange(provider.name || '')" />
+            <label class="form-check-label" [for]="'provider-' + i">
+                {{ provider.displayName }}
+            </label>
+        </div>
+        }
+    </div>
+
+    <abp-provider-key-search [resourceName]="resourceName()" />
+</div>
+
+<abp-permission-checkbox-list [permissions]="state.permissionDefinitions()" idPrefix="add" />
+} @else {
+<div class="mb-3" id="permissionList">
+    <h4>{{ 'AbpPermissionManagement::Permissions' | abpLocalization }}</h4>
+    <abp-permission-checkbox-list [permissions]="state.permissionsWithProvider()" idPrefix="edit" [showTitle]="false" />
+</div>
+}
\ No newline at end of file
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.ts
index afb2ff14bb..8c30754fca 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.ts
@@ -9,48 +9,7 @@ export type FormMode = 'add' | 'edit';
 
 @Component({
     selector: 'abp-resource-permission-form',
-    template: `
-        @if (mode() === 'add') {
-            <div class="mb-3">
-                <label class="form-label fw-bold">
-                    {{ 'AbpPermissionManagement::SelectProvider' | abpLocalization }}
-                </label>
-                <div class="mb-2">
-                    @for (provider of state.providers(); track provider.name; let i = $index) {
-                        <div class="form-check form-check-inline">
-                            <input
-                                class="form-check-input"
-                                type="radio"
-                                [id]="'provider-' + i"
-                                [value]="provider.name"
-                                [checked]="state.selectedProviderName() === provider.name"
-                                (change)="state.onProviderChange(provider.name || '')"
-                            />
-                            <label class="form-check-label" [for]="'provider-' + i">
-                                {{ provider.displayName }}
-                            </label>
-                        </div>
-                    }
-                </div>
-
-                <abp-provider-key-search [resourceName]="resourceName()" />
-            </div>
-
-            <abp-permission-checkbox-list
-                [permissions]="state.permissionDefinitions()"
-                idPrefix="add"
-            />
-        } @else {
-            <div class="mb-3" id="permissionList">
-                <h4>{{ 'AbpPermissionManagement::Permissions' | abpLocalization }}</h4>
-                <abp-permission-checkbox-list
-                    [permissions]="state.permissionsWithProvider()"
-                    idPrefix="edit"
-                    [showTitle]="false"
-                />
-            </div>
-        }
-    `,
+    templateUrl: './resource-permission-form.component.html',
     imports: [
         FormsModule,
         LocalizationPipe,
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-list/resource-permission-list.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-list/resource-permission-list.component.html
new file mode 100644
index 0000000000..bdde5056b2
--- /dev/null
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-list/resource-permission-list.component.html
@@ -0,0 +1,28 @@
+<div class="d-grid gap-2 mb-3 d-md-flex justify-content-md-end">
+    <button class="btn btn-sm btn-primary" type="button" (click)="addClicked.emit()">
+        <i class="fa fa-plus me-1"></i>
+        {{ 'AbpPermissionManagement::AddResourcePermission' | abpLocalization }}
+    </button>
+</div>
+
+<ng-template #actionsTemplate let-row>
+    <div class="btn-group btn-group-sm" role="group">
+        <button class="btn btn-outline-primary" type="button" (click)="editClicked.emit(row)"
+            [title]="'AbpUi::Edit' | abpLocalization">
+            <i class="fa fa-edit"></i>
+        </button>
+        <button class="btn btn-outline-danger" type="button" (click)="deleteClicked.emit(row)"
+            [title]="'AbpUi::Delete' | abpLocalization">
+            <i class="fa fa-trash"></i>
+        </button>
+    </div>
+</ng-template>
+
+@if (state.resourcePermissions().length > 0) {
+<abp-extensible-table [data]="state.resourcePermissions()" [recordsTotal]="state.totalCount()" [list]="list"
+    [actionsTemplate]="actionsTemplate" actionsText="AbpUi::Actions"></abp-extensible-table>
+} @else {
+<div class="alert alert-info">
+    {{ 'AbpPermissionManagement::NoPermissionsAssigned' | abpLocalization }}
+</div>
+}
\ No newline at end of file
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-list/resource-permission-list.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-list/resource-permission-list.component.ts
index b422d9e991..777246af9a 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-list/resource-permission-list.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-list/resource-permission-list.component.ts
@@ -8,49 +8,7 @@ import { configureResourcePermissionExtensions } from '../../../services/extensi
 
 @Component({
     selector: 'abp-resource-permission-list',
-    template: `
-        <div class="d-grid gap-2 mb-3 d-md-flex justify-content-md-end">
-            <button class="btn btn-sm btn-primary" type="button" (click)="addClicked.emit()">
-                <i class="fa fa-plus me-1"></i>
-                {{ 'AbpPermissionManagement::AddResourcePermission' | abpLocalization }}
-            </button>
-        </div>
-
-        <ng-template #actionsTemplate let-row>
-            <div class="btn-group btn-group-sm" role="group">
-                <button
-                    class="btn btn-outline-primary"
-                    type="button"
-                    (click)="editClicked.emit(row)"
-                    [title]="'AbpUi::Edit' | abpLocalization"
-                >
-                    <i class="fa fa-edit"></i>
-                </button>
-                <button
-                    class="btn btn-outline-danger"
-                    type="button"
-                    (click)="deleteClicked.emit(row)"
-                    [title]="'AbpUi::Delete' | abpLocalization"
-                >
-                    <i class="fa fa-trash"></i>
-                </button>
-            </div>
-        </ng-template>
-
-        @if (state.resourcePermissions().length > 0) {
-            <abp-extensible-table
-                [data]="state.resourcePermissions()"
-                [recordsTotal]="state.totalCount()"
-                [list]="list"
-                [actionsTemplate]="actionsTemplate"
-                actionsText="AbpUi::Actions"
-            ></abp-extensible-table>
-        } @else {
-            <div class="alert alert-info">
-                {{ 'AbpPermissionManagement::NoPermissionsAssigned' | abpLocalization }}
-            </div>
-        }
-    `,
+    templateUrl: './resource-permission-list.component.html',
     providers: [
         ListService,
         {