Lazy load documentation modules

src/app/app-module.ts

@@ -2,77 +2,25 @@ import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 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';
-import {ComponentCategoryListModule} from './pages/component-category-list/component-category-list';
-import {ComponentSidenavModule} from './pages/component-sidenav/component-sidenav';
-import {FooterModule} from './shared/footer/footer';
-import {ComponentPageTitle} from './pages/page-title/page-title';
-import {ComponentHeaderModule} from './pages/component-page-header/component-page-header';
-import {StyleManager} from './shared/style-manager';
-import {SvgViewerModule} from './shared/svg-viewer/svg-viewer';
-import {ThemePickerModule} from './shared/theme-picker';
-import {StackBlitzButtonModule} from './shared/stack-blitz';
 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 {HttpClientModule} from '@angular/common/http';
-import {GaService} from './shared/ga/ga';
 
 @NgModule({
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    ExampleModule,
-    FormsModule,
-    HttpClientModule,
-    MatNativeDateModule,
     RouterModule.forRoot(MATERIAL_DOCS_ROUTES, {
       scrollPositionRestoration: 'enabled',
       anchorScrolling: 'enabled',
       relativeLinkResolution: 'corrected'
     }),
-    ComponentCategoryListModule,
-    ComponentHeaderModule,
-    ComponentListModule,
-    ComponentSidenavModule,
-    ComponentViewerModule,
-    DocViewerModule,
-    FooterModule,
-    GuideListModule,
-    GuideViewerModule,
-    HomepageModule,
     NavBarModule,
-    StackBlitzButtonModule,
-    SvgViewerModule,
-    ThemePickerModule,
   ],
   declarations: [MaterialDocsApp],
-  providers: [
-    ComponentPageTitle,
-    DocumentationItems,
-    GaService,
-    GuideItems,
-    StyleManager,
-    ThemeStorage,
-    CanActivateComponentSidenav,
-    {provide: LocationStrategy, useClass: PathLocationStrategy},
-  ],
+  providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}],
   bootstrap: [MaterialDocsApp],
 })
 export class AppModule {}

src/app/pages/component-category-list/component-category-list.ts

@@ -43,9 +43,9 @@ export class ComponentCategoryList implements OnInit, OnDestroy {
 }
 
 @NgModule({
-  imports: [SvgViewerModule, MatCardModule, CommonModule, RouterModule],
+  imports: [CommonModule, SvgViewerModule, MatCardModule, RouterModule],
   exports: [ComponentCategoryList],
   declarations: [ComponentCategoryList],
-  providers: [DocumentationItems, ComponentPageTitle],
+  providers: [DocumentationItems],
 })
 export class ComponentCategoryListModule { }

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

@@ -38,9 +38,9 @@ export class ComponentList {
 }
 
 @NgModule({
-  imports: [SvgViewerModule, RouterModule, CommonModule, MatCardModule],
+  imports: [CommonModule, SvgViewerModule, MatCardModule, RouterModule],
   exports: [ComponentList],
   declarations: [ComponentList],
-  providers: [DocumentationItems, ComponentPageTitle],
+  providers: [DocumentationItems],
 })
 export class ComponentListModule { }

src/app/pages/component-page-header/component-page-header.ts

@@ -23,6 +23,5 @@ export class ComponentPageHeader {
   imports: [MatButtonModule, MatIconModule, NavigationFocusModule],
   exports: [ComponentPageHeader],
   declarations: [ComponentPageHeader],
-  providers: [ComponentPageTitle],
 })
 export class ComponentHeaderModule { }

src/app/pages/component-sidenav/component-sidenav-can-load-guard.ts

@@ -3,17 +3,17 @@ import {CanActivate, ActivatedRouteSnapshot, Router, RouterStateSnapshot} from '
 import {SECTIONS} from '../../shared/documentation-items/documentation-items';
 
 /**
- * Guard to determine if the sidenav can load, based on if the section exists in documentation
+ * Guard to determine if the sidenav can load, based on whether the section exists in documentation
  * items.
  */
-@Injectable()
+@Injectable({providedIn: 'root'})
 export class CanActivateComponentSidenav implements CanActivate {
   constructor(private router: Router) {}
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
-    // Searches if the section defined the base UrlSegment is a valid section from the documentation
-    // items.  If found, returns true to allow activation, otherwise blocks activation and navigates
-    // to '/'.
+    // Searches if the section defined in the base UrlSegment is a valid section from the
+    // documentation items. If found, returns true to allow activation, otherwise blocks activation
+    // and navigates to '/'.
     const sectionFound = Object.keys(SECTIONS).find(
       (val => val.toLowerCase() === route.url[0].path.toLowerCase()));
     if (sectionFound) { return true; }

src/app/pages/component-sidenav/component-sidenav.ts

@@ -1,19 +1,42 @@
 import {
-  Component, Input, NgZone, ViewEncapsulation, ViewChild, OnInit, NgModule, OnDestroy
+  Component,
+  Input,
+  NgModule,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {MatIconModule} from '@angular/material/icon';
 import {MatSidenav, MatSidenavModule} from '@angular/material/sidenav';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {ActivatedRoute, Params, Router, RouterModule} from '@angular/router';
+import {ActivatedRoute, Params, Router, RouterModule, Routes} from '@angular/router';
 import {CommonModule} from '@angular/common';
 import {ComponentHeaderModule} from '../component-page-header/component-page-header';
 import {FooterModule} from '../../shared/footer/footer';
-import {Observable, Subject, combineLatest} from 'rxjs';
-import {switchMap, takeUntil, startWith, map} from 'rxjs/operators';
-import {trigger, animate, state, style, transition} from '@angular/animations';
+import {combineLatest, Observable, Subject} from 'rxjs';
+import {map, startWith, switchMap, takeUntil} from 'rxjs/operators';
+import {animate, state, style, transition, trigger} from '@angular/animations';
 import {CdkAccordionModule} from '@angular/cdk/accordion';
 import {BreakpointObserver} from '@angular/cdk/layout';
+import {
+  ComponentCategoryList,
+  ComponentCategoryListModule
+} from '../component-category-list/component-category-list';
+import {ComponentList, ComponentListModule} from '../component-list';
+import {
+  ComponentApi,
+  ComponentExamples,
+  ComponentOverview,
+  ComponentViewer, ComponentViewerModule
+} from '../component-viewer/component-viewer';
+import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
+import {FormsModule} from '@angular/forms';
+import {HttpClientModule} from '@angular/common/http';
+import {StackBlitzButtonModule} from '../../shared/stack-blitz';
+import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
+import {ExampleModule} from '@angular/components-examples';
 
 const SMALL_WIDTH_BREAKPOINT = 720;
 
@@ -56,7 +79,6 @@ export class ComponentSidenav implements OnInit {
   ],
 })
 export class ComponentNav implements OnInit, OnDestroy {
-
   @Input() params: Observable<Params>;
   expansions: {[key: string]: boolean} = {};
   private _onDestroy = new Subject<void>();
@@ -113,20 +135,54 @@ export class ComponentNav implements OnInit, OnDestroy {
   getExpanded(category: string): boolean {
     return this.expansions[category] === undefined ? true : this.expansions[category];
   }
-
 }
 
+const routes: Routes = [ {
+  path : '',
+  component : ComponentSidenav,
+  children : [
+    {path : '', redirectTo : 'categories', pathMatch : 'full'},
+    {path : 'component/:id', redirectTo : ':id', pathMatch : 'full'},
+    {path : 'category/:id', redirectTo : '/categories/:id', pathMatch : 'full'},
+    {
+      path : 'categories',
+      children : [
+        {path : '', component : ComponentCategoryList},
+        {path : ':id', component : ComponentList},
+      ],
+    },
+    {
+      path : ':id',
+      component : ComponentViewer,
+      children : [
+        {path : '', redirectTo : 'overview', pathMatch : 'full'},
+        {path : 'overview', component : ComponentOverview, pathMatch : 'full'},
+        {path : 'api', component : ComponentApi, pathMatch : 'full'},
+        {path : 'examples', component : ComponentExamples, pathMatch : 'full'},
+        {path : '**', redirectTo : 'overview'},
+      ],
+    },
+  ]
+} ];
 
 @NgModule({
   imports: [
-    MatSidenavModule,
-    RouterModule,
     CommonModule,
+    ComponentCategoryListModule,
     ComponentHeaderModule,
+    ComponentListModule,
+    ComponentViewerModule,
+    DocViewerModule,
+    ExampleModule,
     FooterModule,
-    BrowserAnimationsModule,
+    FormsModule,
+    HttpClientModule,
+    CdkAccordionModule,
     MatIconModule,
-    CdkAccordionModule
+    MatSidenavModule,
+    StackBlitzButtonModule,
+    SvgViewerModule,
+    RouterModule.forChild(routes)
   ],
   exports: [ComponentSidenav],
   declarations: [ComponentSidenav, ComponentNav],

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

@@ -151,6 +151,6 @@ export class ComponentExamples extends ComponentBaseView {
   ],
   exports: [ComponentViewer],
   declarations: [ComponentViewer, ComponentOverview, ComponentApi, ComponentExamples],
-  providers: [DocumentationItems, ComponentPageTitle],
+  providers: [DocumentationItems],
 })
 export class ComponentViewerModule {}

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,11 +19,12 @@ 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],
+  providers: [GuideItems],
 })
 export class GuideListModule { }

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,10 +37,12 @@ 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],
+  providers: [GuideItems],
 })
 export class GuideViewerModule {}

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/pages/page-title/page-title.ts

@@ -4,7 +4,7 @@ import {Title} from '@angular/platform-browser';
 /**
  * Service responsible for setting the title that appears above the components and guide pages.
  */
-@Injectable()
+@Injectable({providedIn: 'root'})
 export class ComponentPageTitle {
   _title = '';
   _originalTitle = 'Angular Material UI component library';