diff --git a/package-lock.json b/package-lock.json
index 060c5b2..3e4e91b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -645,6 +645,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/router": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-11.2.4.tgz",
+      "integrity": "sha512-t0o1lqHt3UfJAIpbvO5g/FWqr13h04gmvRLtBuwDzGAwWnxo0Te2LyU4ry4ECTz5pMQyTMdORiPwnxg7Cbt/Vw==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
diff --git a/package.json b/package.json
index 6c7109d..55b7581 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@angular/compiler": "~11.2.0",
     "@angular/core": "~11.2.0",
     "@angular/forms": "^11.2.4",
+    "@angular/router": "^11.2.4",
     "@angular/platform-browser": "^11.2.3",
     "@angular/platform-browser-dynamic": "^11.2.3",
     "@ngrx/effects": "^11.0.1",
diff --git a/projects/example-app/src/app/app.component.html b/projects/example-app/src/app/app.component.html
index fb0c110..b96eee2 100644
--- a/projects/example-app/src/app/app.component.html
+++ b/projects/example-app/src/app/app.component.html
@@ -3,6 +3,6 @@ <h1>Example App</h1>
   <app-lightweight-example></app-lightweight-example>
   <app-default-example></app-default-example>
   <app-custom-loading-template-example></app-custom-loading-template-example>
-  <app-custom-default-loading-example></app-custom-default-loading-example>
   <app-ngrx-example></app-ngrx-example>
 </div>
+<router-outlet></router-outlet>
diff --git a/projects/example-app/src/app/app.module.ts b/projects/example-app/src/app/app.module.ts
index e10665d..be446e1 100644
--- a/projects/example-app/src/app/app.module.ts
+++ b/projects/example-app/src/app/app.module.ts
@@ -6,15 +6,23 @@ import { NgrxExampleModule } from './examples/ngrx-example/ngrx-example.module';
 import { CustomLoadingTemplateExampleModule } from './examples/custom-loading-template-example/custom-loading-template-example.module';
 import { DefaultExampleModule } from './examples/default-example/default-example.module';
 import { LightweightExampleModule } from './examples/lightweight-example/lightweight-example.module';
-import { CustomDefaultLoadingExampleModule } from './examples/custom-default-loading-example/custom-default-loading-example.module';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
+    RouterModule.forRoot([
+      {
+        path: 'custom-default-loading-example',
+        loadChildren: () =>
+          import(
+            './examples/custom-default-loading-example/custom-default-loading-example.module'
+          ).then((m) => m.CustomDefaultLoadingExampleModule),
+      },
+    ]),
     NgrxExampleModule,
     CustomLoadingTemplateExampleModule,
-    CustomDefaultLoadingExampleModule,
     DefaultExampleModule,
     LightweightExampleModule,
   ],
diff --git a/projects/example-app/src/app/examples/custom-default-loading-example/custom-default-loading-example.module.ts b/projects/example-app/src/app/examples/custom-default-loading-example/custom-default-loading-example.module.ts
index 2f32447..d571576 100644
--- a/projects/example-app/src/app/examples/custom-default-loading-example/custom-default-loading-example.module.ts
+++ b/projects/example-app/src/app/examples/custom-default-loading-example/custom-default-loading-example.module.ts
@@ -1,14 +1,28 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { LoadableModule } from 'projects/ngx-loadable/src/lib/angular/loadable.module';
 import { LoadFormModule } from '../../load-form/load-form.module';
 import { CustomDefaultLoadingExampleComponent } from './custom-default-loading-example.component';
 import { LoadingSpinnerComponent } from './loading-spinner/loading-spinner.component';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
   declarations: [CustomDefaultLoadingExampleComponent, LoadingSpinnerComponent],
-  imports: [BrowserModule, LoadFormModule, LoadableModule],
-  exports: [CustomDefaultLoadingExampleComponent],
+  imports: [
+    CommonModule,
+    LoadFormModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: CustomDefaultLoadingExampleComponent,
+      },
+    ]),
+    LoadableModule.forRoot({
+      defaultComponents: {
+        loading: LoadingSpinnerComponent,
+      },
+    }),
+  ],
 })
 export class CustomDefaultLoadingExampleModule {}
diff --git a/projects/example-app/src/app/examples/custom-default-loading-example/loading-spinner/loading-spinner.component.css b/projects/example-app/src/app/examples/custom-default-loading-example/loading-spinner/loading-spinner.component.css
index c9620da..6f86a8c 100644
--- a/projects/example-app/src/app/examples/custom-default-loading-example/loading-spinner/loading-spinner.component.css
+++ b/projects/example-app/src/app/examples/custom-default-loading-example/loading-spinner/loading-spinner.component.css
@@ -9,7 +9,7 @@
   position: absolute;
   left: 8px;
   width: 16px;
-  background: #fff;
+  background: #cccccc;
   animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
 }
 .lds-facebook div:nth-child(1) {
diff --git a/projects/example-app/src/app/examples/custom-loading-template-example/custom-loading-template-example.module.ts b/projects/example-app/src/app/examples/custom-loading-template-example/custom-loading-template-example.module.ts
index f877852..bd8ab92 100644
--- a/projects/example-app/src/app/examples/custom-loading-template-example/custom-loading-template-example.module.ts
+++ b/projects/example-app/src/app/examples/custom-loading-template-example/custom-loading-template-example.module.ts
@@ -1,13 +1,13 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { LoadableModule } from 'projects/ngx-loadable/src/lib/angular/loadable.module';
 import { CustomLoadingTemplateExampleComponent } from './custom-loading-template-example.component';
 import { LoadFormModule } from '../../load-form/load-form.module';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
   declarations: [CustomLoadingTemplateExampleComponent],
-  imports: [BrowserModule, LoadFormModule, LoadableModule],
+  imports: [CommonModule, LoadFormModule, LoadableModule],
   exports: [CustomLoadingTemplateExampleComponent],
 })
 export class CustomLoadingTemplateExampleModule {}
diff --git a/projects/example-app/src/app/examples/default-example/default-example.module.ts b/projects/example-app/src/app/examples/default-example/default-example.module.ts
index b004076..7955056 100644
--- a/projects/example-app/src/app/examples/default-example/default-example.module.ts
+++ b/projects/example-app/src/app/examples/default-example/default-example.module.ts
@@ -1,13 +1,13 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { LoadableModule } from 'projects/ngx-loadable/src/lib/angular/loadable.module';
 import { DefaultExampleComponent } from './default-example.component';
 import { LoadFormModule } from '../../load-form/load-form.module';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
   declarations: [DefaultExampleComponent],
-  imports: [BrowserModule, LoadFormModule, LoadableModule],
+  imports: [CommonModule, LoadFormModule, LoadableModule],
   exports: [DefaultExampleComponent],
 })
 export class DefaultExampleModule {}
diff --git a/projects/example-app/src/app/examples/lightweight-example/lightweight-example.module.ts b/projects/example-app/src/app/examples/lightweight-example/lightweight-example.module.ts
index 1b855b7..cd48deb 100644
--- a/projects/example-app/src/app/examples/lightweight-example/lightweight-example.module.ts
+++ b/projects/example-app/src/app/examples/lightweight-example/lightweight-example.module.ts
@@ -1,13 +1,13 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { LoadableModule } from 'projects/ngx-loadable/src/lib/angular/loadable.module';
 import { LightweightExampleComponent } from './lightweight-example.component';
 import { LoadFormModule } from '../../load-form/load-form.module';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
   declarations: [LightweightExampleComponent],
-  imports: [BrowserModule, LoadFormModule, LoadableModule],
+  imports: [CommonModule, LoadFormModule, LoadableModule],
   exports: [LightweightExampleComponent],
 })
 export class LightweightExampleModule {}
diff --git a/projects/example-app/src/app/examples/ngrx-example/ngrx-example.module.ts b/projects/example-app/src/app/examples/ngrx-example/ngrx-example.module.ts
index a2424a9..a031e2b 100644
--- a/projects/example-app/src/app/examples/ngrx-example/ngrx-example.module.ts
+++ b/projects/example-app/src/app/examples/ngrx-example/ngrx-example.module.ts
@@ -1,4 +1,3 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { NgrxExampleComponent } from './ngrx-example.component';
@@ -7,11 +6,12 @@ import { responseReducer } from './reducer';
 import { EffectsModule } from '@ngrx/effects';
 import { LoadEffects } from './effects';
 import { LoadableModule } from 'projects/ngx-loadable/src/lib/angular/loadable.module';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
   declarations: [NgrxExampleComponent],
   imports: [
-    BrowserModule,
+    CommonModule,
     LoadableModule,
     StoreModule.forRoot({
       response: responseReducer,