diff --git a/ui-ngx/src/app/modules/home/pages/api-usage/api-usage-routing.module.ts b/ui-ngx/src/app/modules/home/pages/api-usage/api-usage-routing.module.ts
index a38fbf9958..7d4bb5fe14 100644
--- a/ui-ngx/src/app/modules/home/pages/api-usage/api-usage-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/api-usage/api-usage-routing.module.ts
@@ -14,10 +14,21 @@
 /// limitations under the License.
 ///
 
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { inject, NgModule } from '@angular/core';
+import { ActivatedRouteSnapshot, ResolveFn, RouterModule, RouterStateSnapshot, Routes } from '@angular/router';
 import { Authority } from '@shared/models/authority.enum';
 import { ApiUsageComponent } from '@home/pages/api-usage/api-usage.component';
+import { Dashboard } from '@shared/models/dashboard.models';
+import { ResourcesService } from '@core/services/resources.service';
+import { Observable } from 'rxjs';
+
+const apiUsageDashboardJson = '/assets/dashboard/api_usage.json';
+
+export const apiUsageDashboardResolver: ResolveFn<Dashboard> = (
+  route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot,
+  resourcesService = inject(ResourcesService)
+): Observable<Dashboard> => resourcesService.loadJsonResource(apiUsageDashboardJson);
 
 const routes: Routes = [
   {
@@ -30,6 +41,9 @@ const routes: Routes = [
         label: 'api-usage.api-usage',
         icon: 'insert_chart'
       }
+    },
+    resolve: {
+      apiUsageDashboard: apiUsageDashboardResolver
     }
   }
 ];
diff --git a/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.component.ts b/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.component.ts
index 0bcae0801b..e84a23fb66 100644
--- a/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.component.ts
@@ -14,28 +14,24 @@
 /// limitations under the License.
 ///
 
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { PageComponent } from '@shared/components/page.component';
-import apiUsageDashboardJson from '!raw-loader!./api_usage_json.raw';
 import { Dashboard } from '@shared/models/dashboard.models';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'tb-api-usage',
   templateUrl: './api-usage.component.html',
   styleUrls: ['./api-usage.component.scss']
 })
-export class ApiUsageComponent extends PageComponent implements OnInit {
+export class ApiUsageComponent extends PageComponent {
 
-  apiUsageDashboard: Dashboard;
+  apiUsageDashboard: Dashboard = this.route.snapshot.data.apiUsageDashboard;
 
-  constructor(protected store: Store<AppState>) {
+  constructor(protected store: Store<AppState>,
+              private route: ActivatedRoute) {
     super(store);
   }
-
-  ngOnInit() {
-    this.apiUsageDashboard = JSON.parse(apiUsageDashboardJson);
-  }
-
 }
diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts b/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts
index c1c1c9bc9e..a11ae14231 100644
--- a/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts
@@ -14,8 +14,8 @@
 /// limitations under the License.
 ///
 
-import { Injectable, NgModule } from '@angular/core';
-import { Resolve, RouterModule, Routes } from '@angular/router';
+import { inject, NgModule } from '@angular/core';
+import { ActivatedRouteSnapshot, ResolveFn, RouterModule, RouterStateSnapshot, Routes } from '@angular/router';
 
 import { HomeLinksComponent } from './home-links.component';
 import { Authority } from '@shared/models/authority.enum';
@@ -33,62 +33,58 @@ const sysAdminHomePageJson = '/assets/dashboard/sys_admin_home_page.json';
 const tenantAdminHomePageJson = '/assets/dashboard/tenant_admin_home_page.json';
 const customerUserHomePageJson = '/assets/dashboard/customer_user_home_page.json';
 
-@Injectable()
-export class HomeDashboardResolver implements Resolve<HomeDashboard> {
-
-  constructor(private dashboardService: DashboardService,
-              private resourcesService: ResourcesService,
-              private store: Store<AppState>) {
-  }
-
-  resolve(): Observable<HomeDashboard> {
-    return this.dashboardService.getHomeDashboard().pipe(
-      mergeMap((dashboard) => {
-        if (!dashboard) {
-          let dashboard$: Observable<HomeDashboard>;
-          const authority = getCurrentAuthUser(this.store).authority;
-          switch (authority) {
-            case Authority.SYS_ADMIN:
-              dashboard$ = this.resourcesService.loadJsonResource(sysAdminHomePageJson);
-              break;
-            case Authority.TENANT_ADMIN:
-              dashboard$ = this.updateDeviceActivityKeyFilterIfNeeded(this.resourcesService.loadJsonResource(tenantAdminHomePageJson));
-              break;
-            case Authority.CUSTOMER_USER:
-              dashboard$ = this.updateDeviceActivityKeyFilterIfNeeded(this.resourcesService.loadJsonResource(customerUserHomePageJson));
-              break;
-          }
-          if (dashboard$) {
-            return dashboard$.pipe(
-              map((homeDashboard) => {
-                homeDashboard.hideDashboardToolbar = true;
-                return homeDashboard;
-              })
-            );
+const updateDeviceActivityKeyFilterIfNeeded = (store: Store<AppState>,
+                                               dashboard$: Observable<HomeDashboard>): Observable<HomeDashboard> =>
+  store.pipe(select(selectPersistDeviceStateToTelemetry)).pipe(
+    mergeMap((persistToTelemetry) => dashboard$.pipe(
+      map((dashboard) => {
+        if (persistToTelemetry) {
+          for (const filterId of Object.keys(dashboard.configuration.filters)) {
+            if (['Active Devices', 'Inactive Devices'].includes(dashboard.configuration.filters[filterId].filter)) {
+              dashboard.configuration.filters[filterId].keyFilters[0].key.type = EntityKeyType.TIME_SERIES;
+            }
           }
         }
-        return of(dashboard);
+        return dashboard;
       })
-    );
-  }
+    ))
+  );
 
-  private updateDeviceActivityKeyFilterIfNeeded(dashboard$: Observable<HomeDashboard>): Observable<HomeDashboard> {
-    return this.store.pipe(select(selectPersistDeviceStateToTelemetry)).pipe(
-      mergeMap((persistToTelemetry) => dashboard$.pipe(
-          map((dashboard) => {
-            if (persistToTelemetry) {
-              for (const filterId of Object.keys(dashboard.configuration.filters)) {
-                if (['Active Devices', 'Inactive Devices'].includes(dashboard.configuration.filters[filterId].filter)) {
-                  dashboard.configuration.filters[filterId].keyFilters[0].key.type = EntityKeyType.TIME_SERIES;
-                }
-              }
-            }
-            return dashboard;
-          })
-        ))
-    );
-  }
-}
+export const homeDashboardResolver: ResolveFn<HomeDashboard> = (
+  route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot,
+  dashboardService = inject(DashboardService),
+  resourcesService = inject(ResourcesService),
+  store: Store<AppState> = inject(Store<AppState>)
+): Observable<HomeDashboard> =>
+  dashboardService.getHomeDashboard().pipe(
+    mergeMap((dashboard) => {
+      if (!dashboard) {
+        let dashboard$: Observable<HomeDashboard>;
+        const authority = getCurrentAuthUser(store).authority;
+        switch (authority) {
+          case Authority.SYS_ADMIN:
+            dashboard$ = resourcesService.loadJsonResource(sysAdminHomePageJson);
+            break;
+          case Authority.TENANT_ADMIN:
+            dashboard$ = updateDeviceActivityKeyFilterIfNeeded(store, resourcesService.loadJsonResource(tenantAdminHomePageJson));
+            break;
+          case Authority.CUSTOMER_USER:
+            dashboard$ = updateDeviceActivityKeyFilterIfNeeded(store, resourcesService.loadJsonResource(customerUserHomePageJson));
+            break;
+        }
+        if (dashboard$) {
+          return dashboard$.pipe(
+            map((homeDashboard) => {
+              homeDashboard.hideDashboardToolbar = true;
+              return homeDashboard;
+            })
+          );
+        }
+      }
+      return of(dashboard);
+    })
+  );
 
 const routes: Routes = [
   {
@@ -103,16 +99,13 @@ const routes: Routes = [
       }
     },
     resolve: {
-      homeDashboard: HomeDashboardResolver
+      homeDashboard: homeDashboardResolver
     }
   }
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-  providers: [
-    HomeDashboardResolver
-  ]
+  exports: [RouterModule]
 })
 export class HomeLinksRoutingModule { }
diff --git a/ui-ngx/src/app/modules/home/pages/api-usage/api_usage_json.raw b/ui-ngx/src/assets/dashboard/api_usage.json
similarity index 100%
rename from ui-ngx/src/app/modules/home/pages/api-usage/api_usage_json.raw
rename to ui-ngx/src/assets/dashboard/api_usage.json