feat: lazy load home page and guides

Relates to #176

Author: Splaktar

src/app/app-module.ts

@@ -4,11 +4,9 @@ import {NgModule} from '@angular/core';
 import {LocationStrategy, PathLocationStrategy} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
-import {MatNativeDateModule} from '@angular/material/core';
 import {ExampleModule} from '@angular/components-examples';
 
 import {MaterialDocsApp} from './material-docs-app';
-import {HomepageModule} from './pages/homepage';
 import {MATERIAL_DOCS_ROUTES} from './routes';
 import {ComponentListModule} from './pages/component-list';
 import {ComponentViewerModule} from './pages/component-viewer/component-viewer';
@@ -25,12 +23,8 @@ import {NavBarModule} from './shared/navbar';
 import {ThemeStorage} from './shared/theme-picker/theme-storage/theme-storage';
 import {GuideItems} from './shared/guide-items/guide-items';
 import {DocumentationItems} from './shared/documentation-items/documentation-items';
-import {GuideListModule} from './pages/guide-list';
-import {GuideViewerModule} from './pages/guide-viewer';
 import {DocViewerModule} from './shared/doc-viewer/doc-viewer-module';
-import {
-  CanActivateComponentSidenav
-} from './pages/component-sidenav/component-sidenav-can-load-guard';
+import {CanActivateComponentSidenav} from './pages/component-sidenav/component-sidenav-can-load-guard';
 import {HttpClientModule} from '@angular/common/http';
 import {GaService} from './shared/ga/ga';
 
@@ -41,7 +35,6 @@ import {GaService} from './shared/ga/ga';
     ExampleModule,
     FormsModule,
     HttpClientModule,
-    MatNativeDateModule,
     RouterModule.forRoot(MATERIAL_DOCS_ROUTES, {
       scrollPositionRestoration: 'enabled',
       anchorScrolling: 'enabled',
@@ -54,9 +47,6 @@ import {GaService} from './shared/ga/ga';
     ComponentViewerModule,
     DocViewerModule,
     FooterModule,
-    GuideListModule,
-    GuideViewerModule,
-    HomepageModule,
     NavBarModule,
     StackBlitzButtonModule,
     SvgViewerModule,

src/app/pages/guide-list/guide-list.ts

@@ -1,7 +1,7 @@
 import {Component, NgModule, OnInit} from '@angular/core';
 import {GuideItems} from '../../shared/guide-items/guide-items';
 import {MatListModule} from '@angular/material/list';
-import {RouterModule} from '@angular/router';
+import {RouterModule, Routes} from '@angular/router';
 import {FooterModule} from '../../shared/footer/footer';
 import {CommonModule} from '@angular/common';
 import {ComponentPageTitle} from '../page-title/page-title';
@@ -19,9 +19,10 @@ export class GuideList implements OnInit {
   }
 }
 
+const routes: Routes = [ {path : '', component : GuideList} ];
 
 @NgModule({
-  imports: [MatListModule, RouterModule, FooterModule, CommonModule],
+  imports: [CommonModule, MatListModule, FooterModule, RouterModule.forChild(routes)],
   exports: [GuideList],
   declarations: [GuideList],
   providers: [GuideItems, ComponentPageTitle],

src/app/pages/guide-viewer/guide-viewer.ts

@@ -1,5 +1,5 @@
 import {Component, NgModule, OnInit} from '@angular/core';
-import {ActivatedRoute, RouterModule, Router} from '@angular/router';
+import {ActivatedRoute, Router, RouterModule, Routes} from '@angular/router';
 import {GuideItem, GuideItems} from '../../shared/guide-items/guide-items';
 import {FooterModule} from '../../shared/footer/footer';
 import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
@@ -37,8 +37,10 @@ export class GuideViewer implements OnInit {
   }
 }
 
+const routes: Routes = [ {path : '', component : GuideViewer} ];
+
 @NgModule({
-  imports: [DocViewerModule, FooterModule, RouterModule, TableOfContentsModule],
+  imports: [DocViewerModule, FooterModule, TableOfContentsModule, RouterModule.forChild(routes)],
   exports: [GuideViewer],
   declarations: [GuideViewer],
   providers: [GuideItems, ComponentPageTitle],

src/app/pages/homepage/homepage.ts

@@ -2,7 +2,7 @@ import {Component, NgModule, OnInit} from '@angular/core';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {MatButtonModule} from '@angular/material/button';
 import {FooterModule} from '../../shared/footer/footer';
-import {RouterModule} from '@angular/router';
+import {RouterModule, Routes} from '@angular/router';
 import {ComponentPageTitle} from '../page-title/page-title';
 
 @Component({
@@ -20,8 +20,10 @@ export class Homepage implements OnInit {
   }
 }
 
+const routes: Routes = [ {path : '', component : Homepage} ];
+
 @NgModule({
-  imports: [SvgViewerModule, MatButtonModule, FooterModule, RouterModule],
+  imports: [SvgViewerModule, MatButtonModule, FooterModule, RouterModule.forChild(routes)],
   exports: [Homepage],
   declarations: [Homepage],
 })

src/app/routes.ts

@@ -1,6 +1,4 @@
-import {Homepage} from './pages/homepage';
 import {ComponentList} from './pages/component-list';
-import {GuideList} from './pages/guide-list';
 import {Routes} from '@angular/router';
 import {
   ComponentApi,
@@ -10,19 +8,25 @@ import {
 } from './pages/component-viewer/component-viewer';
 import {ComponentCategoryList} from './pages/component-category-list/component-category-list';
 import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
-import {
-  CanActivateComponentSidenav
-} from './pages/component-sidenav/component-sidenav-can-load-guard';
-import {GuideViewer} from './pages/guide-viewer';
+import {CanActivateComponentSidenav} from './pages/component-sidenav/component-sidenav-can-load-guard';
 
 export const MATERIAL_DOCS_ROUTES: Routes = [
-  {path: '', component: Homepage, pathMatch: 'full', data: {}},
+  {
+    path: '', pathMatch: 'full',
+    loadChildren: () => import('./pages/homepage').then(m => m.HomepageModule)
+  },
   {path: 'categories', redirectTo: '/components/categories'},
-  {path: 'guides', component: GuideList, data: {}},
+  {
+    path: 'guides',
+    loadChildren: () => import('./pages/guide-list').then(m => m.GuideListModule)
+  },
   // Since https://github.com/angular/components/pull/9574, the cdk-table guide became the overview
   // document for the cdk table. To avoid any dead / broken links, we redirect to the new location.
   {path: 'guide/cdk-table', redirectTo: '/cdk/table/overview'},
-  {path: 'guide/:id', component: GuideViewer, data: {}},
+  {
+    path: 'guide/:id',
+    loadChildren: () => import('./pages/guide-viewer').then(m => m.GuideViewerModule)
+  },
   {
     path: ':section',
     canActivate: [CanActivateComponentSidenav],