diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 468c257a3792..acc764a6d9e2 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -111,7 +111,7 @@
 /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/dev-app/**                            @mmalerba
 /src/dev-app/dialog/**                             @jelbourn @crisbeto
 /src/dev-app/drag-drop/**                          @crisbeto
 /src/dev-app/drawer/**                             @mmalerba
diff --git a/src/dev-app/autocomplete/autocomplete-demo-module.ts b/src/dev-app/autocomplete/autocomplete-demo-module.ts
index 2e51b6f154f2..18269191c81d 100644
--- a/src/dev-app/autocomplete/autocomplete-demo-module.ts
+++ b/src/dev-app/autocomplete/autocomplete-demo-module.ts
@@ -16,6 +16,7 @@ import {
   MatFormFieldModule,
   MatInputModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {AutocompleteDemo} from './autocomplete-demo';
 
 @NgModule({
@@ -28,6 +29,7 @@ import {AutocompleteDemo} from './autocomplete-demo';
     MatFormFieldModule,
     MatInputModule,
     ReactiveFormsModule,
+    RouterModule.forChild([{path: '', component: AutocompleteDemo}]),
   ],
   declarations: [AutocompleteDemo],
 })
diff --git a/src/dev-app/badge/badge-demo-module.ts b/src/dev-app/badge/badge-demo-module.ts
index 7a3da62d0154..008159872f2d 100644
--- a/src/dev-app/badge/badge-demo-module.ts
+++ b/src/dev-app/badge/badge-demo-module.ts
@@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatBadgeModule, MatButtonModule, MatIconModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {BadgeDemo} from './badge-demo';
 
 @NgModule({
@@ -19,6 +20,7 @@ import {BadgeDemo} from './badge-demo';
     MatBadgeModule,
     MatButtonModule,
     MatIconModule,
+    RouterModule.forChild([{path: '', component: BadgeDemo}]),
   ],
   declarations: [BadgeDemo],
 })
diff --git a/src/dev-app/baseline/baseline-demo-module.ts b/src/dev-app/baseline/baseline-demo-module.ts
index 337c361b095c..c3e6e9080981 100644
--- a/src/dev-app/baseline/baseline-demo-module.ts
+++ b/src/dev-app/baseline/baseline-demo-module.ts
@@ -17,6 +17,7 @@ import {
   MatSelectModule,
   MatToolbarModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {BaselineDemo} from './baseline-demo';
 
 @NgModule({
@@ -29,6 +30,7 @@ import {BaselineDemo} from './baseline-demo';
     MatRadioModule,
     MatSelectModule,
     MatToolbarModule,
+    RouterModule.forChild([{path: '', component: BaselineDemo}]),
   ],
   declarations: [BaselineDemo],
 })
diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo-module.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo-module.ts
index af0e6f8c16d6..702d73e87c04 100644
--- a/src/dev-app/bottom-sheet/bottom-sheet-demo-module.ts
+++ b/src/dev-app/bottom-sheet/bottom-sheet-demo-module.ts
@@ -20,6 +20,7 @@ import {
   MatListModule,
   MatSelectModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {BottomSheetDemo, ExampleBottomSheet} from './bottom-sheet-demo';
 
 @NgModule({
@@ -35,6 +36,7 @@ import {BottomSheetDemo, ExampleBottomSheet} from './bottom-sheet-demo';
     MatInputModule,
     MatListModule,
     MatSelectModule,
+    RouterModule.forChild([{path: '', component: BottomSheetDemo}]),
   ],
   declarations: [BottomSheetDemo, ExampleBottomSheet],
   entryComponents: [ExampleBottomSheet],
diff --git a/src/dev-app/button-toggle/button-toggle-demo-module.ts b/src/dev-app/button-toggle/button-toggle-demo-module.ts
index 44d4d66aeaed..c6338266277b 100644
--- a/src/dev-app/button-toggle/button-toggle-demo-module.ts
+++ b/src/dev-app/button-toggle/button-toggle-demo-module.ts
@@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonToggleModule, MatCheckboxModule, MatIconModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ButtonToggleDemo} from './button-toggle-demo';
 
 @NgModule({
@@ -19,6 +20,7 @@ import {ButtonToggleDemo} from './button-toggle-demo';
     MatButtonToggleModule,
     MatCheckboxModule,
     MatIconModule,
+    RouterModule.forChild([{path: '', component: ButtonToggleDemo}]),
   ],
   declarations: [ButtonToggleDemo],
 })
diff --git a/src/dev-app/button/button-demo-module.ts b/src/dev-app/button/button-demo-module.ts
index c5a845b242fb..351c52b98cb4 100644
--- a/src/dev-app/button/button-demo-module.ts
+++ b/src/dev-app/button/button-demo-module.ts
@@ -8,12 +8,14 @@
 
 import {NgModule} from '@angular/core';
 import {MatButtonModule, MatIconModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ButtonDemo} from './button-demo';
 
 @NgModule({
   imports: [
     MatButtonModule,
     MatIconModule,
+    RouterModule.forChild([{path: '', component: ButtonDemo}]),
   ],
   declarations: [ButtonDemo],
 })
diff --git a/src/dev-app/card/card-demo-module.ts b/src/dev-app/card/card-demo-module.ts
index 20c5993cb15b..2802f70bf778 100644
--- a/src/dev-app/card/card-demo-module.ts
+++ b/src/dev-app/card/card-demo-module.ts
@@ -13,6 +13,7 @@ import {
   MatDividerModule,
   MatProgressBarModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {CardDemo} from './card-demo';
 
 @NgModule({
@@ -21,6 +22,7 @@ import {CardDemo} from './card-demo';
     MatCardModule,
     MatDividerModule,
     MatProgressBarModule,
+    RouterModule.forChild([{path: '', component: CardDemo}]),
   ],
   declarations: [CardDemo],
 })
diff --git a/src/dev-app/checkbox/checkbox-demo-module.ts b/src/dev-app/checkbox/checkbox-demo-module.ts
index 92d7963a6fdd..25cd416b5497 100644
--- a/src/dev-app/checkbox/checkbox-demo-module.ts
+++ b/src/dev-app/checkbox/checkbox-demo-module.ts
@@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatCheckboxModule, MatPseudoCheckboxModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from './checkbox-demo';
 
 @NgModule({
@@ -18,6 +19,7 @@ import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from './checkbox-demo';
     FormsModule,
     MatCheckboxModule,
     MatPseudoCheckboxModule,
+    RouterModule.forChild([{path: '', component: CheckboxDemo}]),
   ],
   declarations: [CheckboxDemo, MatCheckboxDemoNestedChecklist],
 })
diff --git a/src/dev-app/chips/chips-demo-module.ts b/src/dev-app/chips/chips-demo-module.ts
index cf83265f3666..7fe266a8071f 100644
--- a/src/dev-app/chips/chips-demo-module.ts
+++ b/src/dev-app/chips/chips-demo-module.ts
@@ -18,6 +18,7 @@ import {
   MatIconModule,
   MatToolbarModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ChipsDemo} from './chips-demo';
 
 @NgModule({
@@ -31,6 +32,7 @@ import {ChipsDemo} from './chips-demo';
     MatFormFieldModule,
     MatIconModule,
     MatToolbarModule,
+    RouterModule.forChild([{path: '', component: ChipsDemo}]),
   ],
   declarations: [ChipsDemo],
 })
diff --git a/src/dev-app/connected-overlay/connected-overlay-demo-module.ts b/src/dev-app/connected-overlay/connected-overlay-demo-module.ts
index db91cfb45ea1..7756b9b595de 100644
--- a/src/dev-app/connected-overlay/connected-overlay-demo-module.ts
+++ b/src/dev-app/connected-overlay/connected-overlay-demo-module.ts
@@ -11,6 +11,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule, MatCheckboxModule, MatRadioModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ConnectedOverlayDemo} from './connected-overlay-demo';
 
 @NgModule({
@@ -21,6 +22,7 @@ import {ConnectedOverlayDemo} from './connected-overlay-demo';
     MatCheckboxModule,
     MatRadioModule,
     OverlayModule,
+    RouterModule.forChild([{path: '', component: ConnectedOverlayDemo}]),
   ],
   declarations: [ConnectedOverlayDemo],
 })
diff --git a/src/dev-app/datepicker/datepicker-demo-module.ts b/src/dev-app/datepicker/datepicker-demo-module.ts
index 8d867369e708..edec8d6f84d4 100644
--- a/src/dev-app/datepicker/datepicker-demo-module.ts
+++ b/src/dev-app/datepicker/datepicker-demo-module.ts
@@ -16,8 +16,10 @@ import {
   MatFormFieldModule,
   MatIconModule,
   MatInputModule,
+  MatNativeDateModule,
   MatSelectModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from './datepicker-demo';
 
 @NgModule({
@@ -30,8 +32,10 @@ import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from './datepicker-
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
+    MatNativeDateModule,
     MatSelectModule,
     ReactiveFormsModule,
+    RouterModule.forChild([{path: '', component: DatepickerDemo}]),
   ],
   declarations: [CustomHeader, CustomHeaderNgContent, DatepickerDemo],
   entryComponents: [CustomHeader, CustomHeaderNgContent],
diff --git a/src/dev-app/dev-app-module.ts b/src/dev-app/dev-app-module.ts
deleted file mode 100644
index abd3e1508b66..000000000000
--- a/src/dev-app/dev-app-module.ts
+++ /dev/null
@@ -1,133 +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 {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
-import {HttpClientModule} from '@angular/common/http';
-import {NgModule} from '@angular/core';
-import {MAT_RIPPLE_GLOBAL_OPTIONS} from '@angular/material';
-import {BrowserModule} from '@angular/platform-browser';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {RouterModule} from '@angular/router';
-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 {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 {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 {TypographyDemoModule} from './typography/typography-demo-module';
-import {VirtualScrollDemoModule} from './virtual-scroll/virtual-scroll-demo-module';
-
-@NgModule({
-  imports: [
-    BrowserAnimationsModule,
-    BrowserModule,
-    DevAppLayoutModule,
-    HttpClientModule,
-    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: [
-    DevAppComponent,
-    DevAppHome,
-    DevApp404,
-  ],
-  providers: [
-    {provide: OverlayContainer, useClass: FullscreenOverlayContainer},
-    {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useExisting: DevAppRippleOptions},
-  ],
-  bootstrap: [DevAppComponent],
-})
-export class DevAppModule {
-}
diff --git a/src/dev-app/dev-app.ts b/src/dev-app/dev-app.ts
index 1a50a5062bd0..08e998fd66e6 100644
--- a/src/dev-app/dev-app.ts
+++ b/src/dev-app/dev-app.ts
@@ -17,24 +17,3 @@ import {Component, ViewEncapsulation} from '@angular/core';
 })
 export class DevAppComponent {
 }
-
-
-/** Home component which includes a welcome message for the dev-app. */
-@Component({
-  selector: 'home',
-  template: `
-    <p>Welcome to the development demos for Angular Material!</p>
-    <p>Open the sidenav to select a demo.</p>
-  `,
-})
-export class DevAppHome {}
-
-@Component({
-  template: `
-    <h1>404</h1>
-    <p>This page does not exist</p>
-    <a mat-raised-button routerLink="/">Go back to the home page</a>
-  `,
-  host: {'class': 'mat-typography'},
-})
-export class DevApp404 {}
diff --git a/src/dev-app/dev-app/dev-app-404.ts b/src/dev-app/dev-app/dev-app-404.ts
new file mode 100644
index 000000000000..c017a6fda35c
--- /dev/null
+++ b/src/dev-app/dev-app/dev-app-404.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 {Component} from '@angular/core';
+
+@Component({
+  template: `
+    <h1>404</h1>
+    <p>This page does not exist</p>
+    <a mat-raised-button routerLink="/">Go back to the home page</a>
+  `,
+  host: {'class': 'mat-typography'},
+})
+export class DevApp404 {
+}
diff --git a/src/dev-app/dev-app/dev-app-directionality.ts b/src/dev-app/dev-app/dev-app-directionality.ts
new file mode 100644
index 000000000000..b20e937e5a39
--- /dev/null
+++ b/src/dev-app/dev-app/dev-app-directionality.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 {Direction, Directionality} from '@angular/cdk/bidi';
+import {EventEmitter, Injectable, OnDestroy} from '@angular/core';
+
+@Injectable()
+export class DevAppDirectionality implements Directionality, OnDestroy {
+  readonly change = new EventEmitter<Direction>();
+
+  get value(): Direction {
+    return this._value;
+  }
+  set value(value: Direction) {
+    this._value = value;
+    this.change.next(value);
+  }
+  private _value: Direction = 'ltr';
+
+  ngOnDestroy() {
+    this.change.complete();
+  }
+}
diff --git a/src/dev-app/dev-app/dev-app-home.ts b/src/dev-app/dev-app/dev-app-home.ts
new file mode 100644
index 000000000000..17ca68f047b7
--- /dev/null
+++ b/src/dev-app/dev-app/dev-app-home.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
+ */
+
+/** Home component which includes a welcome message for the dev-app. */
+import {Component} from '@angular/core';
+
+@Component({
+  template: `
+    <p>Welcome to the development demos for Angular Material!</p>
+    <p>Open the sidenav to select a demo.</p>
+  `,
+})
+export class DevAppHome {
+}
diff --git a/src/dev-app/dev-app-layout/dev-app-layout.html b/src/dev-app/dev-app/dev-app-layout.html
similarity index 88%
rename from src/dev-app/dev-app-layout/dev-app-layout.html
rename to src/dev-app/dev-app/dev-app-layout.html
index 2ccf16086577..7f2ae645a520 100644
--- a/src/dev-app/dev-app-layout/dev-app-layout.html
+++ b/src/dev-app/dev-app/dev-app-layout.html
@@ -37,15 +37,15 @@ <h1>Angular Material Demos</h1>
           <button mat-button (click)="rippleOptions.disabled = !rippleOptions.disabled">
             {{rippleOptions.disabled ? 'Enable' : 'Disable'}} ripples
           </button>
-          <button mat-button (click)="root.dir = (root.dir === 'rtl' ? 'ltr' : 'rtl')"
+          <button mat-button (click)="dir.value = (dir.value === 'rtl' ? 'ltr' : 'rtl')"
                   title="Toggle between RTL and LTR">
-            {{root.dir.toUpperCase()}}
+            {{dir.value.toUpperCase()}}
           </button>
         </div>
       </div>
     </mat-toolbar>
 
-    <div #root="dir" dir="ltr" class="demo-content mat-app-background">
+    <div [attr.dir]="dir.value" class="demo-content mat-app-background">
       <ng-content></ng-content>
     </div>
   </main>
diff --git a/src/dev-app/dev-app-layout/dev-app-layout.scss b/src/dev-app/dev-app/dev-app-layout.scss
similarity index 100%
rename from src/dev-app/dev-app-layout/dev-app-layout.scss
rename to src/dev-app/dev-app/dev-app-layout.scss
diff --git a/src/dev-app/dev-app-layout/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
similarity index 90%
rename from src/dev-app/dev-app-layout/dev-app-layout.ts
rename to src/dev-app/dev-app/dev-app-layout.ts
index 85d0769bd3a0..efe016802928 100644
--- a/src/dev-app/dev-app-layout/dev-app-layout.ts
+++ b/src/dev-app/dev-app/dev-app-layout.ts
@@ -6,9 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {Directionality} from '@angular/cdk/bidi';
 import {OverlayContainer} from '@angular/cdk/overlay';
-import {Component, ElementRef, ViewEncapsulation} from '@angular/core';
+import {ChangeDetectorRef, Component, ElementRef, Inject, ViewEncapsulation} from '@angular/core';
 import {DevAppRippleOptions} from '../ripple/ripple-options';
+import {DevAppDirectionality} from './dev-app-directionality';
 
 /** Root component for the dev-app demos. */
 @Component({
@@ -70,7 +72,10 @@ export class DevAppLayout {
 
   constructor(
       private _element: ElementRef<HTMLElement>, private _overlayContainer: OverlayContainer,
-      public rippleOptions: DevAppRippleOptions) {}
+      public rippleOptions: DevAppRippleOptions,
+      @Inject(Directionality) public dir: DevAppDirectionality, cdr: ChangeDetectorRef) {
+    dir.change.subscribe(() => cdr.markForCheck());
+  }
 
   toggleFullscreen() {
     // Cast to `any`, because the typings don't include the browser-prefixed methods.
diff --git a/src/dev-app/dev-app-layout/dev-app-layout-module.ts b/src/dev-app/dev-app/dev-app-module.ts
similarity index 81%
rename from src/dev-app/dev-app-layout/dev-app-layout-module.ts
rename to src/dev-app/dev-app/dev-app-module.ts
index c9c13e40cda4..1d4f73b1a76c 100644
--- a/src/dev-app/dev-app-layout/dev-app-layout-module.ts
+++ b/src/dev-app/dev-app/dev-app-module.ts
@@ -16,6 +16,8 @@ import {
   MatToolbarModule
 } from '@angular/material';
 import {RouterModule} from '@angular/router';
+import {DevApp404} from './dev-app-404';
+import {DevAppHome} from './dev-app-home';
 import {DevAppLayout} from './dev-app-layout';
 
 @NgModule({
@@ -28,8 +30,8 @@ import {DevAppLayout} from './dev-app-layout';
     MatToolbarModule,
     RouterModule,
   ],
-  declarations: [DevAppLayout],
+  declarations: [DevAppLayout, DevAppHome, DevApp404],
   exports: [DevAppLayout],
 })
-export class DevAppLayoutModule {
+export class DevAppModule {
 }
diff --git a/src/dev-app/dev-app/routes.ts b/src/dev-app/dev-app/routes.ts
new file mode 100644
index 000000000000..647540d40b1a
--- /dev/null
+++ b/src/dev-app/dev-app/routes.ts
@@ -0,0 +1,93 @@
+/**
+ * @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 {Routes} from '@angular/router';
+import {DevApp404} from './dev-app-404';
+import {DevAppHome} from './dev-app-home';
+
+export const DEV_APP_ROUTES: Routes = [
+  {path: '', component: DevAppHome},
+  {
+    path: 'autocomplete',
+    loadChildren: 'autocomplete/autocomplete-demo-module#AutocompleteDemoModule'
+  },
+  {path: 'badge', loadChildren: 'badge/badge-demo-module#BadgeDemoModule'},
+  {
+    path: 'bottom-sheet',
+    loadChildren: 'bottom-sheet/bottom-sheet-demo-module#BottomSheetDemoModule'
+  },
+  {path: 'baseline', loadChildren: 'baseline/baseline-demo-module#BaselineDemoModule'},
+  {path: 'button', loadChildren: 'button/button-demo-module#ButtonDemoModule'},
+  {
+    path: 'button-toggle',
+    loadChildren: 'button-toggle/button-toggle-demo-module#ButtonToggleDemoModule'
+  },
+  {path: 'card', loadChildren: 'card/card-demo-module#CardDemoModule'},
+  {path: 'checkbox', loadChildren: 'checkbox/checkbox-demo-module#CheckboxDemoModule'},
+  {path: 'chips', loadChildren: 'chips/chips-demo-module#ChipsDemoModule'},
+  {path: 'datepicker', loadChildren: 'datepicker/datepicker-demo-module#DatepickerDemoModule'},
+  {path: 'dialog', loadChildren: 'dialog/dialog-demo-module#DialogDemoModule'},
+  {path: 'drawer', loadChildren: 'drawer/drawer-demo-module#DrawerDemoModule'},
+  {path: 'drag-drop', loadChildren: 'drag-drop/drag-drop-demo-module#DragDropDemoModule'},
+  {path: 'expansion', loadChildren: 'expansion/expansion-demo-module#ExpansionDemoModule'},
+  {
+    path: 'focus-origin',
+    loadChildren: 'focus-origin/focus-origin-demo-module#FocusOriginDemoModule'
+  },
+  {path: 'gestures', loadChildren: 'gestures/gestures-demo-module#GesturesDemoModule'},
+  {path: 'grid-list', loadChildren: 'grid-list/grid-list-demo-module#GridListDemoModule'},
+  {path: 'icon', loadChildren: 'icon/icon-demo-module#IconDemoModule'},
+  {path: 'input', loadChildren: 'input/input-demo-module#InputDemoModule'},
+  {path: 'list', loadChildren: 'list/list-demo-module#ListDemoModule'},
+  {
+    path: 'live-announcer',
+    loadChildren: 'live-announcer/live-announcer-demo-module#LiveAnnouncerDemoModule'
+  },
+  {path: 'menu', loadChildren: 'menu/menu-demo-module#MenuDemoModule'},
+  {path: 'paginator', loadChildren: 'paginator/paginator-demo-module#PaginatorDemoModule'},
+  {path: 'platform', loadChildren: 'platform/platform-demo-module#PlatformDemoModule'},
+  {path: 'portal', loadChildren: 'portal/portal-demo-module#PortalDemoModule'},
+  {
+    path: 'progress-bar',
+    loadChildren: 'progress-bar/progress-bar-demo-module#ProgressBarDemoModule'
+  },
+  {
+    path: 'progress-spinner',
+    loadChildren: 'progress-spinner/progress-spinner-demo-module#ProgressSpinnerDemoModule'
+  },
+  {path: 'radio', loadChildren: 'radio/radio-demo-module#RadioDemoModule'},
+  {path: 'ripple', loadChildren: 'ripple/ripple-demo-module#RippleDemoModule'},
+  {path: 'select', loadChildren: 'select/select-demo-module#SelectDemoModule'},
+  {path: 'sidenav', loadChildren: 'sidenav/sidenav-demo-module#SidenavDemoModule'},
+  {
+    path: 'slide-toggle',
+    loadChildren: 'slide-toggle/slide-toggle-demo-module#SlideToggleDemoModule'
+  },
+  {path: 'slider', loadChildren: 'slider/slider-demo-module#SliderDemoModule'},
+  {path: 'snack-bar', loadChildren: 'snack-bar/snack-bar-demo-module#SnackBarDemoModule'},
+  {path: 'stepper', loadChildren: 'stepper/stepper-demo-module#StepperDemoModule'},
+  {path: 'table', loadChildren: 'table/table-demo-module#TableDemoModule'},
+  {path: 'tabs', loadChildren: 'tabs/tabs-demo-module#TabsDemoModule'},
+  {path: 'toolbar', loadChildren: 'toolbar/toolbar-demo-module#ToolbarDemoModule'},
+  {path: 'tooltip', loadChildren: 'tooltip/tooltip-demo-module#TooltipDemoModule'},
+  {path: 'tree', loadChildren: 'tree/tree-demo-module#TreeDemoModule'},
+  {path: 'typography', loadChildren: 'typography/typography-demo-module#TypographyDemoModule'},
+  {path: 'expansion', loadChildren: 'expansion/expansion-demo-module#ExpansionDemoModule'},
+  {path: 'stepper', loadChildren: 'stepper/stepper-demo-module#StepperDemoModule'},
+  {path: 'screen-type', loadChildren: 'screen-type/screen-type-demo-module#ScreenTypeDemoModule'},
+  {
+    path: 'connected-overlay',
+    loadChildren: 'connected-overlay/connected-overlay-demo-module#ConnectedOverlayDemoModule'
+  },
+  {
+    path: 'virtual-scroll',
+    loadChildren: 'virtual-scroll/virtual-scroll-demo-module#VirtualScrollDemoModule'
+  },
+  {path: 'examples', loadChildren: 'examples-page/examples-page-module#ExamplesPageModule'},
+  {path: '**', component: DevApp404},
+];
diff --git a/src/dev-app/dialog/dialog-demo-module.ts b/src/dev-app/dialog/dialog-demo-module.ts
index dfa24dbc3082..4c38b668487a 100644
--- a/src/dev-app/dialog/dialog-demo-module.ts
+++ b/src/dev-app/dialog/dialog-demo-module.ts
@@ -17,6 +17,7 @@ import {
   MatInputModule,
   MatSelectModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from './dialog-demo';
 
 @NgModule({
@@ -29,6 +30,7 @@ import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from './dial
     MatFormFieldModule,
     MatInputModule,
     MatSelectModule,
+    RouterModule.forChild([{path: '', component: DialogDemo}]),
   ],
   declarations: [ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog],
   entryComponents: [ContentElementDialog, IFrameDialog, JazzDialog],
diff --git a/src/dev-app/drag-drop/drag-drop-demo-module.ts b/src/dev-app/drag-drop/drag-drop-demo-module.ts
index 55760d896a41..0e4f1ea9bf17 100644
--- a/src/dev-app/drag-drop/drag-drop-demo-module.ts
+++ b/src/dev-app/drag-drop/drag-drop-demo-module.ts
@@ -11,6 +11,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatFormFieldModule, MatIconModule, MatSelectModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {DragAndDropDemo} from './drag-drop-demo';
 
 @NgModule({
@@ -21,6 +22,7 @@ import {DragAndDropDemo} from './drag-drop-demo';
     MatFormFieldModule,
     MatIconModule,
     MatSelectModule,
+    RouterModule.forChild([{path: '', component: DragAndDropDemo}]),
   ],
   declarations: [DragAndDropDemo],
 })
diff --git a/src/dev-app/drawer/drawer-demo-module.ts b/src/dev-app/drawer/drawer-demo-module.ts
index 74464a655d77..371ed581dc0a 100644
--- a/src/dev-app/drawer/drawer-demo-module.ts
+++ b/src/dev-app/drawer/drawer-demo-module.ts
@@ -8,6 +8,7 @@
 
 import {NgModule} from '@angular/core';
 import {MatButtonModule, MatListModule, MatSidenavModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {DrawerDemo} from './drawer-demo';
 
 @NgModule({
@@ -15,6 +16,7 @@ import {DrawerDemo} from './drawer-demo';
     MatButtonModule,
     MatListModule,
     MatSidenavModule,
+    RouterModule.forChild([{path: '', component: DrawerDemo}]),
   ],
   declarations: [DrawerDemo],
 })
diff --git a/src/dev-app/examples-page/examples-page-module.ts b/src/dev-app/examples-page/examples-page-module.ts
index 5ef913171db6..2064f1f6a8d3 100644
--- a/src/dev-app/examples-page/examples-page-module.ts
+++ b/src/dev-app/examples-page/examples-page-module.ts
@@ -7,12 +7,14 @@
  */
 
 import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
 import {ExampleModule} from '../example/example-module';
 import {ExamplesPage} from './examples-page';
 
 @NgModule({
   imports: [
     ExampleModule,
+    RouterModule.forChild([{path: '', component: ExamplesPage}]),
   ],
   declarations: [ExamplesPage],
 })
diff --git a/src/dev-app/expansion/expansion-demo-module.ts b/src/dev-app/expansion/expansion-demo-module.ts
index 880b00c33408..291887b5ba94 100644
--- a/src/dev-app/expansion/expansion-demo-module.ts
+++ b/src/dev-app/expansion/expansion-demo-module.ts
@@ -19,12 +19,22 @@ import {
   MatRadioModule,
   MatSlideToggleModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ExpansionDemo} from './expansion-demo';
 
 @NgModule({
   imports: [
-    CdkAccordionModule, CommonModule, FormsModule, MatButtonModule, MatCheckboxModule,
-    MatExpansionModule, MatFormFieldModule, MatInputModule, MatRadioModule, MatSlideToggleModule
+    CdkAccordionModule,
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSlideToggleModule,
+    RouterModule.forChild([{path: '', component: ExpansionDemo}]),
   ],
   declarations: [ExpansionDemo],
 })
diff --git a/src/dev-app/focus-origin/focus-origin-demo-module.ts b/src/dev-app/focus-origin/focus-origin-demo-module.ts
index a04613dbf5f8..f444c30dc067 100644
--- a/src/dev-app/focus-origin/focus-origin-demo-module.ts
+++ b/src/dev-app/focus-origin/focus-origin-demo-module.ts
@@ -8,11 +8,13 @@
 
 import {A11yModule} from '@angular/cdk/a11y';
 import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
 import {FocusOriginDemo} from './focus-origin-demo';
 
 @NgModule({
   imports: [
     A11yModule,
+    RouterModule.forChild([{path: '', component: FocusOriginDemo}]),
   ],
   declarations: [FocusOriginDemo],
 })
diff --git a/src/dev-app/gestures/gestures-demo-module.ts b/src/dev-app/gestures/gestures-demo-module.ts
index 1f45776fdc55..44cb999baa16 100644
--- a/src/dev-app/gestures/gestures-demo-module.ts
+++ b/src/dev-app/gestures/gestures-demo-module.ts
@@ -7,9 +7,11 @@
  */
 
 import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
 import {GesturesDemo} from './gestures-demo';
 
 @NgModule({
+  imports: [RouterModule.forChild([{path: '', component: GesturesDemo}])],
   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
index 9edce4584204..89f15d91d3d0 100644
--- a/src/dev-app/grid-list/grid-list-demo-module.ts
+++ b/src/dev-app/grid-list/grid-list-demo-module.ts
@@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule, MatCardModule, MatGridListModule, MatIconModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {GridListDemo} from './grid-list-demo';
 
 @NgModule({
@@ -20,6 +21,7 @@ import {GridListDemo} from './grid-list-demo';
     MatCardModule,
     MatGridListModule,
     MatIconModule,
+    RouterModule.forChild([{path: '', component: GridListDemo}]),
   ],
   declarations: [GridListDemo],
 })
diff --git a/src/dev-app/icon/icon-demo-module.ts b/src/dev-app/icon/icon-demo-module.ts
index 9828111bf37f..a93460b13fc7 100644
--- a/src/dev-app/icon/icon-demo-module.ts
+++ b/src/dev-app/icon/icon-demo-module.ts
@@ -8,11 +8,13 @@
 
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {IconDemo} from './icon-demo';
 
 @NgModule({
   imports: [
     MatIconModule,
+    RouterModule.forChild([{path: '', component: IconDemo}]),
   ],
   declarations: [IconDemo],
 })
diff --git a/src/dev-app/input/input-demo-module.ts b/src/dev-app/input/input-demo-module.ts
index 00d3e8392e60..384552942e17 100644
--- a/src/dev-app/input/input-demo-module.ts
+++ b/src/dev-app/input/input-demo-module.ts
@@ -21,6 +21,7 @@ import {
   MatTabsModule,
   MatToolbarModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {InputDemo} from './input-demo';
 
 @NgModule({
@@ -38,6 +39,7 @@ import {InputDemo} from './input-demo';
     MatTabsModule,
     MatToolbarModule,
     ReactiveFormsModule,
+    RouterModule.forChild([{path: '', component: InputDemo}]),
   ],
   declarations: [InputDemo],
 })
diff --git a/src/dev-app/list/list-demo-module.ts b/src/dev-app/list/list-demo-module.ts
index 02653aa5135d..3046ea2e5c19 100644
--- a/src/dev-app/list/list-demo-module.ts
+++ b/src/dev-app/list/list-demo-module.ts
@@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule, MatCheckboxModule, MatIconModule, MatListModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ListDemo} from './list-demo';
 
 @NgModule({
@@ -20,6 +21,7 @@ import {ListDemo} from './list-demo';
     MatCheckboxModule,
     MatIconModule,
     MatListModule,
+    RouterModule.forChild([{path: '', component: ListDemo}]),
   ],
   declarations: [ListDemo],
 })
diff --git a/src/dev-app/live-announcer/live-announcer-demo-module.ts b/src/dev-app/live-announcer/live-announcer-demo-module.ts
index c3019ede2152..c5800e36d97e 100644
--- a/src/dev-app/live-announcer/live-announcer-demo-module.ts
+++ b/src/dev-app/live-announcer/live-announcer-demo-module.ts
@@ -9,10 +9,15 @@
 import {A11yModule} from '@angular/cdk/a11y';
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {LiveAnnouncerDemo} from './live-announcer-demo';
 
 @NgModule({
-  imports: [A11yModule, MatButtonModule],
+  imports: [
+    A11yModule,
+    MatButtonModule,
+    RouterModule.forChild([{path: '', component: LiveAnnouncerDemo}]),
+  ],
   declarations: [LiveAnnouncerDemo],
 })
 export class LiveAnnouncerDemoModule {
diff --git a/src/dev-app/main-aot.ts b/src/dev-app/main-aot.ts
index a52059026939..da66a2ca0067 100644
--- a/src/dev-app/main-aot.ts
+++ b/src/dev-app/main-aot.ts
@@ -11,6 +11,6 @@
  */
 
 import {platformBrowser} from '@angular/platform-browser';
-import {DevAppModuleNgFactory} from './dev-app-module.ngfactory';
+import {MainModuleNgFactory} from './main-module.ngfactory';
 
-platformBrowser().bootstrapModuleFactory(DevAppModuleNgFactory);
+platformBrowser().bootstrapModuleFactory(MainModuleNgFactory);
diff --git a/src/dev-app/main-module.ts b/src/dev-app/main-module.ts
new file mode 100644
index 000000000000..78c953ca1262
--- /dev/null
+++ b/src/dev-app/main-module.ts
@@ -0,0 +1,42 @@
+/**
+ * @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 {Directionality} from '@angular/cdk/bidi';
+import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
+import {HttpClientModule} from '@angular/common/http';
+import {NgModule} from '@angular/core';
+import {MAT_RIPPLE_GLOBAL_OPTIONS} from '@angular/material';
+import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {RouterModule} from '@angular/router';
+import {DevAppComponent} from './dev-app';
+import {DevAppDirectionality} from './dev-app/dev-app-directionality';
+import {DevAppModule} from './dev-app/dev-app-module';
+import {DEV_APP_ROUTES} from './dev-app/routes';
+import {DevAppRippleOptions} from './ripple/ripple-options';
+
+@NgModule({
+  imports: [
+    BrowserAnimationsModule,
+    BrowserModule,
+    DevAppModule,
+    HttpClientModule,
+    RouterModule.forRoot(DEV_APP_ROUTES),
+  ],
+  declarations: [
+    DevAppComponent,
+  ],
+  providers: [
+    {provide: OverlayContainer, useClass: FullscreenOverlayContainer},
+    {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useExisting: DevAppRippleOptions},
+    {provide: Directionality, useClass: DevAppDirectionality},
+  ],
+  bootstrap: [DevAppComponent],
+})
+export class MainModule {
+}
diff --git a/src/dev-app/main.ts b/src/dev-app/main.ts
index 0c55f42f7301..57be02c00540 100644
--- a/src/dev-app/main.ts
+++ b/src/dev-app/main.ts
@@ -7,6 +7,6 @@
  */
 
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-import {DevAppModule} from './dev-app-module';
+import {MainModule} from './main-module';
 
-platformBrowserDynamic().bootstrapModule(DevAppModule);
+platformBrowserDynamic().bootstrapModule(MainModule);
diff --git a/src/dev-app/menu/menu-demo-module.ts b/src/dev-app/menu/menu-demo-module.ts
index 12bba4426136..1978ba0577dc 100644
--- a/src/dev-app/menu/menu-demo-module.ts
+++ b/src/dev-app/menu/menu-demo-module.ts
@@ -15,6 +15,7 @@ import {
   MatMenuModule,
   MatToolbarModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {MenuDemo} from './menu-demo';
 
 @NgModule({
@@ -25,6 +26,7 @@ import {MenuDemo} from './menu-demo';
     MatIconModule,
     MatMenuModule,
     MatToolbarModule,
+    RouterModule.forChild([{path: '', component: MenuDemo}]),
   ],
   declarations: [MenuDemo],
 })
diff --git a/src/dev-app/paginator/paginator-demo-module.ts b/src/dev-app/paginator/paginator-demo-module.ts
index 72511966f6c6..4c98b92704f2 100644
--- a/src/dev-app/paginator/paginator-demo-module.ts
+++ b/src/dev-app/paginator/paginator-demo-module.ts
@@ -16,6 +16,7 @@ import {
   MatPaginatorModule,
   MatSlideToggleModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {PaginatorDemo} from './paginator-demo';
 
 @NgModule({
@@ -27,6 +28,7 @@ import {PaginatorDemo} from './paginator-demo';
     MatInputModule,
     MatPaginatorModule,
     MatSlideToggleModule,
+    RouterModule.forChild([{path: '', component: PaginatorDemo}]),
   ],
   declarations: [PaginatorDemo],
 })
diff --git a/src/dev-app/platform/platform-demo-module.ts b/src/dev-app/platform/platform-demo-module.ts
index 57034d241fe9..6118ff298fa9 100644
--- a/src/dev-app/platform/platform-demo-module.ts
+++ b/src/dev-app/platform/platform-demo-module.ts
@@ -9,12 +9,14 @@
 import {PlatformModule} from '@angular/cdk/platform';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
 import {PlatformDemo} from './platform-demo';
 
 @NgModule({
   imports: [
     CommonModule,
     PlatformModule,
+    RouterModule.forChild([{path: '', component: PlatformDemo}]),
   ],
   declarations: [PlatformDemo],
 })
diff --git a/src/dev-app/portal/portal-demo-module.ts b/src/dev-app/portal/portal-demo-module.ts
index 8c282cdc2074..f3760da44a24 100644
--- a/src/dev-app/portal/portal-demo-module.ts
+++ b/src/dev-app/portal/portal-demo-module.ts
@@ -8,11 +8,13 @@
 
 import {PortalModule} from '@angular/cdk/portal';
 import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
 import {PortalDemo, ScienceJoke} from './portal-demo';
 
 @NgModule({
   imports: [
     PortalModule,
+    RouterModule.forChild([{path: '', component: PortalDemo}]),
   ],
   declarations: [PortalDemo, ScienceJoke],
   entryComponents: [ScienceJoke],
diff --git a/src/dev-app/progress-bar/progress-bar-demo-module.ts b/src/dev-app/progress-bar/progress-bar-demo-module.ts
index 708b0eafbac9..76b1689c3fd9 100644
--- a/src/dev-app/progress-bar/progress-bar-demo-module.ts
+++ b/src/dev-app/progress-bar/progress-bar-demo-module.ts
@@ -9,6 +9,7 @@
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule, MatButtonToggleModule, MatProgressBarModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ProgressBarDemo} from './progress-bar-demo';
 
 @NgModule({
@@ -17,6 +18,7 @@ import {ProgressBarDemo} from './progress-bar-demo';
     MatButtonModule,
     MatButtonToggleModule,
     MatProgressBarModule,
+    RouterModule.forChild([{path: '', component: ProgressBarDemo}]),
   ],
   declarations: [ProgressBarDemo],
 })
diff --git a/src/dev-app/progress-spinner/progress-spinner-demo-module.ts b/src/dev-app/progress-spinner/progress-spinner-demo-module.ts
index 3685246568bc..147890f22aa6 100644
--- a/src/dev-app/progress-spinner/progress-spinner-demo-module.ts
+++ b/src/dev-app/progress-spinner/progress-spinner-demo-module.ts
@@ -14,6 +14,7 @@ import {
   MatCheckboxModule,
   MatProgressSpinnerModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ProgressSpinnerDemo} from './progress-spinner-demo';
 
 @NgModule({
@@ -23,6 +24,7 @@ import {ProgressSpinnerDemo} from './progress-spinner-demo';
     MatButtonToggleModule,
     MatCheckboxModule,
     MatProgressSpinnerModule,
+    RouterModule.forChild([{path: '', component: ProgressSpinnerDemo}]),
   ],
   declarations: [ProgressSpinnerDemo],
 })
diff --git a/src/dev-app/radio/radio-demo-module.ts b/src/dev-app/radio/radio-demo-module.ts
index 4625167c61bd..1c8d37233f02 100644
--- a/src/dev-app/radio/radio-demo-module.ts
+++ b/src/dev-app/radio/radio-demo-module.ts
@@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule, MatCheckboxModule, MatRadioModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {RadioDemo} from './radio-demo';
 
 @NgModule({
@@ -19,6 +20,7 @@ import {RadioDemo} from './radio-demo';
     MatButtonModule,
     MatCheckboxModule,
     MatRadioModule,
+    RouterModule.forChild([{path: '', component: RadioDemo}]),
   ],
   declarations: [RadioDemo],
 })
diff --git a/src/dev-app/ripple/ripple-demo-module.ts b/src/dev-app/ripple/ripple-demo-module.ts
index 8c72d18d61db..9d6755c83925 100644
--- a/src/dev-app/ripple/ripple-demo-module.ts
+++ b/src/dev-app/ripple/ripple-demo-module.ts
@@ -16,6 +16,7 @@ import {
   MatInputModule,
   MatRippleModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ExampleModule} from '../example/example-module';
 import {RippleDemo} from './ripple-demo';
 
@@ -29,6 +30,7 @@ import {RippleDemo} from './ripple-demo';
     MatIconModule,
     MatInputModule,
     MatRippleModule,
+    RouterModule.forChild([{path: '', component: RippleDemo}]),
   ],
   declarations: [RippleDemo],
 })
diff --git a/src/dev-app/routes.ts b/src/dev-app/routes.ts
deleted file mode 100644
index 204d568fe058..000000000000
--- a/src/dev-app/routes.ts
+++ /dev/null
@@ -1,107 +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 {Routes} from '@angular/router';
-import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
-import {BadgeDemo} from './badge/badge-demo';
-import {BaselineDemo} from './baseline/baseline-demo';
-import {BottomSheetDemo} 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} from './checkbox/checkbox-demo';
-import {ChipsDemo} from './chips/chips-demo';
-import {ConnectedOverlayDemo} from './connected-overlay/connected-overlay-demo';
-import {DatepickerDemo} from './datepicker/datepicker-demo';
-import {DevAppHome, DevApp404} from './dev-app';
-import {DialogDemo} from './dialog/dialog-demo';
-import {DragAndDropDemo} from './drag-drop/drag-drop-demo';
-import {DrawerDemo} from './drawer/drawer-demo';
-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 {MenuDemo} from './menu/menu-demo';
-import {PaginatorDemo} from './paginator/paginator-demo';
-import {PlatformDemo} from './platform/platform-demo';
-import {PortalDemo} 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 {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 {TableDemo} from './table/table-demo';
-import {TabsDemo} from './tabs/tabs-demo';
-import {ToolbarDemo} from './toolbar/toolbar-demo';
-import {TooltipDemo} from './tooltip/tooltip-demo';
-import {TreeDemo} from './tree/tree-demo';
-import {TypographyDemo} from './typography/typography-demo';
-import {VirtualScrollDemo} from './virtual-scroll/virtual-scroll-demo';
-
-export const DEV_APP_ROUTES: Routes = [
-  {path: '', component: DevAppHome},
-  {path: 'autocomplete', component: AutocompleteDemo},
-  {path: 'badge', component: BadgeDemo},
-  {path: 'bottom-sheet', component: BottomSheetDemo},
-  {path: 'baseline', component: BaselineDemo},
-  {path: 'button', component: ButtonDemo},
-  {path: 'button-toggle', component: ButtonToggleDemo},
-  {path: 'card', component: CardDemo},
-  {path: 'checkbox', component: CheckboxDemo},
-  {path: 'chips', component: ChipsDemo},
-  {path: 'datepicker', component: DatepickerDemo},
-  {path: 'dialog', component: DialogDemo},
-  {path: 'drawer', component: DrawerDemo},
-  {path: 'drag-drop', component: DragAndDropDemo},
-  {path: 'expansion', component: ExpansionDemo},
-  {path: 'focus-origin', component: FocusOriginDemo},
-  {path: 'gestures', component: GesturesDemo},
-  {path: 'grid-list', component: GridListDemo},
-  {path: 'icon', component: IconDemo},
-  {path: 'input', component: InputDemo},
-  {path: 'list', component: ListDemo},
-  {path: 'live-announcer', component: LiveAnnouncerDemo},
-  {path: 'menu', component: MenuDemo},
-  {path: 'paginator', component: PaginatorDemo},
-  {path: 'platform', component: PlatformDemo},
-  {path: 'portal', component: PortalDemo},
-  {path: 'progress-bar', component: ProgressBarDemo},
-  {path: 'progress-spinner', component: ProgressSpinnerDemo},
-  {path: 'radio', component: RadioDemo},
-  {path: 'ripple', component: RippleDemo},
-  {path: 'select', component: SelectDemo},
-  {path: 'sidenav', component: SidenavDemo},
-  {path: 'slide-toggle', component: SlideToggleDemo},
-  {path: 'slider', component: SliderDemo},
-  {path: 'snack-bar', component: SnackBarDemo},
-  {path: 'stepper', component: StepperDemo},
-  {path: 'table', component: TableDemo},
-  {path: 'tabs', component: TabsDemo},
-  {path: 'toolbar', component: ToolbarDemo},
-  {path: 'tooltip', component: TooltipDemo},
-  {path: 'tree', component: TreeDemo},
-  {path: 'typography', component: TypographyDemo},
-  {path: 'expansion', component: ExpansionDemo},
-  {path: 'stepper', component: StepperDemo},
-  {path: 'screen-type', component: ScreenTypeDemo},
-  {path: 'connected-overlay', component: ConnectedOverlayDemo},
-  {path: 'virtual-scroll', component: VirtualScrollDemo},
-  {path: 'examples', component: ExamplesPage},
-  {path: '**', component: DevApp404},
-];
diff --git a/src/dev-app/screen-type/screen-type-demo-module.ts b/src/dev-app/screen-type/screen-type-demo-module.ts
index 6382e9abb53d..823d13eb8903 100644
--- a/src/dev-app/screen-type/screen-type-demo-module.ts
+++ b/src/dev-app/screen-type/screen-type-demo-module.ts
@@ -10,6 +10,7 @@ import {LayoutModule} from '@angular/cdk/layout';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatGridListModule, MatIconModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ScreenTypeDemo} from './screen-type-demo';
 
 @NgModule({
@@ -18,6 +19,7 @@ import {ScreenTypeDemo} from './screen-type-demo';
     LayoutModule,
     MatGridListModule,
     MatIconModule,
+    RouterModule.forChild([{path: '', component: ScreenTypeDemo}]),
   ],
   declarations: [ScreenTypeDemo],
 })
diff --git a/src/dev-app/select/select-demo-module.ts b/src/dev-app/select/select-demo-module.ts
index 735653c25e54..cf937c5b1a02 100644
--- a/src/dev-app/select/select-demo-module.ts
+++ b/src/dev-app/select/select-demo-module.ts
@@ -18,6 +18,7 @@ import {
   MatSelectModule,
   MatToolbarModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {SelectDemo} from './select-demo';
 
 @NgModule({
@@ -32,6 +33,7 @@ import {SelectDemo} from './select-demo';
     MatSelectModule,
     MatToolbarModule,
     ReactiveFormsModule,
+    RouterModule.forChild([{path: '', component: SelectDemo}]),
   ],
   declarations: [SelectDemo],
 })
diff --git a/src/dev-app/sidenav/sidenav-demo-module.ts b/src/dev-app/sidenav/sidenav-demo-module.ts
index 01ad05bf89fa..bf1b4ccc5bd5 100644
--- a/src/dev-app/sidenav/sidenav-demo-module.ts
+++ b/src/dev-app/sidenav/sidenav-demo-module.ts
@@ -15,6 +15,7 @@ import {
   MatSidenavModule,
   MatToolbarModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {SidenavDemo} from './sidenav-demo';
 
 @NgModule({
@@ -25,6 +26,7 @@ import {SidenavDemo} from './sidenav-demo';
     MatCheckboxModule,
     MatSidenavModule,
     MatToolbarModule,
+    RouterModule.forChild([{path: '', component: SidenavDemo}]),
   ],
   declarations: [SidenavDemo],
 })
diff --git a/src/dev-app/slide-toggle/slide-toggle-demo-module.ts b/src/dev-app/slide-toggle/slide-toggle-demo-module.ts
index 9c2c5c32d1ec..7f8e87e6085f 100644
--- a/src/dev-app/slide-toggle/slide-toggle-demo-module.ts
+++ b/src/dev-app/slide-toggle/slide-toggle-demo-module.ts
@@ -9,6 +9,7 @@
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule, MatSlideToggleModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {SlideToggleDemo} from './slide-toggle-demo';
 
 @NgModule({
@@ -16,6 +17,7 @@ import {SlideToggleDemo} from './slide-toggle-demo';
     FormsModule,
     MatButtonModule,
     MatSlideToggleModule,
+    RouterModule.forChild([{path: '', component: SlideToggleDemo}]),
   ],
   declarations: [SlideToggleDemo],
 })
diff --git a/src/dev-app/slider/slider-demo-module.ts b/src/dev-app/slider/slider-demo-module.ts
index 16c2e61b254c..37b4d042487e 100644
--- a/src/dev-app/slider/slider-demo-module.ts
+++ b/src/dev-app/slider/slider-demo-module.ts
@@ -9,6 +9,7 @@
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatSliderModule, MatTabsModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {SliderDemo} from './slider-demo';
 
 @NgModule({
@@ -16,6 +17,7 @@ import {SliderDemo} from './slider-demo';
     FormsModule,
     MatSliderModule,
     MatTabsModule,
+    RouterModule.forChild([{path: '', component: SliderDemo}]),
   ],
   declarations: [SliderDemo],
 })
diff --git a/src/dev-app/snack-bar/snack-bar-demo-module.ts b/src/dev-app/snack-bar/snack-bar-demo-module.ts
index c252be41f0a3..1bd24a3203fc 100644
--- a/src/dev-app/snack-bar/snack-bar-demo-module.ts
+++ b/src/dev-app/snack-bar/snack-bar-demo-module.ts
@@ -17,6 +17,7 @@ import {
   MatSelectModule,
   MatSnackBarModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {SnackBarDemo} from './snack-bar-demo';
 
 @NgModule({
@@ -29,6 +30,7 @@ import {SnackBarDemo} from './snack-bar-demo';
     MatInputModule,
     MatSelectModule,
     MatSnackBarModule,
+    RouterModule.forChild([{path: '', component: SnackBarDemo}]),
   ],
   declarations: [SnackBarDemo],
 })
diff --git a/src/dev-app/snack-bar/snack-bar-demo.ts b/src/dev-app/snack-bar/snack-bar-demo.ts
index 8b33a81d34ae..a77f751bf2ef 100644
--- a/src/dev-app/snack-bar/snack-bar-demo.ts
+++ b/src/dev-app/snack-bar/snack-bar-demo.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Dir} from '@angular/cdk/bidi';
+import {Directionality} from '@angular/cdk/bidi';
 import {Component, TemplateRef, ViewChild} from '@angular/core';
 import {
   MatSnackBar,
@@ -33,8 +33,7 @@ export class SnackBarDemo {
   horizontalPosition: MatSnackBarHorizontalPosition = 'center';
   verticalPosition: MatSnackBarVerticalPosition = 'bottom';
 
-  constructor(public snackBar: MatSnackBar, private dir: Dir) {
-  }
+  constructor(public snackBar: MatSnackBar, private dir: Directionality) {}
 
   open() {
     const config = this._createConfig();
diff --git a/src/dev-app/stepper/stepper-demo-module.ts b/src/dev-app/stepper/stepper-demo-module.ts
index 437ccddd30d9..a1f4c305aa1b 100644
--- a/src/dev-app/stepper/stepper-demo-module.ts
+++ b/src/dev-app/stepper/stepper-demo-module.ts
@@ -16,6 +16,7 @@ import {
   MatInputModule,
   MatStepperModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {StepperDemo} from './stepper-demo';
 
 @NgModule({
@@ -28,6 +29,7 @@ import {StepperDemo} from './stepper-demo';
     MatInputModule,
     MatStepperModule,
     ReactiveFormsModule,
+    RouterModule.forChild([{path: '', component: StepperDemo}]),
   ],
   declarations: [StepperDemo],
 })
diff --git a/src/dev-app/table/table-demo-module.ts b/src/dev-app/table/table-demo-module.ts
index 4153791c3bd5..b69fb45a76b3 100644
--- a/src/dev-app/table/table-demo-module.ts
+++ b/src/dev-app/table/table-demo-module.ts
@@ -7,11 +7,15 @@
  */
 
 import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
 import {ExampleModule} from '../example/example-module';
 import {TableDemo} from './table-demo';
 
 @NgModule({
-  imports: [ExampleModule],
+  imports: [
+    ExampleModule,
+    RouterModule.forChild([{path: '', component: TableDemo}]),
+  ],
   declarations: [TableDemo],
 })
 export class TableDemoModule {
diff --git a/src/dev-app/tabs/tabs-demo-module.ts b/src/dev-app/tabs/tabs-demo-module.ts
index 44ed755cba38..3da51b05df04 100644
--- a/src/dev-app/tabs/tabs-demo-module.ts
+++ b/src/dev-app/tabs/tabs-demo-module.ts
@@ -8,6 +8,7 @@
 
 import {NgModule} from '@angular/core';
 import {MatTabsModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ExampleModule} from '../example/example-module';
 import {TabsDemo} from './tabs-demo';
 
@@ -15,6 +16,7 @@ import {TabsDemo} from './tabs-demo';
   imports: [
     ExampleModule,
     MatTabsModule,
+    RouterModule.forChild([{path: '', component: TabsDemo}]),
   ],
   declarations: [TabsDemo],
 })
diff --git a/src/dev-app/toolbar/toolbar-demo-module.ts b/src/dev-app/toolbar/toolbar-demo-module.ts
index 24ba95a34f05..ba6038679d95 100644
--- a/src/dev-app/toolbar/toolbar-demo-module.ts
+++ b/src/dev-app/toolbar/toolbar-demo-module.ts
@@ -15,6 +15,7 @@ import {
   MatSelectModule,
   MatToolbarModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ToolbarDemo} from './toolbar-demo';
 
 @NgModule({
@@ -25,6 +26,7 @@ import {ToolbarDemo} from './toolbar-demo';
     MatInputModule,
     MatSelectModule,
     MatToolbarModule,
+    RouterModule.forChild([{path: '', component: ToolbarDemo}]),
   ],
   declarations: [ToolbarDemo],
 })
diff --git a/src/dev-app/tooltip/tooltip-demo-module.ts b/src/dev-app/tooltip/tooltip-demo-module.ts
index fd8a8b252ace..3ce5e057790f 100644
--- a/src/dev-app/tooltip/tooltip-demo-module.ts
+++ b/src/dev-app/tooltip/tooltip-demo-module.ts
@@ -8,6 +8,7 @@
 
 import {NgModule} from '@angular/core';
 import {MatTooltipModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ExampleModule} from '../example/example-module';
 import {TooltipDemo} from './tooltip-demo';
 
@@ -15,6 +16,7 @@ import {TooltipDemo} from './tooltip-demo';
   imports: [
     ExampleModule,
     MatTooltipModule,
+    RouterModule.forChild([{path: '', component: TooltipDemo}]),
   ],
   declarations: [TooltipDemo],
 })
diff --git a/src/dev-app/tree/tree-demo-module.ts b/src/dev-app/tree/tree-demo-module.ts
index 3cb9d4509c16..fb9d35145758 100644
--- a/src/dev-app/tree/tree-demo-module.ts
+++ b/src/dev-app/tree/tree-demo-module.ts
@@ -19,6 +19,7 @@ import {
   MatProgressBarModule,
   MatTreeModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 
 import {ExampleModule} from '../example/example-module';
 
@@ -42,6 +43,7 @@ import {TreeDemo} from './tree-demo';
     MatTreeModule,
     MatProgressBarModule,
     ExampleModule,
+    RouterModule.forChild([{path: '', component: TreeDemo}]),
   ],
   declarations:
       [ChecklistNestedTreeDemo, ChecklistTreeDemo, TreeDemo, DynamicTreeDemo, LoadmoreTreeDemo],
diff --git a/src/dev-app/tsconfig-aot.json b/src/dev-app/tsconfig-aot.json
index e991ddf71dcc..a7c7fc3451e2 100644
--- a/src/dev-app/tsconfig-aot.json
+++ b/src/dev-app/tsconfig-aot.json
@@ -32,10 +32,10 @@
       "@angular/material-examples": ["../../dist/releases/material-examples"]
     }
   },
-  "files": [
+  "include": [
     "./typings.d.ts",
-    "./dev-app-module.ts",
-    "./main-aot.ts"
+    "./main-aot.ts",
+    "**/*-module.ts"
   ],
   "angularCompilerOptions": {
     "skipTemplateCodegen": false,
diff --git a/src/dev-app/tsconfig-build.json b/src/dev-app/tsconfig-build.json
index bbd2fb21604a..8965db786ec9 100644
--- a/src/dev-app/tsconfig-build.json
+++ b/src/dev-app/tsconfig-build.json
@@ -39,11 +39,11 @@
       "@angular/material-examples": ["../../dist/packages/material-examples"]
     }
   },
-  "files": [
+  "include": [
     "./typings.d.ts",
-    "./dev-app-module.ts",
     "./system-rxjs-operators.ts",
     "./system-config.ts",
-    "./main.ts"
+    "./main.ts",
+    "**/*-module.ts"
   ]
 }
diff --git a/src/dev-app/typography/typography-demo-module.ts b/src/dev-app/typography/typography-demo-module.ts
index b50f236725d5..346f730846c1 100644
--- a/src/dev-app/typography/typography-demo-module.ts
+++ b/src/dev-app/typography/typography-demo-module.ts
@@ -7,9 +7,13 @@
  */
 
 import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
 import {TypographyDemo} from './typography-demo';
 
 @NgModule({
+  imports: [
+    RouterModule.forChild([{path: '', component: TypographyDemo}]),
+  ],
   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
index 45ce13bd21e0..4269f643a093 100644
--- a/src/dev-app/virtual-scroll/virtual-scroll-demo-module.ts
+++ b/src/dev-app/virtual-scroll/virtual-scroll-demo-module.ts
@@ -17,6 +17,7 @@ import {
   MatInputModule,
   MatSelectModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {VirtualScrollDemo} from './virtual-scroll-demo';
 
 @NgModule({
@@ -29,6 +30,7 @@ import {VirtualScrollDemo} from './virtual-scroll-demo';
     MatInputModule,
     MatSelectModule,
     ScrollingModule,
+    RouterModule.forChild([{path: '', component: VirtualScrollDemo}]),
   ],
   declarations: [VirtualScrollDemo],
 })