diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index df8bfecc1bbf..468c257a3792 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -111,9 +111,10 @@
 /src/dev-app/connected-overlay/**                  @jelbourn @crisbeto
 /src/dev-app/dataset/**                            @andrewseguin
 /src/dev-app/datepicker/**                         @mmalerba
+/src/dev-app/dev-app-layout/**                     @mmalerba
 /src/dev-app/dialog/**                             @jelbourn @crisbeto
-/src/dev-app/drawer/**                             @mmalerba
 /src/dev-app/drag-drop/**                          @crisbeto
+/src/dev-app/drawer/**                             @mmalerba
 /src/dev-app/example/**                            @andrewseguin
 /src/dev-app/examples-page/**                      @andrewseguin
 /src/dev-app/expansion/**                          @josephperrott
@@ -123,8 +124,8 @@
 /src/dev-app/icon/**                               @jelbourn
 /src/dev-app/input/**                              @mmalerba
 /src/dev-app/list/**                               @jelbourn @crisbeto @devversion
-/src/dev-app/menu/**                               @crisbeto
 /src/dev-app/live-announcer/**                     @jelbourn
+/src/dev-app/menu/**                               @crisbeto
 /src/dev-app/overlay/**                            @jelbourn @crisbeto
 /src/dev-app/paginator/**                          @andrewseguin
 /src/dev-app/platform/**                           @jelbourn @devversion
diff --git a/src/dev-app/autocomplete/autocomplete-demo-module.ts b/src/dev-app/autocomplete/autocomplete-demo-module.ts
new file mode 100644
index 000000000000..2e51b6f154f2
--- /dev/null
+++ b/src/dev-app/autocomplete/autocomplete-demo-module.ts
@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {
+  MatAutocompleteModule,
+  MatButtonModule,
+  MatCardModule,
+  MatFormFieldModule,
+  MatInputModule
+} from '@angular/material';
+import {AutocompleteDemo} from './autocomplete-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule,
+  ],
+  declarations: [AutocompleteDemo],
+})
+export class AutocompleteDemoModule {
+}
diff --git a/src/dev-app/badge/badge-demo-module.ts b/src/dev-app/badge/badge-demo-module.ts
new file mode 100644
index 000000000000..7a3da62d0154
--- /dev/null
+++ b/src/dev-app/badge/badge-demo-module.ts
@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatBadgeModule, MatButtonModule, MatIconModule} from '@angular/material';
+import {BadgeDemo} from './badge-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatBadgeModule,
+    MatButtonModule,
+    MatIconModule,
+  ],
+  declarations: [BadgeDemo],
+})
+export class BadgeDemoModule {
+}
diff --git a/src/dev-app/baseline/baseline-demo-module.ts b/src/dev-app/baseline/baseline-demo-module.ts
new file mode 100644
index 000000000000..337c361b095c
--- /dev/null
+++ b/src/dev-app/baseline/baseline-demo-module.ts
@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {
+  MatCardModule,
+  MatCheckboxModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatRadioModule,
+  MatSelectModule,
+  MatToolbarModule
+} from '@angular/material';
+import {BaselineDemo} from './baseline-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatToolbarModule,
+  ],
+  declarations: [BaselineDemo],
+})
+export class BaselineDemoModule {
+}
diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo-module.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo-module.ts
new file mode 100644
index 000000000000..af0e6f8c16d6
--- /dev/null
+++ b/src/dev-app/bottom-sheet/bottom-sheet-demo-module.ts
@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {
+  MatBottomSheetModule,
+  MatButtonModule,
+  MatCardModule,
+  MatCheckboxModule,
+  MatFormFieldModule,
+  MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatSelectModule
+} from '@angular/material';
+import {BottomSheetDemo, ExampleBottomSheet} from './bottom-sheet-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatSelectModule,
+  ],
+  declarations: [BottomSheetDemo, ExampleBottomSheet],
+  entryComponents: [ExampleBottomSheet],
+})
+export class BottomSheetDemoModule {
+}
diff --git a/src/dev-app/button-toggle/button-toggle-demo-module.ts b/src/dev-app/button-toggle/button-toggle-demo-module.ts
new file mode 100644
index 000000000000..44d4d66aeaed
--- /dev/null
+++ b/src/dev-app/button-toggle/button-toggle-demo-module.ts
@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatButtonToggleModule, MatCheckboxModule, MatIconModule} from '@angular/material';
+import {ButtonToggleDemo} from './button-toggle-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonToggleModule,
+    MatCheckboxModule,
+    MatIconModule,
+  ],
+  declarations: [ButtonToggleDemo],
+})
+export class ButtonToggleDemoModule {
+}
diff --git a/src/dev-app/button/button-demo-module.ts b/src/dev-app/button/button-demo-module.ts
new file mode 100644
index 000000000000..c5a845b242fb
--- /dev/null
+++ b/src/dev-app/button/button-demo-module.ts
@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatButtonModule, MatIconModule} from '@angular/material';
+import {ButtonDemo} from './button-demo';
+
+@NgModule({
+  imports: [
+    MatButtonModule,
+    MatIconModule,
+  ],
+  declarations: [ButtonDemo],
+})
+export class ButtonDemoModule {
+}
diff --git a/src/dev-app/card/card-demo-module.ts b/src/dev-app/card/card-demo-module.ts
new file mode 100644
index 000000000000..20c5993cb15b
--- /dev/null
+++ b/src/dev-app/card/card-demo-module.ts
@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {
+  MatButtonModule,
+  MatCardModule,
+  MatDividerModule,
+  MatProgressBarModule
+} from '@angular/material';
+import {CardDemo} from './card-demo';
+
+@NgModule({
+  imports: [
+    MatButtonModule,
+    MatCardModule,
+    MatDividerModule,
+    MatProgressBarModule,
+  ],
+  declarations: [CardDemo],
+})
+export class CardDemoModule {
+}
diff --git a/src/dev-app/checkbox/checkbox-demo-module.ts b/src/dev-app/checkbox/checkbox-demo-module.ts
new file mode 100644
index 000000000000..92d7963a6fdd
--- /dev/null
+++ b/src/dev-app/checkbox/checkbox-demo-module.ts
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatCheckboxModule, MatPseudoCheckboxModule} from '@angular/material';
+import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from './checkbox-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatCheckboxModule,
+    MatPseudoCheckboxModule,
+  ],
+  declarations: [CheckboxDemo, MatCheckboxDemoNestedChecklist],
+})
+export class CheckboxDemoModule {
+}
diff --git a/src/dev-app/chips/chips-demo-module.ts b/src/dev-app/chips/chips-demo-module.ts
new file mode 100644
index 000000000000..cf83265f3666
--- /dev/null
+++ b/src/dev-app/chips/chips-demo-module.ts
@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {
+  MatButtonModule,
+  MatCardModule,
+  MatCheckboxModule,
+  MatChipsModule,
+  MatFormFieldModule,
+  MatIconModule,
+  MatToolbarModule
+} from '@angular/material';
+import {ChipsDemo} from './chips-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatToolbarModule,
+  ],
+  declarations: [ChipsDemo],
+})
+export class ChipsDemoModule {
+}
diff --git a/src/dev-app/connected-overlay/connected-overlay-demo-module.ts b/src/dev-app/connected-overlay/connected-overlay-demo-module.ts
new file mode 100644
index 000000000000..db91cfb45ea1
--- /dev/null
+++ b/src/dev-app/connected-overlay/connected-overlay-demo-module.ts
@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {OverlayModule} from '@angular/cdk/overlay';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatButtonModule, MatCheckboxModule, MatRadioModule} from '@angular/material';
+import {ConnectedOverlayDemo} from './connected-overlay-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatRadioModule,
+    OverlayModule,
+  ],
+  declarations: [ConnectedOverlayDemo],
+})
+export class ConnectedOverlayDemoModule {
+}
diff --git a/src/dev-app/datepicker/datepicker-demo-module.ts b/src/dev-app/datepicker/datepicker-demo-module.ts
new file mode 100644
index 000000000000..8d867369e708
--- /dev/null
+++ b/src/dev-app/datepicker/datepicker-demo-module.ts
@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {
+  MatButtonModule,
+  MatCheckboxModule,
+  MatDatepickerModule,
+  MatFormFieldModule,
+  MatIconModule,
+  MatInputModule,
+  MatSelectModule
+} from '@angular/material';
+import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from './datepicker-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+  ],
+  declarations: [CustomHeader, CustomHeaderNgContent, DatepickerDemo],
+  entryComponents: [CustomHeader, CustomHeaderNgContent],
+})
+export class DatepickerDemoModule {
+}
diff --git a/src/dev-app/dev-app-layout/dev-app-layout-module.ts b/src/dev-app/dev-app-layout/dev-app-layout-module.ts
new file mode 100644
index 000000000000..c9c13e40cda4
--- /dev/null
+++ b/src/dev-app/dev-app-layout/dev-app-layout-module.ts
@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {
+  MatButtonModule,
+  MatIconModule,
+  MatListModule,
+  MatSidenavModule,
+  MatToolbarModule
+} from '@angular/material';
+import {RouterModule} from '@angular/router';
+import {DevAppLayout} from './dev-app-layout';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatListModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    RouterModule,
+  ],
+  declarations: [DevAppLayout],
+  exports: [DevAppLayout],
+})
+export class DevAppLayoutModule {
+}
diff --git a/src/dev-app/dev-app.html b/src/dev-app/dev-app-layout/dev-app-layout.html
similarity index 97%
rename from src/dev-app/dev-app.html
rename to src/dev-app/dev-app-layout/dev-app-layout.html
index 9775c6307d13..2ccf16086577 100644
--- a/src/dev-app/dev-app.html
+++ b/src/dev-app/dev-app-layout/dev-app-layout.html
@@ -46,7 +46,7 @@ <h1>Angular Material Demos</h1>
     </mat-toolbar>
 
     <div #root="dir" dir="ltr" class="demo-content mat-app-background">
-      <router-outlet></router-outlet>
+      <ng-content></ng-content>
     </div>
   </main>
 </mat-sidenav-container>
diff --git a/src/dev-app/dev-app.scss b/src/dev-app/dev-app-layout/dev-app-layout.scss
similarity index 100%
rename from src/dev-app/dev-app.scss
rename to src/dev-app/dev-app-layout/dev-app-layout.scss
diff --git a/src/dev-app/dev-app-layout/dev-app-layout.ts b/src/dev-app/dev-app-layout/dev-app-layout.ts
new file mode 100644
index 000000000000..85d0769bd3a0
--- /dev/null
+++ b/src/dev-app/dev-app-layout/dev-app-layout.ts
@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {OverlayContainer} from '@angular/cdk/overlay';
+import {Component, ElementRef, ViewEncapsulation} from '@angular/core';
+import {DevAppRippleOptions} from '../ripple/ripple-options';
+
+/** Root component for the dev-app demos. */
+@Component({
+  moduleId: module.id,
+  selector: 'dev-app-layout',
+  templateUrl: 'dev-app-layout.html',
+  styleUrls: ['dev-app-layout.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class DevAppLayout {
+  dark = false;
+  navItems = [
+    {name: 'Examples', route: '/examples'},
+    {name: 'Autocomplete', route: '/autocomplete'},
+    {name: 'Badge', route: '/badge'},
+    {name: 'Bottom sheet', route: '/bottom-sheet'},
+    {name: 'Button Toggle', route: '/button-toggle'},
+    {name: 'Button', route: '/button'},
+    {name: 'Card', route: '/card'},
+    {name: 'Chips', route: '/chips'},
+    {name: 'Connected Overlay', route: '/connected-overlay'},
+    {name: 'Checkbox', route: '/checkbox'},
+    {name: 'Chips', route: '/chips'},
+    {name: 'Datepicker', route: '/datepicker'},
+    {name: 'Dialog', route: '/dialog'},
+    {name: 'Drawer', route: '/drawer'},
+    {name: 'Drag and Drop', route: '/drag-drop'},
+    {name: 'Expansion Panel', route: '/expansion'},
+    {name: 'Focus Origin', route: '/focus-origin'},
+    {name: 'Gestures', route: '/gestures'},
+    {name: 'Grid List', route: '/grid-list'},
+    {name: 'Icon', route: '/icon'},
+    {name: 'Input', route: '/input'},
+    {name: 'List', route: '/list'},
+    {name: 'Live Announcer', route: '/live-announcer'},
+    {name: 'Menu', route: '/menu'},
+    {name: 'Paginator', route: '/paginator'},
+    {name: 'Platform', route: '/platform'},
+    {name: 'Portal', route: '/portal'},
+    {name: 'Progress Bar', route: '/progress-bar'},
+    {name: 'Progress Spinner', route: '/progress-spinner'},
+    {name: 'Radio', route: '/radio'},
+    {name: 'Ripple', route: '/ripple'},
+    {name: 'Screen Type', route: '/screen-type'},
+    {name: 'Select', route: '/select'},
+    {name: 'Sidenav', route: '/sidenav'},
+    {name: 'Slide Toggle', route: '/slide-toggle'},
+    {name: 'Slider', route: '/slider'},
+    {name: 'Snack Bar', route: '/snack-bar'},
+    {name: 'Stepper', route: '/stepper'},
+    {name: 'Table', route: '/table'},
+    {name: 'Tabs', route: '/tabs'},
+    {name: 'Toolbar', route: '/toolbar'},
+    {name: 'Tooltip', route: '/tooltip'},
+    {name: 'Tree', route: '/tree'},
+    {name: 'Typography', route: '/typography'},
+    {name: 'Virtual Scrolling', route: '/virtual-scroll'},
+  ];
+
+  constructor(
+      private _element: ElementRef<HTMLElement>, private _overlayContainer: OverlayContainer,
+      public rippleOptions: DevAppRippleOptions) {}
+
+  toggleFullscreen() {
+    // Cast to `any`, because the typings don't include the browser-prefixed methods.
+    const elem = this._element.nativeElement.querySelector('.demo-content') as any;
+    if (elem.requestFullscreen) {
+      elem.requestFullscreen();
+    } else if (elem.webkitRequestFullScreen) {
+      elem.webkitRequestFullScreen();
+    } else if (elem.mozRequestFullScreen) {
+      elem.mozRequestFullScreen();
+    } else if (elem.msRequestFullScreen) {
+      elem.msRequestFullScreen();
+    }
+  }
+
+  toggleTheme() {
+    const darkThemeClass = 'demo-unicorn-dark-theme';
+
+    this.dark = !this.dark;
+
+    if (this.dark) {
+      this._element.nativeElement.classList.add(darkThemeClass);
+      this._overlayContainer.getContainerElement().classList.add(darkThemeClass);
+    } else {
+      this._element.nativeElement.classList.remove(darkThemeClass);
+      this._overlayContainer.getContainerElement().classList.remove(darkThemeClass);
+    }
+  }
+}
diff --git a/src/dev-app/dev-app-module.ts b/src/dev-app/dev-app-module.ts
index 703c420369f0..abd3e1508b66 100644
--- a/src/dev-app/dev-app-module.ts
+++ b/src/dev-app/dev-app-module.ts
@@ -6,153 +6,128 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {LayoutModule} from '@angular/cdk/layout';
 import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
-import {CommonModule} from '@angular/common';
 import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MAT_RIPPLE_GLOBAL_OPTIONS} from '@angular/material';
-import {ExampleModule} from '@angular/material-examples';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';
-import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
-import {BadgeDemo} from './badge/badge-demo';
-import {BaselineDemo} from './baseline/baseline-demo';
-import {BottomSheetDemo, ExampleBottomSheet} from './bottom-sheet/bottom-sheet-demo';
-import {ButtonToggleDemo} from './button-toggle/button-toggle-demo';
-import {ButtonDemo} from './button/button-demo';
-import {CardDemo} from './card/card-demo';
-import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from './checkbox/checkbox-demo';
-import {ChipsDemo} from './chips/chips-demo';
-import {ConnectedOverlayDemo} from './connected-overlay/connected-overlay-demo';
-import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from './datepicker/datepicker-demo';
-import {DevAppComponent, DevAppHome, DevApp404} from './dev-app';
-import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from './dialog/dialog-demo';
-import {DragAndDropDemo} from './drag-drop/drag-drop-demo';
-import {DrawerDemo} from './drawer/drawer-demo';
-import {ExamplePageModule} from './example/example-module';
-import {ExamplesPage} from './examples-page/examples-page';
-import {ExpansionDemo} from './expansion/expansion-demo';
-import {FocusOriginDemo} from './focus-origin/focus-origin-demo';
-import {GesturesDemo} from './gestures/gestures-demo';
-import {GridListDemo} from './grid-list/grid-list-demo';
-import {IconDemo} from './icon/icon-demo';
-import {InputDemo} from './input/input-demo';
-import {ListDemo} from './list/list-demo';
-import {LiveAnnouncerDemo} from './live-announcer/live-announcer-demo';
-import {DevAppMaterialModule} from './material-module';
-import {MenuDemo} from './menu/menu-demo';
-import {PaginatorDemo} from './paginator/paginator-demo';
-import {PlatformDemo} from './platform/platform-demo';
-import {PortalDemo, ScienceJoke} from './portal/portal-demo';
-import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
-import {ProgressSpinnerDemo} from './progress-spinner/progress-spinner-demo';
-import {RadioDemo} from './radio/radio-demo';
-import {RippleDemo} from './ripple/ripple-demo';
+import {AutocompleteDemoModule} from './autocomplete/autocomplete-demo-module';
+import {BadgeDemoModule} from './badge/badge-demo-module';
+import {BaselineDemoModule} from './baseline/baseline-demo-module';
+import {BottomSheetDemoModule} from './bottom-sheet/bottom-sheet-demo-module';
+import {ButtonToggleDemoModule} from './button-toggle/button-toggle-demo-module';
+import {ButtonDemoModule} from './button/button-demo-module';
+import {CardDemoModule} from './card/card-demo-module';
+import {CheckboxDemoModule} from './checkbox/checkbox-demo-module';
+import {ChipsDemoModule} from './chips/chips-demo-module';
+import {ConnectedOverlayDemoModule} from './connected-overlay/connected-overlay-demo-module';
+import {DatepickerDemoModule} from './datepicker/datepicker-demo-module';
+import {DevApp404, DevAppComponent, DevAppHome} from './dev-app';
+import {DevAppLayoutModule} from './dev-app-layout/dev-app-layout-module';
+import {DialogDemoModule} from './dialog/dialog-demo-module';
+import {DragDropDemoModule} from './drag-drop/drag-drop-demo-module';
+import {DrawerDemoModule} from './drawer/drawer-demo-module';
+import {ExamplesPageModule} from './examples-page/examples-page-module';
+import {ExpansionDemoModule} from './expansion/expansion-demo-module';
+import {FocusOriginDemoModule} from './focus-origin/focus-origin-demo-module';
+import {GesturesDemoModule} from './gestures/gestures-demo-module';
+import {GridListDemoModule} from './grid-list/grid-list-demo-module';
+import {IconDemoModule} from './icon/icon-demo-module';
+import {InputDemoModule} from './input/input-demo-module';
+import {ListDemoModule} from './list/list-demo-module';
+import {LiveAnnouncerDemoModule} from './live-announcer/live-announcer-demo-module';
+import {MenuDemoModule} from './menu/menu-demo-module';
+import {PaginatorDemoModule} from './paginator/paginator-demo-module';
+import {PlatformDemoModule} from './platform/platform-demo-module';
+import {PortalDemoModule} from './portal/portal-demo-module';
+import {ProgressBarDemoModule} from './progress-bar/progress-bar-demo-module';
+import {ProgressSpinnerDemoModule} from './progress-spinner/progress-spinner-demo-module';
+import {RadioDemoModule} from './radio/radio-demo-module';
+import {RippleDemoModule} from './ripple/ripple-demo-module';
 import {DevAppRippleOptions} from './ripple/ripple-options';
 import {DEV_APP_ROUTES} from './routes';
-import {ScreenTypeDemo} from './screen-type/screen-type-demo';
-import {SelectDemo} from './select/select-demo';
-import {SidenavDemo} from './sidenav/sidenav-demo';
-import {SlideToggleDemo} from './slide-toggle/slide-toggle-demo';
-import {SliderDemo} from './slider/slider-demo';
-import {SnackBarDemo} from './snack-bar/snack-bar-demo';
-import {StepperDemo} from './stepper/stepper-demo';
+import {ScreenTypeDemoModule} from './screen-type/screen-type-demo-module';
+import {SelectDemoModule} from './select/select-demo-module';
+import {SidenavDemoModule} from './sidenav/sidenav-demo-module';
+import {SlideToggleDemoModule} from './slide-toggle/slide-toggle-demo-module';
+import {SliderDemoModule} from './slider/slider-demo-module';
+import {SnackBarDemoModule} from './snack-bar/snack-bar-demo-module';
+import {StepperDemoModule} from './stepper/stepper-demo-module';
 import {TableDemoModule} from './table/table-demo-module';
-import {TabsDemo} from './tabs/tabs-demo';
-import {ToolbarDemo} from './toolbar/toolbar-demo';
-import {TooltipDemo} from './tooltip/tooltip-demo';
+import {TabsDemoModule} from './tabs/tabs-demo-module';
+import {ToolbarDemoModule} from './toolbar/toolbar-demo-module';
+import {TooltipDemoModule} from './tooltip/tooltip-demo-module';
 import {TreeDemoModule} from './tree/tree-demo-module';
-import {TypographyDemo} from './typography/typography-demo';
-import {VirtualScrollDemo} from './virtual-scroll/virtual-scroll-demo';
+import {TypographyDemoModule} from './typography/typography-demo-module';
+import {VirtualScrollDemoModule} from './virtual-scroll/virtual-scroll-demo-module';
 
 @NgModule({
   imports: [
     BrowserAnimationsModule,
     BrowserModule,
-    CommonModule,
-    DevAppMaterialModule,
-    ExampleModule,
-    ExamplePageModule,
-    FormsModule,
+    DevAppLayoutModule,
     HttpClientModule,
-    LayoutModule,
-    ReactiveFormsModule,
     RouterModule.forRoot(DEV_APP_ROUTES),
+
+    // Demo pages
+    AutocompleteDemoModule,
+    BadgeDemoModule,
+    BaselineDemoModule,
+    BottomSheetDemoModule,
+    ButtonDemoModule,
+    ButtonToggleDemoModule,
+    CardDemoModule,
+    CheckboxDemoModule,
+    ChipsDemoModule,
+    ConnectedOverlayDemoModule,
+    DatepickerDemoModule,
+    DialogDemoModule,
+    DragDropDemoModule,
+    DrawerDemoModule,
+    ExamplesPageModule,
+    ExpansionDemoModule,
+    FocusOriginDemoModule,
+    GesturesDemoModule,
+    GridListDemoModule,
+    IconDemoModule,
+    InputDemoModule,
+    ListDemoModule,
+    LiveAnnouncerDemoModule,
+    MenuDemoModule,
+    PaginatorDemoModule,
+    PlatformDemoModule,
+    PortalDemoModule,
+    ProgressBarDemoModule,
+    ProgressSpinnerDemoModule,
+    RadioDemoModule,
+    RippleDemoModule,
+    ScreenTypeDemoModule,
+    SelectDemoModule,
+    SidenavDemoModule,
+    SliderDemoModule,
+    SlideToggleDemoModule,
+    SnackBarDemoModule,
+    StepperDemoModule,
     TableDemoModule,
+    TabsDemoModule,
+    ToolbarDemoModule,
+    TooltipDemoModule,
     TreeDemoModule,
+    TypographyDemoModule,
+    VirtualScrollDemoModule,
   ],
   declarations: [
-    AutocompleteDemo,
-    BadgeDemo,
-    BaselineDemo,
-    BottomSheetDemo,
-    ButtonDemo,
-    ButtonToggleDemo,
-    CardDemo,
-    CheckboxDemo,
-    ChipsDemo,
-    ConnectedOverlayDemo,
-    ContentElementDialog,
-    CustomHeader,
-    CustomHeaderNgContent,
-    DatepickerDemo,
     DevAppComponent,
     DevAppHome,
     DevApp404,
-    DialogDemo,
-    DragAndDropDemo,
-    DrawerDemo,
-    ExampleBottomSheet,
-    ExamplesPage,
-    ExpansionDemo,
-    FocusOriginDemo,
-    GesturesDemo,
-    GridListDemo,
-    IconDemo,
-    IFrameDialog,
-    InputDemo,
-    JazzDialog,
-    ListDemo,
-    LiveAnnouncerDemo,
-    MatCheckboxDemoNestedChecklist,
-    MenuDemo,
-    PaginatorDemo,
-    PlatformDemo,
-    PortalDemo,
-    ProgressBarDemo,
-    ProgressSpinnerDemo,
-    RadioDemo,
-    RippleDemo,
-    ScienceJoke,
-    ScreenTypeDemo,
-    SelectDemo,
-    SidenavDemo,
-    SliderDemo,
-    SlideToggleDemo,
-    SnackBarDemo,
-    StepperDemo,
-    TabsDemo,
-    ToolbarDemo,
-    TooltipDemo,
-    TypographyDemo,
-    VirtualScrollDemo,
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer},
     {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useExisting: DevAppRippleOptions},
   ],
-  entryComponents: [
-    ContentElementDialog,
-    CustomHeader,
-    CustomHeaderNgContent,
-    ExampleBottomSheet,
-    IFrameDialog,
-    JazzDialog,
-    ScienceJoke,
-  ],
   bootstrap: [DevAppComponent],
 })
-export class DevAppModule {}
+export class DevAppModule {
+}
diff --git a/src/dev-app/dev-app.ts b/src/dev-app/dev-app.ts
index 05794a5649b1..1a50a5062bd0 100644
--- a/src/dev-app/dev-app.ts
+++ b/src/dev-app/dev-app.ts
@@ -6,100 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {OverlayContainer} from '@angular/cdk/overlay';
-import {Component, ElementRef, ViewEncapsulation} from '@angular/core';
-import {DevAppRippleOptions} from './ripple/ripple-options';
+import {Component, ViewEncapsulation} from '@angular/core';
 
 /** Root component for the dev-app demos. */
 @Component({
   moduleId: module.id,
   selector: 'dev-app',
-  templateUrl: 'dev-app.html',
-  styleUrls: ['dev-app.css'],
+  template: '<dev-app-layout><router-outlet></router-outlet></dev-app-layout>',
   encapsulation: ViewEncapsulation.None,
 })
 export class DevAppComponent {
-  dark = false;
-  navItems = [
-    {name: 'Examples', route: '/examples'},
-    {name: 'Autocomplete', route: '/autocomplete'},
-    {name: 'Badge', route: '/badge'},
-    {name: 'Bottom sheet', route: '/bottom-sheet'},
-    {name: 'Button Toggle', route: '/button-toggle'},
-    {name: 'Button', route: '/button'},
-    {name: 'Card', route: '/card'},
-    {name: 'Chips', route: '/chips'},
-    {name: 'Connected Overlay', route: '/connected-overlay'},
-    {name: 'Checkbox', route: '/checkbox'},
-    {name: 'Chips', route: '/chips'},
-    {name: 'Datepicker', route: '/datepicker'},
-    {name: 'Dialog', route: '/dialog'},
-    {name: 'Drawer', route: '/drawer'},
-    {name: 'Drag and Drop', route: '/drag-drop'},
-    {name: 'Expansion Panel', route: '/expansion'},
-    {name: 'Focus Origin', route: '/focus-origin'},
-    {name: 'Gestures', route: '/gestures'},
-    {name: 'Grid List', route: '/grid-list'},
-    {name: 'Icon', route: '/icon'},
-    {name: 'Input', route: '/input'},
-    {name: 'List', route: '/list'},
-    {name: 'Live Announcer', route: '/live-announcer'},
-    {name: 'Menu', route: '/menu'},
-    {name: 'Paginator', route: '/paginator'},
-    {name: 'Platform', route: '/platform'},
-    {name: 'Portal', route: '/portal'},
-    {name: 'Progress Bar', route: '/progress-bar'},
-    {name: 'Progress Spinner', route: '/progress-spinner'},
-    {name: 'Radio', route: '/radio'},
-    {name: 'Ripple', route: '/ripple'},
-    {name: 'Screen Type', route: '/screen-type'},
-    {name: 'Select', route: '/select'},
-    {name: 'Sidenav', route: '/sidenav'},
-    {name: 'Slide Toggle', route: '/slide-toggle'},
-    {name: 'Slider', route: '/slider'},
-    {name: 'Snack Bar', route: '/snack-bar'},
-    {name: 'Stepper', route: '/stepper'},
-    {name: 'Table', route: '/table'},
-    {name: 'Tabs', route: '/tabs'},
-    {name: 'Toolbar', route: '/toolbar'},
-    {name: 'Tooltip', route: '/tooltip'},
-    {name: 'Tree', route: '/tree'},
-    {name: 'Typography', route: '/typography'},
-    {name: 'Virtual Scrolling', route: '/virtual-scroll'},
-  ];
-
-  constructor(
-    private _element: ElementRef<HTMLElement>,
-    private _overlayContainer: OverlayContainer,
-    public rippleOptions: DevAppRippleOptions) {}
-
-  toggleFullscreen() {
-    // Cast to `any`, because the typings don't include the browser-prefixed methods.
-    const elem = this._element.nativeElement.querySelector('.demo-content') as any;
-    if (elem.requestFullscreen) {
-      elem.requestFullscreen();
-    } else if (elem.webkitRequestFullScreen) {
-      elem.webkitRequestFullScreen();
-    } else if (elem.mozRequestFullScreen) {
-      elem.mozRequestFullScreen();
-    } else if (elem.msRequestFullScreen) {
-      elem.msRequestFullScreen();
-    }
-  }
-
-  toggleTheme() {
-    const darkThemeClass = 'demo-unicorn-dark-theme';
-
-    this.dark = !this.dark;
-
-    if (this.dark) {
-      this._element.nativeElement.classList.add(darkThemeClass);
-      this._overlayContainer.getContainerElement().classList.add(darkThemeClass);
-    } else {
-      this._element.nativeElement.classList.remove(darkThemeClass);
-      this._overlayContainer.getContainerElement().classList.remove(darkThemeClass);
-    }
-  }
 }
 
 
diff --git a/src/dev-app/dialog/dialog-demo-module.ts b/src/dev-app/dialog/dialog-demo-module.ts
new file mode 100644
index 000000000000..dfa24dbc3082
--- /dev/null
+++ b/src/dev-app/dialog/dialog-demo-module.ts
@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {
+  MatButtonModule,
+  MatCardModule,
+  MatCheckboxModule,
+  MatDialogModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatSelectModule
+} from '@angular/material';
+import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from './dialog-demo';
+
+@NgModule({
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+  ],
+  declarations: [ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog],
+  entryComponents: [ContentElementDialog, IFrameDialog, JazzDialog],
+})
+export class DialogDemoModule {
+}
diff --git a/src/dev-app/drag-drop/drag-drop-demo-module.ts b/src/dev-app/drag-drop/drag-drop-demo-module.ts
new file mode 100644
index 000000000000..55760d896a41
--- /dev/null
+++ b/src/dev-app/drag-drop/drag-drop-demo-module.ts
@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {DragDropModule} from '@angular/cdk/drag-drop';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatFormFieldModule, MatIconModule, MatSelectModule} from '@angular/material';
+import {DragAndDropDemo} from './drag-drop-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    DragDropModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatSelectModule,
+  ],
+  declarations: [DragAndDropDemo],
+})
+export class DragDropDemoModule {
+}
diff --git a/src/dev-app/drawer/drawer-demo-module.ts b/src/dev-app/drawer/drawer-demo-module.ts
new file mode 100644
index 000000000000..74464a655d77
--- /dev/null
+++ b/src/dev-app/drawer/drawer-demo-module.ts
@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatButtonModule, MatListModule, MatSidenavModule} from '@angular/material';
+import {DrawerDemo} from './drawer-demo';
+
+@NgModule({
+  imports: [
+    MatButtonModule,
+    MatListModule,
+    MatSidenavModule,
+  ],
+  declarations: [DrawerDemo],
+})
+export class DrawerDemoModule {
+}
diff --git a/src/dev-app/example/example-module.ts b/src/dev-app/example/example-module.ts
index 07270bd2ae8b..aeb1c0762079 100644
--- a/src/dev-app/example/example-module.ts
+++ b/src/dev-app/example/example-module.ts
@@ -7,15 +7,18 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {MatExpansionModule} from '@angular/material';
 import {NgModule} from '@angular/core';
+import {MatExpansionModule} from '@angular/material';
+import {ExampleModule as ExampleDataModule} from '@angular/material-examples';
+import {Example} from './example';
+
 
 import {ExampleList} from './example-list';
-import {Example} from './example';
 
 @NgModule({
-  imports: [MatExpansionModule, CommonModule],
+  imports: [CommonModule, ExampleDataModule, MatExpansionModule],
   declarations: [Example, ExampleList],
   exports: [Example, ExampleList]
 })
-export class ExamplePageModule {}
+export class ExampleModule {
+}
diff --git a/src/dev-app/examples-page/examples-page-module.ts b/src/dev-app/examples-page/examples-page-module.ts
new file mode 100644
index 000000000000..5ef913171db6
--- /dev/null
+++ b/src/dev-app/examples-page/examples-page-module.ts
@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {ExampleModule} from '../example/example-module';
+import {ExamplesPage} from './examples-page';
+
+@NgModule({
+  imports: [
+    ExampleModule,
+  ],
+  declarations: [ExamplesPage],
+})
+export class ExamplesPageModule {
+}
diff --git a/src/dev-app/expansion/expansion-demo-module.ts b/src/dev-app/expansion/expansion-demo-module.ts
new file mode 100644
index 000000000000..880b00c33408
--- /dev/null
+++ b/src/dev-app/expansion/expansion-demo-module.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CdkAccordionModule} from '@angular/cdk/accordion';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {
+  MatButtonModule,
+  MatCheckboxModule,
+  MatExpansionModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatRadioModule,
+  MatSlideToggleModule
+} from '@angular/material';
+import {ExpansionDemo} from './expansion-demo';
+
+@NgModule({
+  imports: [
+    CdkAccordionModule, CommonModule, FormsModule, MatButtonModule, MatCheckboxModule,
+    MatExpansionModule, MatFormFieldModule, MatInputModule, MatRadioModule, MatSlideToggleModule
+  ],
+  declarations: [ExpansionDemo],
+})
+export class ExpansionDemoModule {
+}
diff --git a/src/dev-app/focus-origin/focus-origin-demo-module.ts b/src/dev-app/focus-origin/focus-origin-demo-module.ts
new file mode 100644
index 000000000000..a04613dbf5f8
--- /dev/null
+++ b/src/dev-app/focus-origin/focus-origin-demo-module.ts
@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {A11yModule} from '@angular/cdk/a11y';
+import {NgModule} from '@angular/core';
+import {FocusOriginDemo} from './focus-origin-demo';
+
+@NgModule({
+  imports: [
+    A11yModule,
+  ],
+  declarations: [FocusOriginDemo],
+})
+export class FocusOriginDemoModule {
+}
diff --git a/src/dev-app/gestures/gestures-demo-module.ts b/src/dev-app/gestures/gestures-demo-module.ts
new file mode 100644
index 000000000000..1f45776fdc55
--- /dev/null
+++ b/src/dev-app/gestures/gestures-demo-module.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {GesturesDemo} from './gestures-demo';
+
+@NgModule({
+  declarations: [GesturesDemo],
+})
+export class GesturesDemoModule {
+}
diff --git a/src/dev-app/grid-list/grid-list-demo-module.ts b/src/dev-app/grid-list/grid-list-demo-module.ts
new file mode 100644
index 000000000000..9edce4584204
--- /dev/null
+++ b/src/dev-app/grid-list/grid-list-demo-module.ts
@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatButtonModule, MatCardModule, MatGridListModule, MatIconModule} from '@angular/material';
+import {GridListDemo} from './grid-list-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatCardModule,
+    MatGridListModule,
+    MatIconModule,
+  ],
+  declarations: [GridListDemo],
+})
+export class GridListDemoModule {
+}
diff --git a/src/dev-app/icon/icon-demo-module.ts b/src/dev-app/icon/icon-demo-module.ts
new file mode 100644
index 000000000000..9828111bf37f
--- /dev/null
+++ b/src/dev-app/icon/icon-demo-module.ts
@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatIconModule} from '@angular/material';
+import {IconDemo} from './icon-demo';
+
+@NgModule({
+  imports: [
+    MatIconModule,
+  ],
+  declarations: [IconDemo],
+})
+export class IconDemoModule {
+}
diff --git a/src/dev-app/input/input-demo-module.ts b/src/dev-app/input/input-demo-module.ts
new file mode 100644
index 000000000000..00d3e8392e60
--- /dev/null
+++ b/src/dev-app/input/input-demo-module.ts
@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {
+  MatButtonModule,
+  MatButtonToggleModule,
+  MatCardModule,
+  MatCheckboxModule,
+  MatFormFieldModule,
+  MatIconModule,
+  MatInputModule,
+  MatSelectModule,
+  MatTabsModule,
+  MatToolbarModule
+} from '@angular/material';
+import {InputDemo} from './input-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatSelectModule,
+    MatTabsModule,
+    MatToolbarModule,
+    ReactiveFormsModule,
+  ],
+  declarations: [InputDemo],
+})
+export class InputDemoModule {
+}
diff --git a/src/dev-app/list/list-demo-module.ts b/src/dev-app/list/list-demo-module.ts
new file mode 100644
index 000000000000..02653aa5135d
--- /dev/null
+++ b/src/dev-app/list/list-demo-module.ts
@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatButtonModule, MatCheckboxModule, MatIconModule, MatListModule} from '@angular/material';
+import {ListDemo} from './list-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatIconModule,
+    MatListModule,
+  ],
+  declarations: [ListDemo],
+})
+export class ListDemoModule {
+}
diff --git a/src/dev-app/live-announcer/live-announcer-demo-module.ts b/src/dev-app/live-announcer/live-announcer-demo-module.ts
new file mode 100644
index 000000000000..c3019ede2152
--- /dev/null
+++ b/src/dev-app/live-announcer/live-announcer-demo-module.ts
@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {A11yModule} from '@angular/cdk/a11y';
+import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material';
+import {LiveAnnouncerDemo} from './live-announcer-demo';
+
+@NgModule({
+  imports: [A11yModule, MatButtonModule],
+  declarations: [LiveAnnouncerDemo],
+})
+export class LiveAnnouncerDemoModule {
+}
diff --git a/src/dev-app/material-module.ts b/src/dev-app/material-module.ts
deleted file mode 100644
index 976ffa09da37..000000000000
--- a/src/dev-app/material-module.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {DialogModule} from '@angular/cdk-experimental/dialog';
-import {DragDropModule} from '@angular/cdk/drag-drop';
-import {ScrollingModule as ExperimentalScrollingModule} from '@angular/cdk-experimental/scrolling';
-import {A11yModule} from '@angular/cdk/a11y';
-import {CdkAccordionModule} from '@angular/cdk/accordion';
-import {BidiModule} from '@angular/cdk/bidi';
-import {ObserversModule} from '@angular/cdk/observers';
-import {OverlayModule} from '@angular/cdk/overlay';
-import {PlatformModule} from '@angular/cdk/platform';
-import {PortalModule} from '@angular/cdk/portal';
-import {ScrollingModule} from '@angular/cdk/scrolling';
-import {CdkTableModule} from '@angular/cdk/table';
-import {TextFieldModule} from '@angular/cdk/text-field';
-import {CdkTreeModule} from '@angular/cdk/tree';
-import {NgModule} from '@angular/core';
-import {
-  MatAutocompleteModule,
-  MatBadgeModule,
-  MatBottomSheetModule,
-  MatButtonModule,
-  MatButtonToggleModule,
-  MatCardModule,
-  MatCheckboxModule,
-  MatChipsModule,
-  MatDatepickerModule,
-  MatDialogModule,
-  MatDividerModule,
-  MatExpansionModule,
-  MatFormFieldModule,
-  MatGridListModule,
-  MatIconModule,
-  MatInputModule,
-  MatListModule,
-  MatMenuModule,
-  MatNativeDateModule,
-  MatPaginatorModule,
-  MatProgressBarModule,
-  MatProgressSpinnerModule,
-  MatRadioModule,
-  MatRippleModule,
-  MatSelectModule,
-  MatSidenavModule,
-  MatSliderModule,
-  MatSlideToggleModule,
-  MatSnackBarModule,
-  MatSortModule,
-  MatStepperModule,
-  MatTableModule,
-  MatTabsModule,
-  MatToolbarModule,
-  MatTooltipModule,
-  MatTreeModule
-} from '@angular/material';
-
-
-/**
- * NgModule that includes all Material modules that are required to serve the dev-app.
- */
-@NgModule({
-  exports: [
-    MatAutocompleteModule,
-    MatBadgeModule,
-    MatBottomSheetModule,
-    MatButtonModule,
-    MatButtonToggleModule,
-    MatCardModule,
-    MatCheckboxModule,
-    MatChipsModule,
-    MatTableModule,
-    MatDatepickerModule,
-    MatDialogModule,
-    MatDividerModule,
-    MatExpansionModule,
-    MatFormFieldModule,
-    MatGridListModule,
-    MatIconModule,
-    MatInputModule,
-    MatListModule,
-    MatMenuModule,
-    MatPaginatorModule,
-    MatProgressBarModule,
-    MatProgressSpinnerModule,
-    MatRadioModule,
-    MatRippleModule,
-    MatSelectModule,
-    MatSidenavModule,
-    MatSlideToggleModule,
-    MatSliderModule,
-    MatSnackBarModule,
-    MatSortModule,
-    MatStepperModule,
-    MatTabsModule,
-    MatToolbarModule,
-    MatTooltipModule,
-    MatTreeModule,
-    MatNativeDateModule,
-    CdkTableModule,
-    CdkTreeModule,
-    A11yModule,
-    BidiModule,
-    CdkAccordionModule,
-    TextFieldModule,
-    ObserversModule,
-    OverlayModule,
-    PlatformModule,
-    PortalModule,
-    ScrollingModule,
-    ExperimentalScrollingModule,
-    DialogModule,
-    DragDropModule,
-  ]
-})
-export class DevAppMaterialModule {}
diff --git a/src/dev-app/menu/menu-demo-module.ts b/src/dev-app/menu/menu-demo-module.ts
new file mode 100644
index 000000000000..12bba4426136
--- /dev/null
+++ b/src/dev-app/menu/menu-demo-module.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {
+  MatButtonModule,
+  MatDividerModule,
+  MatIconModule,
+  MatMenuModule,
+  MatToolbarModule
+} from '@angular/material';
+import {MenuDemo} from './menu-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatDividerModule,
+    MatIconModule,
+    MatMenuModule,
+    MatToolbarModule,
+  ],
+  declarations: [MenuDemo],
+})
+export class MenuDemoModule {
+}
diff --git a/src/dev-app/paginator/paginator-demo-module.ts b/src/dev-app/paginator/paginator-demo-module.ts
new file mode 100644
index 000000000000..72511966f6c6
--- /dev/null
+++ b/src/dev-app/paginator/paginator-demo-module.ts
@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {
+  MatCardModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatPaginatorModule,
+  MatSlideToggleModule
+} from '@angular/material';
+import {PaginatorDemo} from './paginator-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatPaginatorModule,
+    MatSlideToggleModule,
+  ],
+  declarations: [PaginatorDemo],
+})
+export class PaginatorDemoModule {
+}
diff --git a/src/dev-app/platform/platform-demo-module.ts b/src/dev-app/platform/platform-demo-module.ts
new file mode 100644
index 000000000000..57034d241fe9
--- /dev/null
+++ b/src/dev-app/platform/platform-demo-module.ts
@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {PlatformModule} from '@angular/cdk/platform';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {PlatformDemo} from './platform-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    PlatformModule,
+  ],
+  declarations: [PlatformDemo],
+})
+export class PlatformDemoModule {
+}
diff --git a/src/dev-app/portal/portal-demo-module.ts b/src/dev-app/portal/portal-demo-module.ts
new file mode 100644
index 000000000000..8c282cdc2074
--- /dev/null
+++ b/src/dev-app/portal/portal-demo-module.ts
@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {PortalModule} from '@angular/cdk/portal';
+import {NgModule} from '@angular/core';
+import {PortalDemo, ScienceJoke} from './portal-demo';
+
+@NgModule({
+  imports: [
+    PortalModule,
+  ],
+  declarations: [PortalDemo, ScienceJoke],
+  entryComponents: [ScienceJoke],
+})
+export class PortalDemoModule {
+}
diff --git a/src/dev-app/progress-bar/progress-bar-demo-module.ts b/src/dev-app/progress-bar/progress-bar-demo-module.ts
new file mode 100644
index 000000000000..708b0eafbac9
--- /dev/null
+++ b/src/dev-app/progress-bar/progress-bar-demo-module.ts
@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatButtonModule, MatButtonToggleModule, MatProgressBarModule} from '@angular/material';
+import {ProgressBarDemo} from './progress-bar-demo';
+
+@NgModule({
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatProgressBarModule,
+  ],
+  declarations: [ProgressBarDemo],
+})
+export class ProgressBarDemoModule {
+}
diff --git a/src/dev-app/progress-spinner/progress-spinner-demo-module.ts b/src/dev-app/progress-spinner/progress-spinner-demo-module.ts
new file mode 100644
index 000000000000..3685246568bc
--- /dev/null
+++ b/src/dev-app/progress-spinner/progress-spinner-demo-module.ts
@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {
+  MatButtonModule,
+  MatButtonToggleModule,
+  MatCheckboxModule,
+  MatProgressSpinnerModule
+} from '@angular/material';
+import {ProgressSpinnerDemo} from './progress-spinner-demo';
+
+@NgModule({
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCheckboxModule,
+    MatProgressSpinnerModule,
+  ],
+  declarations: [ProgressSpinnerDemo],
+})
+export class ProgressSpinnerDemoModule {
+}
diff --git a/src/dev-app/radio/radio-demo-module.ts b/src/dev-app/radio/radio-demo-module.ts
new file mode 100644
index 000000000000..4625167c61bd
--- /dev/null
+++ b/src/dev-app/radio/radio-demo-module.ts
@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatButtonModule, MatCheckboxModule, MatRadioModule} from '@angular/material';
+import {RadioDemo} from './radio-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatRadioModule,
+  ],
+  declarations: [RadioDemo],
+})
+export class RadioDemoModule {
+}
diff --git a/src/dev-app/ripple/ripple-demo-module.ts b/src/dev-app/ripple/ripple-demo-module.ts
new file mode 100644
index 000000000000..8c72d18d61db
--- /dev/null
+++ b/src/dev-app/ripple/ripple-demo-module.ts
@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {
+  MatButtonModule,
+  MatCheckboxModule,
+  MatFormFieldModule,
+  MatIconModule,
+  MatInputModule,
+  MatRippleModule
+} from '@angular/material';
+import {ExampleModule} from '../example/example-module';
+import {RippleDemo} from './ripple-demo';
+
+@NgModule({
+  imports: [
+    ExampleModule,
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatRippleModule,
+  ],
+  declarations: [RippleDemo],
+})
+export class RippleDemoModule {
+}
diff --git a/src/dev-app/screen-type/screen-type-demo-module.ts b/src/dev-app/screen-type/screen-type-demo-module.ts
new file mode 100644
index 000000000000..6382e9abb53d
--- /dev/null
+++ b/src/dev-app/screen-type/screen-type-demo-module.ts
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {LayoutModule} from '@angular/cdk/layout';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {MatGridListModule, MatIconModule} from '@angular/material';
+import {ScreenTypeDemo} from './screen-type-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    LayoutModule,
+    MatGridListModule,
+    MatIconModule,
+  ],
+  declarations: [ScreenTypeDemo],
+})
+export class ScreenTypeDemoModule {
+}
diff --git a/src/dev-app/select/select-demo-module.ts b/src/dev-app/select/select-demo-module.ts
new file mode 100644
index 000000000000..735653c25e54
--- /dev/null
+++ b/src/dev-app/select/select-demo-module.ts
@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {
+  MatButtonModule,
+  MatCardModule,
+  MatFormFieldModule,
+  MatIconModule,
+  MatInputModule,
+  MatSelectModule,
+  MatToolbarModule
+} from '@angular/material';
+import {SelectDemo} from './select-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatSelectModule,
+    MatToolbarModule,
+    ReactiveFormsModule,
+  ],
+  declarations: [SelectDemo],
+})
+export class SelectDemoModule {
+}
diff --git a/src/dev-app/sidenav/sidenav-demo-module.ts b/src/dev-app/sidenav/sidenav-demo-module.ts
new file mode 100644
index 000000000000..01ad05bf89fa
--- /dev/null
+++ b/src/dev-app/sidenav/sidenav-demo-module.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {
+  MatButtonModule,
+  MatCheckboxModule,
+  MatSidenavModule,
+  MatToolbarModule
+} from '@angular/material';
+import {SidenavDemo} from './sidenav-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatSidenavModule,
+    MatToolbarModule,
+  ],
+  declarations: [SidenavDemo],
+})
+export class SidenavDemoModule {
+}
diff --git a/src/dev-app/slide-toggle/slide-toggle-demo-module.ts b/src/dev-app/slide-toggle/slide-toggle-demo-module.ts
new file mode 100644
index 000000000000..9c2c5c32d1ec
--- /dev/null
+++ b/src/dev-app/slide-toggle/slide-toggle-demo-module.ts
@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatButtonModule, MatSlideToggleModule} from '@angular/material';
+import {SlideToggleDemo} from './slide-toggle-demo';
+
+@NgModule({
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatSlideToggleModule,
+  ],
+  declarations: [SlideToggleDemo],
+})
+export class SlideToggleDemoModule {
+}
diff --git a/src/dev-app/slider/slider-demo-module.ts b/src/dev-app/slider/slider-demo-module.ts
new file mode 100644
index 000000000000..16c2e61b254c
--- /dev/null
+++ b/src/dev-app/slider/slider-demo-module.ts
@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatSliderModule, MatTabsModule} from '@angular/material';
+import {SliderDemo} from './slider-demo';
+
+@NgModule({
+  imports: [
+    FormsModule,
+    MatSliderModule,
+    MatTabsModule,
+  ],
+  declarations: [SliderDemo],
+})
+export class SliderDemoModule {
+}
diff --git a/src/dev-app/snack-bar/snack-bar-demo-module.ts b/src/dev-app/snack-bar/snack-bar-demo-module.ts
new file mode 100644
index 000000000000..c252be41f0a3
--- /dev/null
+++ b/src/dev-app/snack-bar/snack-bar-demo-module.ts
@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {
+  MatButtonModule,
+  MatCheckboxModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatSelectModule,
+  MatSnackBarModule
+} from '@angular/material';
+import {SnackBarDemo} from './snack-bar-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatSnackBarModule,
+  ],
+  declarations: [SnackBarDemo],
+})
+export class SnackBarDemoModule {
+}
diff --git a/src/dev-app/stepper/stepper-demo-module.ts b/src/dev-app/stepper/stepper-demo-module.ts
new file mode 100644
index 000000000000..437ccddd30d9
--- /dev/null
+++ b/src/dev-app/stepper/stepper-demo-module.ts
@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {
+  MatButtonModule,
+  MatCheckboxModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatStepperModule
+} from '@angular/material';
+import {StepperDemo} from './stepper-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatStepperModule,
+    ReactiveFormsModule,
+  ],
+  declarations: [StepperDemo],
+})
+export class StepperDemoModule {
+}
diff --git a/src/dev-app/table/table-demo-module.ts b/src/dev-app/table/table-demo-module.ts
index 1cd6373ca9ad..4153791c3bd5 100644
--- a/src/dev-app/table/table-demo-module.ts
+++ b/src/dev-app/table/table-demo-module.ts
@@ -7,11 +7,12 @@
  */
 
 import {NgModule} from '@angular/core';
+import {ExampleModule} from '../example/example-module';
 import {TableDemo} from './table-demo';
-import {ExamplePageModule} from '../example/example-module';
 
 @NgModule({
-  imports: [ExamplePageModule],
+  imports: [ExampleModule],
   declarations: [TableDemo],
 })
-export class TableDemoModule { }
+export class TableDemoModule {
+}
diff --git a/src/dev-app/tabs/tabs-demo-module.ts b/src/dev-app/tabs/tabs-demo-module.ts
new file mode 100644
index 000000000000..44ed755cba38
--- /dev/null
+++ b/src/dev-app/tabs/tabs-demo-module.ts
@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatTabsModule} from '@angular/material';
+import {ExampleModule} from '../example/example-module';
+import {TabsDemo} from './tabs-demo';
+
+@NgModule({
+  imports: [
+    ExampleModule,
+    MatTabsModule,
+  ],
+  declarations: [TabsDemo],
+})
+export class TabsDemoModule {
+}
diff --git a/src/dev-app/toolbar/toolbar-demo-module.ts b/src/dev-app/toolbar/toolbar-demo-module.ts
new file mode 100644
index 000000000000..24ba95a34f05
--- /dev/null
+++ b/src/dev-app/toolbar/toolbar-demo-module.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {
+  MatButtonModule,
+  MatFormFieldModule,
+  MatIconModule,
+  MatInputModule,
+  MatSelectModule,
+  MatToolbarModule
+} from '@angular/material';
+import {ToolbarDemo} from './toolbar-demo';
+
+@NgModule({
+  imports: [
+    MatButtonModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatSelectModule,
+    MatToolbarModule,
+  ],
+  declarations: [ToolbarDemo],
+})
+export class ToolbarDemoModule {
+}
diff --git a/src/dev-app/tooltip/tooltip-demo-module.ts b/src/dev-app/tooltip/tooltip-demo-module.ts
new file mode 100644
index 000000000000..fd8a8b252ace
--- /dev/null
+++ b/src/dev-app/tooltip/tooltip-demo-module.ts
@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatTooltipModule} from '@angular/material';
+import {ExampleModule} from '../example/example-module';
+import {TooltipDemo} from './tooltip-demo';
+
+@NgModule({
+  imports: [
+    ExampleModule,
+    MatTooltipModule,
+  ],
+  declarations: [TooltipDemo],
+})
+export class TooltipDemoModule {
+}
diff --git a/src/dev-app/tree/tree-demo-module.ts b/src/dev-app/tree/tree-demo-module.ts
index f1c21a7ae760..3cb9d4509c16 100644
--- a/src/dev-app/tree/tree-demo-module.ts
+++ b/src/dev-app/tree/tree-demo-module.ts
@@ -11,20 +11,22 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {
   MatButtonModule,
-  MatExpansionModule,
   MatCheckboxModule,
+  MatExpansionModule,
   MatFormFieldModule,
   MatIconModule,
   MatInputModule,
   MatProgressBarModule,
   MatTreeModule
 } from '@angular/material';
-import {TreeDemo} from './tree-demo';
-import {ChecklistTreeDemo} from './checklist-tree-demo/checklist-tree-demo';
+
+import {ExampleModule} from '../example/example-module';
+
 import {ChecklistNestedTreeDemo} from './checklist-tree-demo/checklist-nested-tree-demo';
+import {ChecklistTreeDemo} from './checklist-tree-demo/checklist-tree-demo';
 import {DynamicTreeDemo} from './dynamic-tree-demo/dynamic-tree-demo';
 import {LoadmoreTreeDemo} from './loadmore-tree-demo/loadmore-tree-demo';
-import {ExamplePageModule} from '../example/example-module';
+import {TreeDemo} from './tree-demo';
 
 @NgModule({
   imports: [
@@ -39,14 +41,10 @@ import {ExamplePageModule} from '../example/example-module';
     MatInputModule,
     MatTreeModule,
     MatProgressBarModule,
-    ExamplePageModule,
-  ],
-  declarations: [
-    ChecklistNestedTreeDemo,
-    ChecklistTreeDemo,
-    TreeDemo,
-    DynamicTreeDemo,
-    LoadmoreTreeDemo
+    ExampleModule,
   ],
+  declarations:
+      [ChecklistNestedTreeDemo, ChecklistTreeDemo, TreeDemo, DynamicTreeDemo, LoadmoreTreeDemo],
 })
-export class TreeDemoModule {}
+export class TreeDemoModule {
+}
diff --git a/src/dev-app/typography/typography-demo-module.ts b/src/dev-app/typography/typography-demo-module.ts
new file mode 100644
index 000000000000..b50f236725d5
--- /dev/null
+++ b/src/dev-app/typography/typography-demo-module.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {TypographyDemo} from './typography-demo';
+
+@NgModule({
+  declarations: [TypographyDemo],
+})
+export class TypographyDemoModule {
+}
diff --git a/src/dev-app/virtual-scroll/virtual-scroll-demo-module.ts b/src/dev-app/virtual-scroll/virtual-scroll-demo-module.ts
new file mode 100644
index 000000000000..45ce13bd21e0
--- /dev/null
+++ b/src/dev-app/virtual-scroll/virtual-scroll-demo-module.ts
@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ScrollingModule as ExperimentalScrollingModule} from '@angular/cdk-experimental/scrolling';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {
+  MatButtonModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatSelectModule
+} from '@angular/material';
+import {VirtualScrollDemo} from './virtual-scroll-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ExperimentalScrollingModule,
+    FormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    ScrollingModule,
+  ],
+  declarations: [VirtualScrollDemo],
+})
+export class VirtualScrollDemoModule {
+}