Show default module loading spinner

fboeller · Mar 7, 2021 · c0505de · c0505de
1 parent 7944cfb
commit c0505de
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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/.../src/app/examples/custom-default-loading-example/custom-default-loading-example.module.ts b/.../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/...app/examples/custom-default-loading-example/loading-spinner/loading-spinner.component.css b/...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/...rc/app/examples/custom-loading-template-example/custom-loading-template-example.module.ts b/...rc/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
@@ -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
@@ -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
@@ -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,