diff --git a/karma.conf.js b/karma.conf.js
index a97bab555..63a6b6252 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -16,7 +16,8 @@ module.exports = function (config) {
       require('karma-sauce-launcher'),
     ],
     files: [
-      { pattern: './src/test.ts', watched: false }
+      {pattern: './src/test.ts', watched: false},
+      {pattern: 'node_modules/hammerjs/hammer.js', included: true, watched: false},
     ],
     preprocessors: {
       './src/test.ts': ['@angular/cli']
diff --git a/package.json b/package.json
index 7e3d4095e..4e1084e00 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@angular/compiler-cli": "^4.0.0",
     "@types/jasmine": "^2.5.41",
     "@types/node": "^7.0.5",
+    "hammerjs": "^2.0.8",
     "highlight.js": "^9.9.0",
     "jasmine-core": "2.4.1",
     "jasmine-spec-reporter": "2.5.0",
diff --git a/src/app/app-module.ts b/src/app/app-module.ts
index b0d1407cb..9937d934c 100644
--- a/src/app/app-module.ts
+++ b/src/app/app-module.ts
@@ -1,92 +1,69 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {NgModule} from '@angular/core';
-import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
+import {LocationStrategy, PathLocationStrategy} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {HttpModule} from '@angular/http';
-import {
-  MdButtonModule,
-  MdCardModule,
-  MdGridListModule,
-  MdIconModule,
-  MdListModule,
-  MdMenuModule,
-  MdNativeDateModule,
-  MdSidenavModule, MdTabsModule,
-  MdToolbarModule,
-  MdTooltipModule, PortalModule,
-} from '@angular/material';
+import {RouterModule} from '@angular/router';
+import {MdNativeDateModule} from '@angular/material';
 import {ExampleModule} from '@angular/material-examples';
 
 import {MaterialDocsApp} from './material-docs-app';
-import {Homepage} from './pages/homepage/homepage';
-import {routing} from './routes';
-import {ComponentList} from './pages/component-list/component-list';
-import {ComponentViewer} from './pages/component-viewer/component-viewer';
-import {GuideList} from './pages/guide-list';
-import {GuideViewer} from './pages/guide-viewer';
-import {SharedModule} from './shared/shared-module';
-import {ComponentCategoryList} from './pages/component-category-list/component-category-list';
-import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
-import {Footer} from './shared/footer/footer';
+import {HomepageModule} from './pages/homepage/homepage';
+import {MATERIAL_DOCS_ROUTES} from './routes';
+import {ComponentListModule} from './pages/component-list/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 {ComponentPageHeader} from './pages/component-page-header/component-page-header';
+import {ComponentHeaderModule} from './pages/component-page-header/component-page-header';
 import {StyleManager} from './shared/style-manager/style-manager';
-
-
-export const MATERIAL_COMPONENTS_USED = [
-  MdButtonModule,
-  MdCardModule,
-  MdGridListModule,
-  MdIconModule,
-  MdListModule,
-  MdMenuModule,
-  MdSidenavModule,
-  MdTabsModule,
-  MdToolbarModule,
-  MdTooltipModule,
-  PortalModule,
-];
+import {SvgViewerModule} from './shared/svg-viewer/svg-viewer';
+import {ThemePickerModule} from './shared/theme-picker/theme-picker';
+import {PlunkerButtonModule} from './shared/plunker/plunker-button';
+import {NavBarModule} from './shared/navbar/navbar';
+import {ExampleViewer} from './shared/example-viewer/example-viewer';
+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/guide-list';
+import {GuideViewerModule} from './pages/guide-viewer/guide-viewer';
+import {DocViewerModule} from './shared/doc-viewer/doc-viewer-module';
 
 @NgModule({
-  imports: MATERIAL_COMPONENTS_USED,
-  exports: MATERIAL_COMPONENTS_USED,
-})
-export class DocsMaterialModule {}
-
-
-@NgModule({
-  declarations: [
-    MaterialDocsApp,
-    ComponentCategoryList,
-    ComponentList,
-    ComponentSidenav,
-    ComponentViewer,
-    ComponentPageHeader,
-    GuideList,
-    GuideViewer,
-    Homepage,
-    Footer,
-  ],
-  exports: [
-    MaterialDocsApp,
-    Homepage,
-  ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     ExampleModule,
-    SharedModule,
     FormsModule,
     HttpModule,
-    DocsMaterialModule,
     MdNativeDateModule,
-    routing,
+    RouterModule.forRoot(MATERIAL_DOCS_ROUTES),
+
+    ComponentCategoryListModule,
+    ComponentHeaderModule,
+    ComponentListModule,
+    ComponentSidenavModule,
+    ComponentViewerModule,
+    DocViewerModule,
+    FooterModule,
+    GuideListModule,
+    GuideListModule,
+    GuideViewerModule,
+    HomepageModule,
+    NavBarModule,
+    PlunkerButtonModule,
+    SvgViewerModule,
+    ThemePickerModule,
   ],
+  declarations: [MaterialDocsApp],
   providers: [
-    Location,
     ComponentPageTitle,
+    DocumentationItems,
+    GuideItems,
     StyleManager,
+    ThemeStorage,
     {provide: LocationStrategy, useClass: PathLocationStrategy},
   ],
   bootstrap: [MaterialDocsApp],
diff --git a/src/app/material-docs-app.spec.ts b/src/app/material-docs-app.spec.ts
deleted file mode 100644
index 3e6dca7c5..000000000
--- a/src/app/material-docs-app.spec.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-
-describe('Material Docs', () => {
-
-
-  it('should expect true to be true', () => {
-    expect(true).toBe(true);
-  });
-
-});
diff --git a/src/app/pages/component-category-list/component-category-list.spec.ts b/src/app/pages/component-category-list/component-category-list.spec.ts
index 87a617a10..f5d1e99ca 100644
--- a/src/app/pages/component-category-list/component-category-list.spec.ts
+++ b/src/app/pages/component-category-list/component-category-list.spec.ts
@@ -1,10 +1,6 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {MaterialModule} from '@angular/material';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-
-import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
-import {ComponentPageTitle} from '../page-title/page-title';
-import {ComponentCategoryList} from './component-category-list';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentCategoryList, ComponentCategoryListModule} from './component-category-list';
+import {DocsAppTestingModule} from '../../testing/testing-module';
 
 
 describe('ComponentCategoryList', () => {
@@ -12,18 +8,14 @@ describe('ComponentCategoryList', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      declarations: [ComponentCategoryList],
-      providers: [
-        DocumentationItems,
-        ComponentPageTitle
-      ]
-    });
-
-    fixture = TestBed.createComponent(ComponentCategoryList)
+      imports: [ComponentCategoryListModule, DocsAppTestingModule],
+    }).compileComponents();
   }));
 
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ComponentCategoryList);
+  });
+
   it('should set page title on init', () => {
     const component = fixture.componentInstance;
     spyOn(component, 'ngOnInit').and.callThrough();
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 caf01b8e4..8630cd050 100644
--- a/src/app/pages/component-category-list/component-category-list.ts
+++ b/src/app/pages/component-category-list/component-category-list.ts
@@ -1,6 +1,10 @@
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
+import {MdCardModule} from '@angular/material';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {ComponentPageTitle} from '../page-title/page-title';
+import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 
 
 @Component({
@@ -16,3 +20,11 @@ export class ComponentCategoryList {
     this._componentPageTitle.title = 'Component Library';
   }
 }
+
+@NgModule({
+  imports: [SvgViewerModule, MdCardModule, CommonModule, RouterModule],
+  exports: [ComponentCategoryList],
+  declarations: [ComponentCategoryList],
+  providers: [DocumentationItems, ComponentPageTitle],
+})
+export class ComponentCategoryListModule { }
diff --git a/src/app/pages/component-list/component-list.spec.ts b/src/app/pages/component-list/component-list.spec.ts
index 36d21cda5..db140c5ff 100644
--- a/src/app/pages/component-list/component-list.spec.ts
+++ b/src/app/pages/component-list/component-list.spec.ts
@@ -1,13 +1,8 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {MaterialModule} from '@angular/material';
-import {ActivatedRoute, Router} from '@angular/router';
-import {RouterTestingModule} from '@angular/router/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {ActivatedRoute} from '@angular/router';
 import {Observable} from 'rxjs/Observable';
-
-import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
-import {ComponentPageTitle} from '../page-title/page-title';
-import {ComponentList} from './component-list';
+import {ComponentList, ComponentListModule} from './component-list';
+import {DocsAppTestingModule} from '../../testing/testing-module';
 
 const CATEGORY_ID = 'forms';
 const mockActivatedRoute = {
@@ -22,18 +17,16 @@ describe('ComponentList', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule, RouterTestingModule],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      declarations: [ComponentList],
+      imports: [ComponentListModule, DocsAppTestingModule],
       providers: [
-        {provide: ActivatedRoute, useValue: mockActivatedRoute},
-        ComponentPageTitle,
-        DocumentationItems,
+        {provide: ActivatedRoute, useValue: mockActivatedRoute}
       ]
-    });
+    }).compileComponents();
+  }));
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(ComponentList);
-  }));
+  });
 
   it('should set the category from router params', done => {
     const component = fixture.componentInstance;
diff --git a/src/app/pages/component-list/component-list.ts b/src/app/pages/component-list/component-list.ts
index 5ad1467cf..051a89266 100644
--- a/src/app/pages/component-list/component-list.ts
+++ b/src/app/pages/component-list/component-list.ts
@@ -1,10 +1,12 @@
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
 import {
   DocumentationItems,
   DocCategory
 } from '../../shared/documentation-items/documentation-items';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, RouterModule} from '@angular/router';
 import {ComponentPageTitle} from '../page-title/page-title';
+import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
+import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'app-components',
@@ -23,3 +25,11 @@ export class ComponentList {
     });
   }
 }
+
+@NgModule({
+  imports: [SvgViewerModule, RouterModule, CommonModule],
+  exports: [ComponentList],
+  declarations: [ComponentList],
+  providers: [DocumentationItems, ComponentPageTitle],
+})
+export class ComponentListModule { }
diff --git a/src/app/pages/component-page-header/component-page-header.spec.ts b/src/app/pages/component-page-header/component-page-header.spec.ts
index 21a511c06..5a0203c44 100644
--- a/src/app/pages/component-page-header/component-page-header.spec.ts
+++ b/src/app/pages/component-page-header/component-page-header.spec.ts
@@ -1,9 +1,6 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {MaterialModule} from '@angular/material';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-
-import {ComponentPageTitle} from '../page-title/page-title';
-import {ComponentPageHeader} from './component-page-header';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentHeaderModule, ComponentPageHeader} from './component-page-header';
+import {DocsAppTestingModule} from '../../testing/testing-module';
 
 
 describe('ComponentPageHeader', () => {
@@ -11,14 +8,13 @@ describe('ComponentPageHeader', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      declarations: [ComponentPageHeader],
-      providers: [ComponentPageTitle],
-    });
+      imports: [ComponentHeaderModule, DocsAppTestingModule],
+    }).compileComponents();
+  }));
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(ComponentPageHeader);
-  }));
+  });
 
   it('should return the title', () => {
     const component = fixture.componentInstance;
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 7b1f5cdc7..624f53684 100644
--- a/src/app/pages/component-page-header/component-page-header.ts
+++ b/src/app/pages/component-page-header/component-page-header.ts
@@ -1,6 +1,7 @@
-import {Component, EventEmitter, Output} from '@angular/core';
+import {Component, EventEmitter, NgModule, Output} from '@angular/core';
 import 'rxjs/add/operator/first';
 import {ComponentPageTitle} from '../page-title/page-title';
+import {MdButtonModule, MdIconModule} from '@angular/material';
 
 @Component({
   selector: 'component-page-header',
@@ -16,3 +17,11 @@ export class ComponentPageHeader {
     return this._componentPageTitle.title;
   }
 }
+
+@NgModule({
+  imports: [MdButtonModule, MdIconModule],
+  exports: [ComponentPageHeader],
+  declarations: [ComponentPageHeader],
+  providers: [ComponentPageTitle],
+})
+export class ComponentHeaderModule { }
diff --git a/src/app/pages/component-sidenav/component-sidenav.spec.ts b/src/app/pages/component-sidenav/component-sidenav.spec.ts
index 5b9022373..7bfcb4bbf 100644
--- a/src/app/pages/component-sidenav/component-sidenav.spec.ts
+++ b/src/app/pages/component-sidenav/component-sidenav.spec.ts
@@ -1,19 +1,7 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {MaterialModule, MdSidenav} from '@angular/material';
-import {RouterTestingModule} from '@angular/router/testing';
-import {Observable} from 'rxjs/Observable';
-import {Router} from '@angular/router';
-import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '@angular/core';
-
-import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
-import {ComponentSidenav} from './component-sidenav';
-
-const mockRouter = {
-  events: Observable.create(observer => {
-    observer.next(null);
-    observer.complete();
-  })
-};
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {MdSidenav} from '@angular/material';
+import {ComponentSidenav, ComponentSidenavModule} from './component-sidenav';
+import {DocsAppTestingModule} from '../../testing/testing-module';
 
 
 describe('ComponentSidenav', () => {
@@ -21,17 +9,13 @@ describe('ComponentSidenav', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
-      schemas: [NO_ERRORS_SCHEMA],
-      declarations: [ComponentSidenav],
-      providers: [
-        {provide: Router, useValue: mockRouter},
-        DocumentationItems
-      ],
-    });
+      imports: [ComponentSidenavModule, DocsAppTestingModule],
+    }).compileComponents();
+  }));
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(ComponentSidenav);
-  }));
+  });
 
   it('should close the sidenav on init', () => {
     const component = fixture.componentInstance;
@@ -41,14 +25,11 @@ describe('ComponentSidenav', () => {
       matches: true
     });
 
-    // Spy on viewChild component's `close` method
-    spyOn(component.sidenav, 'close');
-
     fixture.detectChanges();
 
     expect(component.sidenav instanceof MdSidenav).toBeTruthy();
     expect(component.isScreenSmall()).toBeTruthy();
-    expect(component.sidenav.close).toHaveBeenCalled();
+    expect(component.sidenav.opened).toBe(false);
   });
 
   it('should show a link for each item in doc items categories', () => {
diff --git a/src/app/pages/component-sidenav/component-sidenav.ts b/src/app/pages/component-sidenav/component-sidenav.ts
index 0b6e73973..8e3f4c253 100644
--- a/src/app/pages/component-sidenav/component-sidenav.ts
+++ b/src/app/pages/component-sidenav/component-sidenav.ts
@@ -1,7 +1,10 @@
-import {Component, ViewEncapsulation, ViewChild} from '@angular/core';
+import {Component, ViewEncapsulation, ViewChild, OnInit, NgModule} from '@angular/core';
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
-import {MdSidenav} from '@angular/material';
-import {Router} from '@angular/router';
+import {MdSidenav, MdSidenavModule} from '@angular/material';
+import {Router, RouterModule} from '@angular/router';
+import {CommonModule} from '@angular/common';
+import {ComponentHeaderModule} from '../component-page-header/component-page-header';
+import {FooterModule} from '../../shared/footer/footer';
 
 const SMALL_WIDTH_BREAKPOINT = 840;
 
@@ -11,7 +14,7 @@ const SMALL_WIDTH_BREAKPOINT = 840;
   styleUrls: ['./component-sidenav.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-export class ComponentSidenav {
+export class ComponentSidenav implements OnInit {
   constructor(public docItems: DocumentationItems,
               private _router: Router) {}
 
@@ -29,3 +32,12 @@ export class ComponentSidenav {
     return window.matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`).matches;
   }
 }
+
+
+@NgModule({
+  imports: [MdSidenavModule, RouterModule, CommonModule, ComponentHeaderModule, FooterModule],
+  exports: [ComponentSidenav],
+  declarations: [ComponentSidenav],
+  providers: [DocumentationItems],
+})
+export class ComponentSidenavModule {}
diff --git a/src/app/pages/component-viewer/component-viewer.spec.ts b/src/app/pages/component-viewer/component-viewer.spec.ts
index b64b6d232..7dcf9f475 100644
--- a/src/app/pages/component-viewer/component-viewer.spec.ts
+++ b/src/app/pages/component-viewer/component-viewer.spec.ts
@@ -1,50 +1,57 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {RouterTestingModule} from '@angular/router/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {ActivatedRoute} from '@angular/router';
-import {MaterialModule} from '@angular/material';
 import {Observable} from 'rxjs/Observable';
+import {ComponentViewer, ComponentViewerModule} from './component-viewer';
+import {DocsAppTestingModule} from '../../testing/testing-module';
 
-import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
-import {ComponentPageTitle} from '../page-title/page-title';
-import {ComponentViewer} from './component-viewer';
+import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
+import {MdButtonModule} from '@angular/material';
+import {NgModule} from '@angular/core';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
-const docItemsID = 'button';
+const docItemsId = 'button';
+const exampleKey = 'button-types';
 
 const mockActivatedRoute = {
   params: Observable.create(observer => {
-    observer.next({id: docItemsID});
+    observer.next({id: docItemsId});
     observer.complete();
   })
 };
 
-
 describe('ComponentViewer', () => {
   let fixture: ComponentFixture<ComponentViewer>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [
-        BrowserAnimationsModule,
-        MaterialModule,
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      declarations: [ComponentViewer],
+      imports: [ComponentViewerModule, DocsAppTestingModule, TestExampleModule],
       providers: [
         {provide: ActivatedRoute, useValue: mockActivatedRoute},
-        ComponentPageTitle,
-        DocumentationItems
       ]
-    });
+    }).compileComponents();
+  }));
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(ComponentViewer);
-  }));
+  });
 
   it('should set page title correctly', () => {
     const component = fixture.componentInstance;
     fixture.detectChanges();
-    const expected = `${component.docItems.getItemById(docItemsID).name}`;
+    const expected = `${component.docItems.getItemById(docItemsId).name}`;
     expect(component._componentPageTitle.title).toEqual(expected);
   });
 });
+
+
+// Create a version of ExampleModule for testing with only one component so that we odn't have
+// to compile all of the examples for these tests.
+@NgModule({
+  imports: [
+    MdButtonModule,
+    NoopAnimationsModule,
+  ],
+  declarations: [EXAMPLE_COMPONENTS[exampleKey].component],
+  entryComponents: [EXAMPLE_COMPONENTS[exampleKey].component],
+})
+class TestExampleModule { }
diff --git a/src/app/pages/component-viewer/component-viewer.ts b/src/app/pages/component-viewer/component-viewer.ts
index 914fbd664..55226f903 100644
--- a/src/app/pages/component-viewer/component-viewer.ts
+++ b/src/app/pages/component-viewer/component-viewer.ts
@@ -1,7 +1,10 @@
-import {Component, ViewEncapsulation} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
+import {Component, NgModule, ViewEncapsulation} from '@angular/core';
+import {ActivatedRoute, RouterModule} from '@angular/router';
 import {DocumentationItems, DocItem} from '../../shared/documentation-items/documentation-items';
 import {ComponentPageTitle} from '../page-title/page-title';
+import {MdTabsModule} from '@angular/material';
+import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
+import {CommonModule} from '@angular/common';
 
 
 @Component({
@@ -22,3 +25,11 @@ export class ComponentViewer {
     });
   }
 }
+
+@NgModule({
+  imports: [MdTabsModule, RouterModule, DocViewerModule, CommonModule],
+  exports: [ComponentViewer],
+  declarations: [ComponentViewer],
+  providers: [DocumentationItems, ComponentPageTitle],
+})
+export class ComponentViewerModule {}
diff --git a/src/app/pages/guide-list/guide-list.spec.ts b/src/app/pages/guide-list/guide-list.spec.ts
index 4fd893baa..efec1031e 100644
--- a/src/app/pages/guide-list/guide-list.spec.ts
+++ b/src/app/pages/guide-list/guide-list.spec.ts
@@ -1,11 +1,6 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {RouterTestingModule} from '@angular/router/testing';
-import {MaterialModule} from '@angular/material';
-
-import {GuideItems} from '../../shared/guide-items/guide-items';
-import {GuideList} from './guide-list';
+import {GuideList, GuideListModule} from './guide-list';
+import {DocsAppTestingModule} from '../../testing/testing-module';
 
 
 describe('GuideList', () => {
@@ -13,18 +8,13 @@ describe('GuideList', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [
-        BrowserAnimationsModule,
-        MaterialModule,
-        RouterTestingModule
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      declarations: [GuideList],
-      providers: [GuideItems],
-    });
+      imports: [GuideListModule, DocsAppTestingModule],
+    }).compileComponents();
+  }));
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(GuideList);
-  }));
+  });
 
   it('should display a link for each item in guide items', () => {
     const component = fixture.componentInstance;
diff --git a/src/app/pages/guide-list/guide-list.ts b/src/app/pages/guide-list/guide-list.ts
index a9cf5cfa3..453c875c6 100644
--- a/src/app/pages/guide-list/guide-list.ts
+++ b/src/app/pages/guide-list/guide-list.ts
@@ -1,5 +1,9 @@
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
 import {GuideItems} from '../../shared/guide-items/guide-items';
+import {MdListModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
+import {FooterModule} from '../../shared/footer/footer';
+import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'app-guides',
@@ -9,3 +13,12 @@ import {GuideItems} from '../../shared/guide-items/guide-items';
 export class GuideList {
   constructor(public guideItems: GuideItems) {}
 }
+
+
+@NgModule({
+  imports: [MdListModule, RouterModule, FooterModule, CommonModule],
+  exports: [GuideList],
+  declarations: [GuideList],
+  providers: [GuideItems],
+})
+export class GuideListModule { }
diff --git a/src/app/pages/guide-viewer/guide-viewer.spec.ts b/src/app/pages/guide-viewer/guide-viewer.spec.ts
index f39ae4610..ad4b327d6 100644
--- a/src/app/pages/guide-viewer/guide-viewer.spec.ts
+++ b/src/app/pages/guide-viewer/guide-viewer.spec.ts
@@ -1,16 +1,14 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {Observable} from 'rxjs/Observable';
-import {MaterialModule} from '@angular/material';
 import {ActivatedRoute} from '@angular/router';
+import {GuideViewer, GuideViewerModule} from './guide-viewer';
+import {DocsAppTestingModule} from '../../testing/testing-module';
 
-import {GuideItems} from '../../shared/guide-items/guide-items';
-import {GuideViewer} from './guide-viewer';
+const guideItemsId = 'getting-started';
 
-const guideItemsID = 'getting-started';
 const mockActivatedRoute = {
   params: Observable.create(observer => {
-    observer.next({id: guideItemsID});
+    observer.next({id: guideItemsId});
     observer.complete();
   })
 };
@@ -21,22 +19,21 @@ describe('GuideViewer', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      declarations: [GuideViewer],
+      imports: [GuideViewerModule, DocsAppTestingModule],
       providers: [
         {provide: ActivatedRoute, useValue: mockActivatedRoute},
-        GuideItems
       ]
-    });
+    }).compileComponents();
+  }));
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(GuideViewer);
-  }));
+  });
 
   it('should set the guide based off route params', () => {
     const component = fixture.componentInstance;
     fixture.detectChanges();
     expect(component.guide)
-      .toEqual(component.guideItems.getItemById(guideItemsID));
+      .toEqual(component.guideItems.getItemById(guideItemsId));
   });
 });
diff --git a/src/app/pages/guide-viewer/guide-viewer.ts b/src/app/pages/guide-viewer/guide-viewer.ts
index db2bc5c38..96344d62f 100644
--- a/src/app/pages/guide-viewer/guide-viewer.ts
+++ b/src/app/pages/guide-viewer/guide-viewer.ts
@@ -1,6 +1,8 @@
-import {Component} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
-import {GuideItems, GuideItem} from '../../shared/guide-items/guide-items';
+import {Component, NgModule} from '@angular/core';
+import {ActivatedRoute, RouterModule} 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';
 
 
 @Component({
@@ -17,3 +19,11 @@ export class GuideViewer {
     });
   }
 }
+
+@NgModule({
+  imports: [DocViewerModule, FooterModule, RouterModule],
+  exports: [GuideViewer],
+  declarations: [GuideViewer],
+  providers: [GuideItems],
+})
+export class GuideViewerModule {}
diff --git a/src/app/pages/homepage/homepage.ts b/src/app/pages/homepage/homepage.ts
index 0a32f1c20..8f575885a 100644
--- a/src/app/pages/homepage/homepage.ts
+++ b/src/app/pages/homepage/homepage.ts
@@ -1,4 +1,8 @@
-import { Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
+import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
+import {MdButtonModule} from '@angular/material';
+import {FooterModule} from '../../shared/footer/footer';
+import {RouterModule} from '@angular/router';
 
 @Component({
   selector: 'app-homepage',
@@ -6,3 +10,10 @@ import { Component} from '@angular/core';
   styleUrls: ['./homepage.scss']
 })
 export class Homepage {}
+
+@NgModule({
+  imports: [SvgViewerModule, MdButtonModule, FooterModule, RouterModule],
+  exports: [Homepage],
+  declarations: [Homepage],
+})
+export class HomepageModule { }
diff --git a/src/app/pages/page-title/page-title.spec.ts b/src/app/pages/page-title/page-title.spec.ts
index d82c03a64..a07a17ea4 100644
--- a/src/app/pages/page-title/page-title.spec.ts
+++ b/src/app/pages/page-title/page-title.spec.ts
@@ -1,4 +1,3 @@
-import {async, inject, TestBed, ComponentFixture} from '@angular/core/testing';
 import {ComponentPageTitle} from './page-title';
 
 
diff --git a/src/app/routes.ts b/src/app/routes.ts
index 413245a67..848fdc901 100644
--- a/src/app/routes.ts
+++ b/src/app/routes.ts
@@ -1,14 +1,13 @@
-import {ModuleWithProviders} from '@angular/core';
 import {Homepage} from './pages/homepage';
 import {ComponentList} from './pages/component-list';
 import {GuideList} from './pages/guide-list';
-import {Routes, RouterModule} from '@angular/router';
+import {Routes} from '@angular/router';
 import {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 {GuideViewer} from './pages/guide-viewer/guide-viewer';
 
-const MATERIAL_DOCS_ROUTES: Routes = [
+export const MATERIAL_DOCS_ROUTES: Routes = [
   {path: '', component: Homepage, pathMatch: 'full'},
   {
     path: 'components',
@@ -22,5 +21,3 @@ const MATERIAL_DOCS_ROUTES: Routes = [
   {path: 'guides', component: GuideList},
   {path: 'guide/:id', component: GuideViewer},
 ];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(MATERIAL_DOCS_ROUTES);
diff --git a/src/app/shared/doc-viewer/doc-viewer-module.ts b/src/app/shared/doc-viewer/doc-viewer-module.ts
new file mode 100644
index 000000000..aa82e253e
--- /dev/null
+++ b/src/app/shared/doc-viewer/doc-viewer-module.ts
@@ -0,0 +1,30 @@
+import {DocViewer} from './doc-viewer';
+import {ExampleViewer} from '../example-viewer/example-viewer';
+import {PlunkerButtonModule} from '../plunker/plunker-button';
+import {
+  MdButtonModule,
+  MdIconModule,
+  MdTabsModule,
+  MdTooltipModule,
+  PortalModule
+} from '@angular/material';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+
+
+// ExampleViewer is included in the DocViewerModule because they have a circular dependency.
+@NgModule({
+  imports: [
+    MdButtonModule,
+    MdIconModule,
+    MdTooltipModule,
+    MdTabsModule,
+    CommonModule,
+    PortalModule,
+    PlunkerButtonModule
+  ],
+  declarations: [DocViewer, ExampleViewer],
+  entryComponents: [ExampleViewer],
+  exports: [DocViewer, ExampleViewer],
+})
+export class DocViewerModule { }
diff --git a/src/app/shared/doc-viewer/doc-viewer.spec.ts b/src/app/shared/doc-viewer/doc-viewer.spec.ts
index cac95fe4e..ec64defac 100644
--- a/src/app/shared/doc-viewer/doc-viewer.spec.ts
+++ b/src/app/shared/doc-viewer/doc-viewer.spec.ts
@@ -1,26 +1,19 @@
 import {Component} from '@angular/core';
-import {TestBed, inject, async} from '@angular/core/testing';
+import {async, inject, TestBed} from '@angular/core/testing';
 import {MockBackend} from '@angular/http/testing';
-import {Response, ResponseOptions, XHRBackend} from '@angular/http';
+import {Response, ResponseOptions} from '@angular/http';
 import {By} from '@angular/platform-browser';
 import {DocViewer} from './doc-viewer';
-import {SharedModule} from '../shared-module';
+import {DocsAppTestingModule} from '../../testing/testing-module';
+import {DocViewerModule} from './doc-viewer-module';
 
 
 describe('DocViewer', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [SharedModule],
-      declarations: [
-        DocViewerTestComponent,
-      ],
-      providers: [
-        MockBackend,
-        {provide: XHRBackend, useExisting: MockBackend},
-      ]
-    });
-
-    TestBed.compileComponents();
+      imports: [DocViewerModule, DocsAppTestingModule],
+      declarations: [DocViewerTestComponent],
+    }).compileComponents();
   }));
 
   beforeEach(inject([MockBackend], (mockBackend: MockBackend) => {
diff --git a/src/app/shared/doc-viewer/doc-viewer.ts b/src/app/shared/doc-viewer/doc-viewer.ts
index c854422fb..acca654e9 100644
--- a/src/app/shared/doc-viewer/doc-viewer.ts
+++ b/src/app/shared/doc-viewer/doc-viewer.ts
@@ -1,15 +1,15 @@
 import {
+  ApplicationRef,
   Component,
-  Input,
-  ElementRef,
   ComponentFactoryResolver,
-  ViewContainerRef,
-  ApplicationRef,
+  ElementRef,
   Injector,
+  Input,
   OnDestroy,
+  ViewContainerRef
 } from '@angular/core';
 import {Http} from '@angular/http';
-import {DomPortalHost, ComponentPortal} from '@angular/material';
+import {ComponentPortal, DomPortalHost} from '@angular/material';
 import {ExampleViewer} from '../example-viewer/example-viewer';
 
 
diff --git a/src/app/shared/doc-viewer/index.ts b/src/app/shared/doc-viewer/index.ts
deleted file mode 100644
index 67c142bb5..000000000
--- a/src/app/shared/doc-viewer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './doc-viewer';
diff --git a/src/app/shared/documentation-items/documentation-items.spec.ts b/src/app/shared/documentation-items/documentation-items.spec.ts
index c7f9e520d..c40d9b92d 100644
--- a/src/app/shared/documentation-items/documentation-items.spec.ts
+++ b/src/app/shared/documentation-items/documentation-items.spec.ts
@@ -7,12 +7,8 @@ describe('DocViewer', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [],
-      declarations: [],
       providers: [DocumentationItems]
-    });
-
-    TestBed.compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(inject([DocumentationItems], (di: DocumentationItems) => {
diff --git a/src/app/shared/example-viewer/example-viewer.html b/src/app/shared/example-viewer/example-viewer.html
index fd20b857e..3c771135a 100644
--- a/src/app/shared/example-viewer/example-viewer.html
+++ b/src/app/shared/example-viewer/example-viewer.html
@@ -19,7 +19,7 @@
     <md-tab-group>
       <!-- TODO(jelbourn): don't hard-code the html + ts + css structure -->
       <md-tab *ngFor="let extension of ['HTML', 'TS', 'CSS']" [label]="extension">
-        <pre class="docs-example-source"><doc-viewer
+        <pre *ngIf="exampleFileUrl(extension)" class="docs-example-source"><doc-viewer
             [documentUrl]="exampleFileUrl(extension)"></doc-viewer></pre>
       </md-tab>
     </md-tab-group>
diff --git a/src/app/shared/example-viewer/example-viewer.spec.ts b/src/app/shared/example-viewer/example-viewer.spec.ts
index fb359e737..267822d76 100644
--- a/src/app/shared/example-viewer/example-viewer.spec.ts
+++ b/src/app/shared/example-viewer/example-viewer.spec.ts
@@ -1,34 +1,16 @@
-import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {CommonModule} from '@angular/common';
 import {ReactiveFormsModule} from '@angular/forms';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {Http} from '@angular/http';
-import {MaterialModule} from '@angular/material';
 
-import {EXAMPLE_COMPONENTS, ExampleModule, LiveExample} from '@angular/material-examples';
+import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
 import {ExampleViewer} from './example-viewer';
+import {DocsAppTestingModule} from '../../testing/testing-module';
+import {DocViewerModule} from '../doc-viewer/doc-viewer-module';
+import {MdAutocompleteModule, MdInputModule} from '@angular/material';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
-const exampleComponentString = 'autocomplete-overview';
-
-
-// Required for the set example function
-@NgModule({
-  imports: [
-    ExampleModule,
-    BrowserAnimationsModule,
-    CommonModule,
-    MaterialModule,
-    ReactiveFormsModule,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
-class TestAutocompleteOverviewModule {
-}
-
-
-class MockHTTP {
-}
+const exampleKey = 'autocomplete-overview';
 
 
 describe('ExampleViewer', () => {
@@ -36,16 +18,18 @@ describe('ExampleViewer', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule, ReactiveFormsModule, TestAutocompleteOverviewModule],
-      declarations: [ExampleViewer],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      providers: [
-        {provide: Http, useClass: MockHTTP}
-      ]
-    });
+      imports: [
+        DocViewerModule,
+        DocsAppTestingModule,
+        ReactiveFormsModule,
+        TestExampleModule
+      ],
+    }).compileComponents();
+  }));
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(ExampleViewer);
-  }));
+  });
 
   it('should toggle showSource boolean', () => {
     const component = fixture.componentInstance;
@@ -57,11 +41,11 @@ describe('ExampleViewer', () => {
 
   it('should set and return example properly', () => {
     const component = fixture.componentInstance;
-    component.example = exampleComponentString;
+    component.example = exampleKey;
     fixture.detectChanges();
     const data = component.exampleData;
-    // TODO(jelbourn): remove `as any` once LiveExample is updated to hve optional members.
-    expect(data).toEqual(EXAMPLE_COMPONENTS[exampleComponentString] as any);
+    // TODO(jelbourn): remove `as any` once LiveExample is updated to have optional members.
+    expect(data).toEqual(EXAMPLE_COMPONENTS[exampleKey] as any);
   });
 
   it('should log message about missing example', () => {
@@ -76,16 +60,32 @@ describe('ExampleViewer', () => {
   it('should return assets path for example based on extension', () => {
     // set example
     const component = fixture.componentInstance;
-    component.example = exampleComponentString;
+    component.example = exampleKey;
     fixture.detectChanges();
 
     // get example file path for each extension
     const extensions = ['ts', 'css', 'html'];
     const basePath = '/assets/examples/';
     extensions.forEach(ext => {
-      const expected = `${basePath}${exampleComponentString}-example-${ext}.html`;
+      const expected = `${basePath}${exampleKey}-example-${ext}.html`;
       const actual = component.exampleFileUrl(ext);
       expect(actual).toEqual(expected);
     });
   });
 });
+
+
+// Create a version of ExampleModule for testing with only one component so that we odn't have
+// to compile all of the examples for these tests.
+@NgModule({
+  imports: [
+    MdInputModule,
+    MdAutocompleteModule,
+    CommonModule,
+    ReactiveFormsModule,
+    NoopAnimationsModule
+  ],
+  declarations: [EXAMPLE_COMPONENTS[exampleKey].component],
+  entryComponents: [EXAMPLE_COMPONENTS[exampleKey].component],
+})
+class TestExampleModule { }
diff --git a/src/app/shared/example-viewer/example-viewer.ts b/src/app/shared/example-viewer/example-viewer.ts
index 0bf075fad..f8b9c8a95 100644
--- a/src/app/shared/example-viewer/example-viewer.ts
+++ b/src/app/shared/example-viewer/example-viewer.ts
@@ -1,5 +1,4 @@
 import {Component, Input} from '@angular/core';
-import {Http} from '@angular/http';
 import {ComponentPortal} from '@angular/material';
 import 'rxjs/add/operator/first';
 
@@ -23,11 +22,6 @@ export class ExampleViewer {
   /** Whether the source for the example is being displayed. */
   showSource: boolean = false;
 
-  /** Map of file extension (html|ts|css) to source file content. */
-  sourceFileContent: Map<string, string> = new Map<string, string>();
-
-  constructor(private _http: Http) { }
-
   get example() {
     return this._example;
   }
diff --git a/src/app/shared/footer/footer.html b/src/app/shared/footer/footer.html
index 2d18f8517..e1a0371d3 100644
--- a/src/app/shared/footer/footer.html
+++ b/src/app/shared/footer/footer.html
@@ -8,7 +8,7 @@
 
     <div class="docs-footer-links">
       <ul>
-        <li> <a class="" href="https://wwww.angular.io">Learn Angular</a> </li>
+        <li> <a href="https://wwww.angular.io">Learn Angular</a> </li>
       </ul>
     </div>
 
diff --git a/src/app/shared/footer/footer.spec.ts b/src/app/shared/footer/footer.spec.ts
index fbe875e1d..eea60a733 100644
--- a/src/app/shared/footer/footer.spec.ts
+++ b/src/app/shared/footer/footer.spec.ts
@@ -1,8 +1,7 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {MaterialModule} from '@angular/material';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import {Footer} from './footer';
+import {Footer, FooterModule} from './footer';
+import {DocsAppTestingModule} from '../../testing/testing-module';
 
 
 describe('Footer', () => {
@@ -11,14 +10,15 @@ describe('Footer', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
-      declarations: [Footer],
-    });
+      imports: [FooterModule, DocsAppTestingModule],
+    }).compileComponents();
+  }));
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(Footer);
     component = fixture.componentInstance;
     fixture.detectChanges();
-  }));
+  });
 
   it('should have a link to angular.io', () => {
     const link = fixture
diff --git a/src/app/shared/footer/footer.ts b/src/app/shared/footer/footer.ts
index b47f446c0..3884fec4b 100644
--- a/src/app/shared/footer/footer.ts
+++ b/src/app/shared/footer/footer.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
 
 @Component({
   selector: 'app-footer',
@@ -6,3 +6,10 @@ import {Component} from '@angular/core';
   styleUrls: ['./footer.scss']
 })
 export class Footer { }
+
+
+@NgModule({
+  exports: [Footer],
+  declarations: [Footer],
+})
+export class FooterModule {}
diff --git a/src/app/shared/guide-items/guide-items.spec.ts b/src/app/shared/guide-items/guide-items.spec.ts
index 7a561114b..cb138fa25 100644
--- a/src/app/shared/guide-items/guide-items.spec.ts
+++ b/src/app/shared/guide-items/guide-items.spec.ts
@@ -7,12 +7,8 @@ describe('GuideItems', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [],
-      declarations: [],
       providers: [GuideItems]
-    });
-
-    TestBed.compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(inject([GuideItems], (gi: GuideItems) => {
diff --git a/src/app/shared/navbar/navbar.spec.ts b/src/app/shared/navbar/navbar.spec.ts
index b4b89744b..be5fd6604 100644
--- a/src/app/shared/navbar/navbar.spec.ts
+++ b/src/app/shared/navbar/navbar.spec.ts
@@ -1,8 +1,7 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {MaterialModule} from '@angular/material';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import {NavBar} from './navbar';
+import {NavBar, NavBarModule} from './navbar';
+import {DocsAppTestingModule} from '../../testing/testing-module';
 
 
 describe('NavBar', () => {
@@ -11,15 +10,15 @@ describe('NavBar', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      declarations: [NavBar],
-    });
+      imports: [NavBarModule, DocsAppTestingModule],
+    }).compileComponents();
+  }));
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(NavBar);
     component = fixture.componentInstance;
     fixture.detectChanges();
-  }));
+  });
 
   it('should have a link to material github', () => {
     const githublink = 'https://github.com/angular/material2';
diff --git a/src/app/shared/navbar/navbar.ts b/src/app/shared/navbar/navbar.ts
index f9abcd3e1..82d0dcab0 100644
--- a/src/app/shared/navbar/navbar.ts
+++ b/src/app/shared/navbar/navbar.ts
@@ -1,4 +1,7 @@
-import { Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
+import {MdButtonModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
+import {ThemePickerModule} from '../theme-picker/theme-picker';
 
 @Component({
   selector: 'app-navbar',
@@ -6,3 +9,10 @@ import { Component} from '@angular/core';
   styleUrls: ['./navbar.scss']
 })
 export class NavBar {}
+
+@NgModule({
+  imports: [MdButtonModule, RouterModule, ThemePickerModule],
+  exports: [NavBar],
+  declarations: [NavBar],
+})
+export class NavBarModule {}
diff --git a/src/app/shared/plunker/plunker-button.ts b/src/app/shared/plunker/plunker-button.ts
index 8a3c10db7..cee33d7b1 100644
--- a/src/app/shared/plunker/plunker-button.ts
+++ b/src/app/shared/plunker/plunker-button.ts
@@ -1,6 +1,7 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, NgModule} from '@angular/core';
 import {PlunkerWriter} from './plunker-writer';
 import {ExampleData} from '@angular/material-examples';
+import {MdButtonModule, MdIconModule, MdTooltipModule} from '@angular/material';
 
 @Component({
   selector: 'plunker-button',
@@ -23,6 +24,12 @@ export class PlunkerButton {
   @Input()
   set example(example: string) {
     const exampleData = new ExampleData(example);
+
+    // TODO(jelbourn): remove this when bad defaults are no longer included in the source
+    exampleData.exampleFiles = [];
+    exampleData.examplePath = '';
+    exampleData.indexFilename = '';
+
     this.plunkerWriter.constructPlunkerForm(exampleData).then(plunkerForm => {
       this.plunkerForm = plunkerForm;
       this.isDisabled = false;
@@ -41,3 +48,11 @@ export class PlunkerButton {
     document.body.removeChild(this.plunkerForm);
   }
 }
+
+@NgModule({
+  imports: [MdTooltipModule, MdButtonModule, MdIconModule],
+  exports: [PlunkerButton],
+  declarations: [PlunkerButton],
+  providers: [PlunkerWriter],
+})
+export class PlunkerButtonModule {}
diff --git a/src/app/shared/plunker/plunker-writer.spec.ts b/src/app/shared/plunker/plunker-writer.spec.ts
index 937c1405b..6e7ece07a 100644
--- a/src/app/shared/plunker/plunker-writer.spec.ts
+++ b/src/app/shared/plunker/plunker-writer.spec.ts
@@ -1,6 +1,9 @@
 import {TestBed, inject, async, flushMicrotasks, fakeAsync} from '@angular/core/testing';
 import {MockBackend} from '@angular/http/testing';
-import {BaseRequestOptions, Http, Response, ResponseOptions, XHRBackend} from '@angular/http';
+import {
+  BaseRequestOptions, Http, HttpModule, Response, ResponseOptions,
+  XHRBackend
+} from '@angular/http';
 import {PlunkerWriter} from './plunker-writer';
 import {ExampleData} from '@angular/material-examples';
 
@@ -10,24 +13,15 @@ describe('PlunkerWriter', () => {
   let data: ExampleData;
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [],
+      imports: [HttpModule],
       declarations: [],
       providers: [
         PlunkerWriter,
-        MockBackend,
         BaseRequestOptions,
+        MockBackend,
         {provide: XHRBackend, useExisting: MockBackend},
-        {
-          provide: Http,
-          useFactory: (backendInstance: MockBackend, defaultOptions: BaseRequestOptions) => {
-            return new Http(backendInstance, defaultOptions);
-          },
-          deps: [MockBackend, BaseRequestOptions]
-        },
       ]
-    });
-
-    TestBed.compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(inject([MockBackend], (mockBackend: MockBackend, http: Http) => {
diff --git a/src/app/shared/shared-module.ts b/src/app/shared/shared-module.ts
deleted file mode 100644
index b2475a0d0..000000000
--- a/src/app/shared/shared-module.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {NgModule} from '@angular/core';
-import {HttpModule} from '@angular/http';
-import {BrowserModule} from '@angular/platform-browser';
-import {RouterModule} from '@angular/router';
-
-import {ExampleViewer} from './example-viewer/example-viewer';
-import {DocViewer} from './doc-viewer/doc-viewer';
-import {DocumentationItems} from './documentation-items/documentation-items';
-import {PlunkerButton} from './plunker';
-import {GuideItems} from './guide-items/guide-items';
-import {ThemeStorage} from './theme-picker/theme-storage/theme-storage';
-import {ThemePicker} from './theme-picker/theme-picker';
-import {NavBar} from './navbar/navbar';
-import {SvgViewer} from './svg-viewer/svg-viewer';
-import {DocsMaterialModule} from '../app-module';
-
-
-@NgModule({
-  imports: [
-    HttpModule,
-    RouterModule,
-    BrowserModule,
-    DocsMaterialModule,
-  ],
-  declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemePicker, SvgViewer],
-  exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemePicker, SvgViewer],
-  providers: [DocumentationItems, GuideItems, ThemeStorage],
-  entryComponents: [
-    ExampleViewer,
-  ],
-})
-export class SharedModule {}
diff --git a/src/app/shared/style-manager/style-manager.spec.ts b/src/app/shared/style-manager/style-manager.spec.ts
index df2cc14b1..fecbb1f10 100644
--- a/src/app/shared/style-manager/style-manager.spec.ts
+++ b/src/app/shared/style-manager/style-manager.spec.ts
@@ -1,4 +1,5 @@
-import {TestBed, inject} from '@angular/core/testing';
+import {inject, TestBed} from '@angular/core/testing';
+import {HttpModule} from '@angular/http';
 import {StyleManager} from './style-manager';
 
 
@@ -6,6 +7,7 @@ describe('StyleManager', () => {
   let styleManager: StyleManager;
 
   beforeEach(() => TestBed.configureTestingModule({
+    imports: [HttpModule],
     providers: [StyleManager]
   }));
 
diff --git a/src/app/shared/svg-viewer/svg-viewer.ts b/src/app/shared/svg-viewer/svg-viewer.ts
index 87ed79002..fa3f4cb45 100644
--- a/src/app/shared/svg-viewer/svg-viewer.ts
+++ b/src/app/shared/svg-viewer/svg-viewer.ts
@@ -1,10 +1,10 @@
-import {Component, ElementRef, Input, OnInit} from '@angular/core';
+import {Component, ElementRef, Input, NgModule, OnInit} from '@angular/core';
 import {Http} from '@angular/http';
 
 
 @Component({
   selector: 'docs-svg-viewer',
-  template: '<div class="docs-svg-viewer"></div>',
+  template: '<div class="docs-svg-viewer" aria-hidden="true"></div>',
 })
 export class SvgViewer implements OnInit {
   @Input() src: string;
@@ -38,3 +38,9 @@ export class SvgViewer implements OnInit {
 function getAbsolutePathFromSrc(src: string) {
   return src.slice(src.indexOf('assets/') - 1);
 }
+
+@NgModule({
+  exports: [SvgViewer],
+  declarations: [SvgViewer],
+})
+export class SvgViewerModule { }
diff --git a/src/app/shared/theme-picker/theme-picker.spec.ts b/src/app/shared/theme-picker/theme-picker.spec.ts
index 5cfd97033..6eb337955 100644
--- a/src/app/shared/theme-picker/theme-picker.spec.ts
+++ b/src/app/shared/theme-picker/theme-picker.spec.ts
@@ -1,20 +1,13 @@
-import {MaterialModule} from '@angular/material';
 import {async, TestBed} from '@angular/core/testing';
-
-import {ThemeStorage} from './theme-storage/theme-storage';
-import {ThemePicker} from './theme-picker';
-import {StyleManager} from '../style-manager';
+import {ThemePicker, ThemePickerModule} from './theme-picker';
+import {DocsAppTestingModule} from '../../testing/testing-module';
 
 
 describe('ThemePicker', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
-      declarations: [ThemePicker],
-      providers: [StyleManager, ThemeStorage]
-    });
-
-    TestBed.compileComponents();
+      imports: [ThemePickerModule, DocsAppTestingModule],
+    }).compileComponents();
   }));
 
   it('should install theme based on href', () => {
diff --git a/src/app/shared/theme-picker/theme-picker.ts b/src/app/shared/theme-picker/theme-picker.ts
index 643ab0544..b871acd8d 100644
--- a/src/app/shared/theme-picker/theme-picker.ts
+++ b/src/app/shared/theme-picker/theme-picker.ts
@@ -1,6 +1,8 @@
-import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
+import {Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule} from '@angular/core';
 import {StyleManager} from '../style-manager/style-manager';
 import {ThemeStorage, DocsSiteTheme} from './theme-storage/theme-storage';
+import {MdButtonModule, MdGridListModule, MdIconModule, MdMenuModule} from '@angular/material';
+import {CommonModule} from '@angular/common';
 
 
 @Component({
@@ -70,3 +72,11 @@ export class ThemePicker {
     return this.themes.find(theme => theme.href === href);
   }
 }
+
+@NgModule({
+  imports: [MdButtonModule, MdIconModule, MdMenuModule, MdGridListModule, CommonModule],
+  exports: [ThemePicker],
+  declarations: [ThemePicker],
+  providers: [StyleManager, ThemeStorage],
+})
+export class ThemePickerModule { }
diff --git a/src/app/testing/testing-module.ts b/src/app/testing/testing-module.ts
new file mode 100644
index 000000000..1828d78a5
--- /dev/null
+++ b/src/app/testing/testing-module.ts
@@ -0,0 +1,16 @@
+import {NgModule} from '@angular/core';
+import {HttpModule, XHRBackend} from '@angular/http';
+import {MockBackend} from '@angular/http/testing';
+import {RouterTestingModule} from '@angular/router/testing';
+import {MATERIAL_SANITY_CHECKS} from '@angular/material';
+
+@NgModule({
+  imports: [RouterTestingModule, HttpModule],
+  exports: [RouterTestingModule],
+  providers: [
+    MockBackend,
+    {provide: XHRBackend, useExisting: MockBackend},
+    {provide: MATERIAL_SANITY_CHECKS, useValue: false},
+  ],
+})
+export class DocsAppTestingModule {}