diff --git a/src/app/app-module.ts b/src/app/app-module.ts
index 9aaed7997..921dc1d91 100644
--- a/src/app/app-module.ts
+++ b/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 {}
diff --git a/src/app/pages/component-category-list/component-category-list.ts b/src/app/pages/component-category-list/component-category-list.ts
index 2153e9139..34f978052 100644
--- a/src/app/pages/component-category-list/component-category-list.ts
+++ b/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 { }
diff --git a/src/app/pages/component-list/component-list.ts b/src/app/pages/component-list/component-list.ts
index af1ae40ab..5e9f2fe54 100644
--- a/src/app/pages/component-list/component-list.ts
+++ b/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 { }
diff --git a/src/app/pages/component-page-header/component-page-header.ts b/src/app/pages/component-page-header/component-page-header.ts
index 6379bceb2..d7ee835ab 100644
--- a/src/app/pages/component-page-header/component-page-header.ts
+++ b/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 { }
diff --git a/src/app/pages/component-sidenav/component-sidenav-can-load-guard.ts b/src/app/pages/component-sidenav/component-sidenav-can-load-guard.ts
index 9948f140b..67b73c75f 100644
--- a/src/app/pages/component-sidenav/component-sidenav-can-load-guard.ts
+++ b/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; }
diff --git a/src/app/pages/component-sidenav/component-sidenav.ts b/src/app/pages/component-sidenav/component-sidenav.ts
index be5b83c67..4d6ec07c8 100644
--- a/src/app/pages/component-sidenav/component-sidenav.ts
+++ b/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],
diff --git a/src/app/pages/component-viewer/component-viewer.ts b/src/app/pages/component-viewer/component-viewer.ts
index 7012834b3..ae1562a9d 100644
--- a/src/app/pages/component-viewer/component-viewer.ts
+++ b/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 {}
diff --git a/src/app/pages/guide-list/guide-list.ts b/src/app/pages/guide-list/guide-list.ts
index 9a4e06a1b..b126fadf0 100644
--- a/src/app/pages/guide-list/guide-list.ts
+++ b/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 { }
diff --git a/src/app/pages/guide-viewer/guide-viewer.ts b/src/app/pages/guide-viewer/guide-viewer.ts
index 2fd7a23d8..ea204f174 100644
--- a/src/app/pages/guide-viewer/guide-viewer.ts
+++ b/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 {}
diff --git a/src/app/pages/homepage/homepage.ts b/src/app/pages/homepage/homepage.ts
index a33063974..22cc71ceb 100644
--- a/src/app/pages/homepage/homepage.ts
+++ b/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],
 })
diff --git a/src/app/pages/page-title/page-title.ts b/src/app/pages/page-title/page-title.ts
index 1b32dbc3e..9bf09fd09 100644
--- a/src/app/pages/page-title/page-title.ts
+++ b/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';
diff --git a/src/app/routes.ts b/src/app/routes.ts
index b20373b72..3498ee96d 100644
--- a/src/app/routes.ts
+++ b/src/app/routes.ts
@@ -1,55 +1,28 @@
-import {Homepage} from './pages/homepage';
-import {ComponentList} from './pages/component-list';
-import {GuideList} from './pages/guide-list';
 import {Routes} from '@angular/router';
-import {
-  ComponentApi,
-  ComponentExamples,
-  ComponentOverview,
-  ComponentViewer
-} 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],
-    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'},
-        ],
-      },
-    ],
+    loadChildren: () =>
+      import('./pages/component-sidenav/component-sidenav').then(m => m.ComponentSidenavModule)
   },
   {path: '**', redirectTo: ''},
 ];
diff --git a/src/app/shared/doc-viewer/doc-viewer-module.ts b/src/app/shared/doc-viewer/doc-viewer-module.ts
index 6423f936d..7d919612b 100644
--- a/src/app/shared/doc-viewer/doc-viewer-module.ts
+++ b/src/app/shared/doc-viewer/doc-viewer-module.ts
@@ -1,6 +1,6 @@
 import {DocViewer} from './doc-viewer';
 import {ExampleViewer} from '../example-viewer/example-viewer';
-import {StackBlitzButtonModule} from '../stack-blitz/stack-blitz-button';
+import {StackBlitzButtonModule} from '../stack-blitz';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
@@ -16,12 +16,12 @@ import {CopierService} from '../copier/copier.service';
 // ExampleViewer is included in the DocViewerModule because they have a circular dependency.
 @NgModule({
   imports: [
+    CommonModule,
     MatButtonModule,
     MatIconModule,
     MatTooltipModule,
     MatSnackBarModule,
     MatTabsModule,
-    CommonModule,
     PortalModule,
     StackBlitzButtonModule
   ],
diff --git a/src/app/shared/ga/ga.ts b/src/app/shared/ga/ga.ts
index 93584edec..fa2d983da 100644
--- a/src/app/shared/ga/ga.ts
+++ b/src/app/shared/ga/ga.ts
@@ -2,12 +2,12 @@ import {Injectable} from '@angular/core';
 
 import {environment} from '../../../environments/environment';
 
-@Injectable()
 /**
  * Google Analytics Service - captures app behaviors and sends them to Google Analytics (GA).
  * Presupposes that GA script has been loaded from a script on the host web page.
  * Associates data with a GA "property" from the environment (`gaId`).
  */
+@Injectable({providedIn: 'root'})
 export class GaService {
 
   private previousUrl: string;
diff --git a/src/app/shared/navbar/navbar.ts b/src/app/shared/navbar/navbar.ts
index bda2bbb95..f4ed8ddaa 100644
--- a/src/app/shared/navbar/navbar.ts
+++ b/src/app/shared/navbar/navbar.ts
@@ -3,9 +3,12 @@ import {CommonModule} from '@angular/common';
 import {MatButtonModule} from '@angular/material/button';
 import {MatMenuModule} from '@angular/material/menu';
 import {RouterModule} from '@angular/router';
-import {ThemePickerModule} from '../theme-picker/theme-picker';
+import {ThemePickerModule} from '../theme-picker';
 import {VersionPickerModule} from '../version-picker';
 import {SECTIONS} from '../documentation-items/documentation-items';
+import {ThemeStorage} from '../theme-picker/theme-storage/theme-storage';
+import {StyleManager} from '../style-manager';
+import {HttpClientModule} from '@angular/common/http';
 
 const SECTIONS_KEYS = Object.keys(SECTIONS);
 
@@ -28,14 +31,16 @@ export class NavBar {
 
 @NgModule({
   imports: [
+    CommonModule,
+    HttpClientModule,
     MatButtonModule,
     MatMenuModule,
     RouterModule,
     ThemePickerModule,
     VersionPickerModule,
-    CommonModule
   ],
   exports: [NavBar],
   declarations: [NavBar],
+  providers: [StyleManager, ThemeStorage]
 })
 export class NavBarModule {}