diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
index b0d626cf71..1700efafe2 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
@@ -41,9 +41,9 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
 
   progressLevel = 0;
 
-  interval: Subscription;
+  interval = new Subscription();
 
-  timer: Subscription;
+  timer = new Subscription();
 
   intervalPeriod = 350;
 
@@ -94,11 +94,11 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
   }
 
   ngOnDestroy() {
-    if (this.interval) this.interval.unsubscribe();
+    this.interval.unsubscribe();
   }
 
   startLoading() {
-    if (this.isLoading || (this.interval && !this.interval.closed)) return;
+    if (this.isLoading || !this.interval.closed) return;
 
     this.isLoading = true;
     this.progressLevel = 0;
@@ -107,12 +107,12 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
   }
 
   stopLoading() {
-    if (this.interval) this.interval.unsubscribe();
+    this.interval.unsubscribe();
 
     this.progressLevel = 100;
     this.isLoading = false;
 
-    if (this.timer && !this.timer.closed) return;
+    if (!this.timer.closed) return;
 
     this.timer = timer(this.stopDelay).subscribe(this.clearProgress);
   }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/loader-bar.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/loader-bar.component.spec.ts
index 00a823f860..6d1ab85a46 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/tests/loader-bar.component.spec.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/loader-bar.component.spec.ts
@@ -1,33 +1,29 @@
 import { NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
-import { createHostFactory, SpectatorHost, SpyObject } from '@ngneat/spectator/jest';
-import { Subject, Subscription, timer } from 'rxjs';
+import { createComponentFactory, Spectator, SpyObject } from '@ngneat/spectator/jest';
+import { Subject, timer } from 'rxjs';
 import { LoaderBarComponent } from '../components/loader-bar/loader-bar.component';
-import { SubscriptionService } from '@abp/ng.core';
+import { HttpWaitService, SubscriptionService } from '@abp/ng.core';
 import { HttpRequest } from '@angular/common/http';
-import { HttpWaitService } from '../../../../core/src/lib/services';
 
 describe('LoaderBarComponent', () => {
-  let spectator: SpectatorHost<LoaderBarComponent>;
+  let spectator: Spectator<LoaderBarComponent>;
   let router: SpyObject<Router>;
   const events$ = new Subject();
 
-  const createHost = createHostFactory({
+  const createComponent = createComponentFactory({
     component: LoaderBarComponent,
-    mocks: [Router],
     detectChanges: false,
-    providers: [SubscriptionService],
+    providers: [SubscriptionService, { provide: Router, useValue: { events: events$ } }],
   });
 
   beforeEach(() => {
-    spectator = createHost('<abp-loader-bar></abp-loader-bar>');
+    spectator = createComponent({});
     spectator.component.intervalPeriod = 1;
     spectator.component.stopDelay = 1;
     router = spectator.inject(Router);
-    (router as any).events = events$;
   });
 
   it('should initial variable values are correct', () => {
-    spectator.component.interval = new Subscription();
     expect(spectator.component.containerClass).toBe('abp-loader-bar');
     expect(spectator.component.color).toBe('#77b6ff');
   });
@@ -57,11 +53,11 @@ describe('LoaderBarComponent', () => {
 
   it('should start and stop the loading with navigation', done => {
     spectator.detectChanges();
-    (router as any).events.next(new NavigationStart(1, 'test'));
+    events$.next(new NavigationStart(1, 'test'));
     expect(spectator.component.interval.closed).toBe(false);
 
-    (router as any).events.next(new NavigationEnd(1, 'test', 'test'));
-    (router as any).events.next(new NavigationError(1, 'test', 'test'));
+    events$.next(new NavigationEnd(1, 'test', 'test'));
+    events$.next(new NavigationError(1, 'test', 'test'));
     expect(spectator.component.progressLevel).toBe(100);
 
     timer(2).subscribe(() => {
@@ -72,10 +68,10 @@ describe('LoaderBarComponent', () => {
 
   it('should stop the loading with navigation', done => {
     spectator.detectChanges();
-    (router as any).events.next(new NavigationStart(1, 'test'));
+    events$.next(new NavigationStart(1, 'test'));
     expect(spectator.component.interval.closed).toBe(false);
 
-    (router as any).events.next(new NavigationEnd(1, 'testend', 'testend'));
+    events$.next(new NavigationEnd(1, 'testend', 'testend'));
     expect(spectator.component.progressLevel).toBe(100);
 
     timer(2).subscribe(() => {
@@ -87,8 +83,8 @@ describe('LoaderBarComponent', () => {
   describe('#startLoading', () => {
     it('should return when isLoading is true', done => {
       spectator.detectChanges();
-      (router as any).events.next(new NavigationStart(1, 'test'));
-      (router as any).events.next(new NavigationStart(1, 'test'));
+      events$.next(new NavigationStart(1, 'test'));
+      events$.next(new NavigationStart(1, 'test'));
       done();
     });
   });