feat: add lazy loading of components

brandonroberts · Jun 17, 2020 · c9d3e35 · c9d3e35
1 parent 8cf5f73
commit c9d3e35
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 31 deletions.
diff --git a/projects/router/src/lib/route.component.ts b/projects/router/src/lib/route.component.ts
@@ -3,9 +3,6 @@ import {
   OnInit,
   Input,
   Type,
-  ɵrenderComponent as renderComponent,
-  ɵmarkDirty as markDirty,
-  ɵcreateInjector as createInjector,
   ViewContainerRef,
   ComponentFactoryResolver,
   ContentChild,
@@ -55,7 +52,7 @@ export class RouteComponent implements OnInit {
   @Input() loadComponent: LoadComponent;
   @Input() reuse = true;
   @Input() redirectTo!: string;
-  // rendered = null;
+
   private destroy$ = new Subject();
   private _routeParams$ = new BehaviorSubject<Params>({});
   private _shouldRender$ = new BehaviorSubject<boolean>(false);
@@ -65,9 +62,10 @@ export class RouteComponent implements OnInit {
   route!: Route;
 
   constructor(
-    // private injector: Injector,
     private router: Router,
-    private routerComponent: RouterComponent
+    private routerComponent: RouterComponent,
+    private resolver: ComponentFactoryResolver,
+    private viewContainerRef: ViewContainerRef
   ) {}
 
   ngOnInit(): void {
@@ -78,8 +76,7 @@ export class RouteComponent implements OnInit {
 
     this.route = this.routerComponent.registerRoute({
       path,
-      // component: this.component,
-      // loadComponent: this.loadComponent,
+      loadComponent: this.loadComponent,
     });
 
     const activeRoute$ = this.routerComponent.activeRoute$.pipe(
@@ -100,7 +97,7 @@ export class RouteComponent implements OnInit {
               this.clearView();
             }
 
-            return this.loadAndRenderRoute(current.route);
+            return this.loadAndRender(current.route);
           }
         } else if (rendered) {
           return of(this.clearView());
@@ -110,37 +107,52 @@ export class RouteComponent implements OnInit {
       })
     );
 
-    // const routeParams$ = this._routeParams$
-    //   .pipe(
-    //     distinctUntilChanged(),
-    //     filter(() => !!this.rendered),
-    // tap(() => markDirty(this.rendered))
-    // );
-
     merge(activeRoute$).pipe(takeUntil(this.destroy$)).subscribe();
   }
 
   ngOnDestroy() {
     this.destroy$.next();
   }
 
-  private loadAndRenderRoute(route: Route) {
-    // if (route.loadComponent) {
-    //   return route.loadComponent().then((component) => {
-    //     return this.renderView(component);
-    //   });
-    // } else {
-    return of(this.renderView());
-    // }
+  private loadAndRender(route: Route) {
+    if (route.loadComponent) {
+      return route.loadComponent().then((component) => {
+        return this.renderComponent(component);
+      });
+    } else {
+      return of(this.showTemplate());
+    }
+  }
+
+  private renderComponent(component: Type<any>) {
+    const componentFactory = this.resolver.resolveComponentFactory(component);
+
+    this.showTemplate();
+    this.viewContainerRef.createComponent(componentFactory, this.viewContainerRef.length, this.viewContainerRef.injector);
+
+    return of(true);
   }
 
-  private renderView() {
+  private clearComponent() {
+    this.viewContainerRef.clear();
+    this.hideTemplate();
+  }
+
+  private showTemplate() {
     setTimeout(() => {
       this._shouldRender$.next(true);
     });
   }
 
-  private clearView() {
+  private hideTemplate() {
     this._shouldRender$.next(false);
   }
+
+  private clearView() {
+    if (this.loadComponent) {
+      this.clearComponent();
+    } else {
+      this.hideTemplate();
+    }
+  }
 }
diff --git a/projects/router/src/lib/route.ts b/projects/router/src/lib/route.ts
@@ -7,7 +7,7 @@ export type LoadComponent = () => Promise<Type<any>>;
 export interface Route {
   path: string;
   // component?: Type<any>;
-  // loadComponent?: LoadComponent;
+  loadComponent?: LoadComponent;
   matcher?: RegExp;
 }
 

diff --git a/src/app/core/components/layout/layout.component.ts b/src/app/core/components/layout/layout.component.ts
@@ -19,7 +19,6 @@ import { FooterComponentModule } from '../../../shared/footer/footer.component';
 
 import { PageComponentModule } from '../page/page.component';
 import { RedirectComponent } from '../redirect/redirect.component';
-import { BlogComponentModule } from '../../../blog/blog/blog.component';
 import { PageNotFoundComponentModule } from '../page-not-found/page-not-found.component';
 
 @Component({
@@ -83,8 +82,7 @@ import { PageNotFoundComponentModule } from '../page-not-found/page-not-found.co
 
         <div class="content" [class.container]="!(isHandset$ | async)">
           <router>
-            <route path="/blog/**">
-              <app-blog *routeComponent></app-blog>
+            <route path="/blog/**" [loadComponent]="components.blog">
             </route>
             <route path="/404">
               <app-page-not-found *routeComponent></app-page-not-found>
@@ -159,6 +157,10 @@ import { PageNotFoundComponentModule } from '../page-not-found/page-not-found.co
   ],
 })
 export class LayoutComponent {
+  components = {
+    blog: () => import('../../../blog/blog/blog.component').then(m => m.BlogComponent)
+  };
+
   isHandset$: Observable<boolean> = this.breakpointObserver
     .observe(Breakpoints.Handset)
     .pipe(map((result) => result.matches));
@@ -177,7 +179,6 @@ export class LayoutComponent {
     MatSidenavModule,
     MatIconModule,
     MatListModule,
-    BlogComponentModule,
     PageComponentModule,
     PageNotFoundComponentModule,
     FooterComponentModule,