From f169152638fb2ee898bc4f2e3ff3d5141982f721 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@gmail.com>
Date: Wed, 31 May 2017 16:17:50 -0700
Subject: [PATCH] build: add missing bits for material-examples package (#4887)

Adds:
* Missing `flatModuleId` from the ngc options
* Makes templateUrl and styleUrls for example components match material
components.
---
 .../autocomplete-overview/autocomplete-overview-example.ts  | 2 +-
 .../button-overview/button-overview-example.ts              | 2 +-
 .../button-toggle-exclusive-example.ts                      | 4 ++--
 .../button-toggle-overview-example.ts                       | 2 +-
 src/material-examples/button-types/button-types-example.ts  | 4 ++--
 src/material-examples/card-fancy/card-fancy-example.ts      | 4 ++--
 .../card-overview/card-overview-example.ts                  | 2 +-
 .../checkbox-configurable/checkbox-configurable-example.ts  | 4 ++--
 .../checkbox-overview/checkbox-overview-example.ts          | 2 +-
 .../chips-overview/chips-overview-example.ts                | 2 +-
 .../chips-stacked/chips-stacked-example.ts                  | 4 ++--
 .../datepicker-overview/datepicker-overview-example.ts      | 4 ++--
 .../dialog-elements/dialog-elements-example.ts              | 4 ++--
 .../dialog-overview/dialog-overview-example.ts              | 4 ++--
 .../dialog-result/dialog-result-example.ts                  | 4 ++--
 src/material-examples/example-module.ts                     | 4 ++--
 .../grid-list-dynamic/grid-list-dynamic-example.ts          | 2 +-
 .../grid-list-overview/grid-list-overview-example.ts        | 4 ++--
 .../icon-overview/icon-overview-example.ts                  | 2 +-
 src/material-examples/icon-svg-example/icon-svg-example.ts  | 2 +-
 src/material-examples/input-form/input-form-example.ts      | 4 ++--
 .../input-overview/input-overview-example.ts                | 2 +-
 .../list-overview/list-overview-example.ts                  | 2 +-
 .../list-sections/list-sections-example.ts                  | 4 ++--
 src/material-examples/menu-icons/menu-icons-example.ts      | 2 +-
 .../menu-overview/menu-overview-example.ts                  | 2 +-
 .../progress-bar-configurable-example.ts                    | 4 ++--
 .../progress-bar-overview/progress-bar-overview-example.ts  | 2 +-
 .../progress-spinner-configurable-example.ts                | 4 ++--
 .../progress-spinner-overview-example.ts                    | 2 +-
 .../radio-ng-model/radio-ng-model-example.ts                | 4 ++--
 .../radio-overview/radio-overview-example.ts                | 2 +-
 src/material-examples/select-form/select-form-example.ts    | 2 +-
 .../select-overview/select-overview-example.ts              | 2 +-
 src/material-examples/sidenav-fab/sidenav-fab-example.ts    | 4 ++--
 .../sidenav-overview/sidenav-overview-example.ts            | 4 ++--
 .../slide-toggle-configurable-example.ts                    | 4 ++--
 .../slide-toggle-overview/slide-toggle-overview-example.ts  | 2 +-
 .../slider-configurable/slider-configurable-example.ts      | 4 ++--
 .../slider-overview/slider-overview-example.ts              | 4 ++--
 .../snack-bar-component/snack-bar-component-example.ts      | 6 +++---
 .../snack-bar-overview/snack-bar-overview-example.ts        | 2 +-
 .../tabs-overview/tabs-overview-example.ts                  | 2 +-
 .../tabs-template-label/tabs-template-label-example.ts      | 2 +-
 .../toolbar-multirow/toolbar-multirow-example.ts            | 4 ++--
 .../toolbar-overview/toolbar-overview-example.ts            | 2 +-
 .../tooltip-overview/tooltip-overview-example.ts            | 2 +-
 .../tooltip-position/tooltip-position-example.ts            | 4 ++--
 src/material-examples/tsconfig-build.json                   | 1 +
 49 files changed, 74 insertions(+), 73 deletions(-)

diff --git a/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts b/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts
index fc2ca560b46..637ea3541e4 100644
--- a/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts
+++ b/src/material-examples/autocomplete-overview/autocomplete-overview-example.ts
@@ -6,7 +6,7 @@ import 'rxjs/add/operator/map';
 
 @Component({
   selector: 'autocomplete-overview-example',
-  templateUrl: './autocomplete-overview-example.html',
+  templateUrl: 'autocomplete-overview-example.html',
 })
 export class AutocompleteOverviewExample {
   stateCtrl: FormControl;
diff --git a/src/material-examples/button-overview/button-overview-example.ts b/src/material-examples/button-overview/button-overview-example.ts
index 41a52022f26..d7839b7a705 100644
--- a/src/material-examples/button-overview/button-overview-example.ts
+++ b/src/material-examples/button-overview/button-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'button-overview-example',
-  templateUrl: './button-overview-example.html',
+  templateUrl: 'button-overview-example.html',
 })
 export class ButtonOverviewExample {}
diff --git a/src/material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts b/src/material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts
index d014b8a2846..9a505de5c3c 100644
--- a/src/material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts
+++ b/src/material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts
@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'button-toggle-exclusive-example',
-  templateUrl: './button-toggle-exclusive-example.html',
-  styleUrls: ['./button-toggle-exclusive-example.css'],
+  templateUrl: 'button-toggle-exclusive-example.html',
+  styleUrls: ['button-toggle-exclusive-example.css'],
 })
 export class ButtonToggleExclusiveExample {}
diff --git a/src/material-examples/button-toggle-overview/button-toggle-overview-example.ts b/src/material-examples/button-toggle-overview/button-toggle-overview-example.ts
index 38a4afd0561..55fc4716856 100644
--- a/src/material-examples/button-toggle-overview/button-toggle-overview-example.ts
+++ b/src/material-examples/button-toggle-overview/button-toggle-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'button-toggle-overview-example',
-  templateUrl: './button-toggle-overview-example.html',
+  templateUrl: 'button-toggle-overview-example.html',
 })
 export class ButtonToggleOverviewExample {}
diff --git a/src/material-examples/button-types/button-types-example.ts b/src/material-examples/button-types/button-types-example.ts
index 9dbb329f1e0..e0becac38f6 100644
--- a/src/material-examples/button-types/button-types-example.ts
+++ b/src/material-examples/button-types/button-types-example.ts
@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'button-types-example',
-  templateUrl: './button-types-example.html',
-  styleUrls: ['./button-types-example.css'],
+  templateUrl: 'button-types-example.html',
+  styleUrls: ['button-types-example.css'],
 })
 export class ButtonTypesExample {}
diff --git a/src/material-examples/card-fancy/card-fancy-example.ts b/src/material-examples/card-fancy/card-fancy-example.ts
index 8e19840d7cd..0b0458c089c 100644
--- a/src/material-examples/card-fancy/card-fancy-example.ts
+++ b/src/material-examples/card-fancy/card-fancy-example.ts
@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'card-fancy-example',
-  templateUrl: './card-fancy-example.html',
-  styleUrls: ['./card-fancy-example.css'],
+  templateUrl: 'card-fancy-example.html',
+  styleUrls: ['card-fancy-example.css'],
 })
 export class CardFancyExample {}
diff --git a/src/material-examples/card-overview/card-overview-example.ts b/src/material-examples/card-overview/card-overview-example.ts
index 55fc9a690d5..09ea32a3a50 100644
--- a/src/material-examples/card-overview/card-overview-example.ts
+++ b/src/material-examples/card-overview/card-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'card-overview-example',
-  templateUrl: './card-overview-example.html',
+  templateUrl: 'card-overview-example.html',
 })
 export class CardOverviewExample {}
diff --git a/src/material-examples/checkbox-configurable/checkbox-configurable-example.ts b/src/material-examples/checkbox-configurable/checkbox-configurable-example.ts
index 2c0149199cc..eefb5db799e 100644
--- a/src/material-examples/checkbox-configurable/checkbox-configurable-example.ts
+++ b/src/material-examples/checkbox-configurable/checkbox-configurable-example.ts
@@ -3,8 +3,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'checkbox-configurable-example',
-  templateUrl: './checkbox-configurable-example.html',
-  styleUrls: ['./checkbox-configurable-example.css'],
+  templateUrl: 'checkbox-configurable-example.html',
+  styleUrls: ['checkbox-configurable-example.css'],
 })
 export class CheckboxConfigurableExample {
   checked = false;
diff --git a/src/material-examples/checkbox-overview/checkbox-overview-example.ts b/src/material-examples/checkbox-overview/checkbox-overview-example.ts
index be9aefc592f..6df17b220d4 100644
--- a/src/material-examples/checkbox-overview/checkbox-overview-example.ts
+++ b/src/material-examples/checkbox-overview/checkbox-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'checkbox-overview-example',
-  templateUrl: './checkbox-overview-example.html',
+  templateUrl: 'checkbox-overview-example.html',
 })
 export class CheckboxOverviewExample {}
diff --git a/src/material-examples/chips-overview/chips-overview-example.ts b/src/material-examples/chips-overview/chips-overview-example.ts
index fa1bbf7c12c..83e0fd4da4c 100644
--- a/src/material-examples/chips-overview/chips-overview-example.ts
+++ b/src/material-examples/chips-overview/chips-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'chips-overview-example',
-  templateUrl: './chips-overview-example.html',
+  templateUrl: 'chips-overview-example.html',
 })
 export class ChipsOverviewExample {}
diff --git a/src/material-examples/chips-stacked/chips-stacked-example.ts b/src/material-examples/chips-stacked/chips-stacked-example.ts
index 8c48ccc929e..27833290159 100644
--- a/src/material-examples/chips-stacked/chips-stacked-example.ts
+++ b/src/material-examples/chips-stacked/chips-stacked-example.ts
@@ -3,8 +3,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'chips-stacked-example',
-  templateUrl: './chips-stacked-example.html',
-  styleUrls: ['./chips-stacked-example.css'],
+  templateUrl: 'chips-stacked-example.html',
+  styleUrls: ['chips-stacked-example.css'],
 })
 export class ChipsStackedExample {
   color: string;
diff --git a/src/material-examples/datepicker-overview/datepicker-overview-example.ts b/src/material-examples/datepicker-overview/datepicker-overview-example.ts
index 51fce60b56e..ffc7464af1d 100644
--- a/src/material-examples/datepicker-overview/datepicker-overview-example.ts
+++ b/src/material-examples/datepicker-overview/datepicker-overview-example.ts
@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'datepicker-overview-example',
-  templateUrl: './datepicker-overview-example.html',
-  styleUrls: ['./datepicker-overview-example.css'],
+  templateUrl: 'datepicker-overview-example.html',
+  styleUrls: ['datepicker-overview-example.css'],
 })
 export class DatepickerOverviewExample {}
diff --git a/src/material-examples/dialog-elements/dialog-elements-example.ts b/src/material-examples/dialog-elements/dialog-elements-example.ts
index aba941a571b..733a56f0719 100644
--- a/src/material-examples/dialog-elements/dialog-elements-example.ts
+++ b/src/material-examples/dialog-elements/dialog-elements-example.ts
@@ -4,7 +4,7 @@ import {MdDialog} from '@angular/material';
 
 @Component({
   selector: 'dialog-elements-example',
-  templateUrl: './dialog-elements-example.html',
+  templateUrl: 'dialog-elements-example.html',
 })
 export class DialogElementsExample {
   constructor(public dialog: MdDialog) { }
@@ -17,6 +17,6 @@ export class DialogElementsExample {
 
 @Component({
   selector: 'dialog-elements-example-dialog',
-  templateUrl: './dialog-elements-example-dialog.html',
+  templateUrl: 'dialog-elements-example-dialog.html',
 })
 export class DialogElementsExampleDialog { }
diff --git a/src/material-examples/dialog-overview/dialog-overview-example.ts b/src/material-examples/dialog-overview/dialog-overview-example.ts
index 9bc9882ac03..0613b400e7c 100644
--- a/src/material-examples/dialog-overview/dialog-overview-example.ts
+++ b/src/material-examples/dialog-overview/dialog-overview-example.ts
@@ -4,7 +4,7 @@ import {MdDialog} from '@angular/material';
 
 @Component({
   selector: 'dialog-overview-example',
-  templateUrl: './dialog-overview-example.html',
+  templateUrl: 'dialog-overview-example.html',
 })
 export class DialogOverviewExample {
   constructor(public dialog: MdDialog) {}
@@ -17,6 +17,6 @@ export class DialogOverviewExample {
 
 @Component({
   selector: 'dialog-overview-example-dialog',
-  templateUrl: './dialog-overview-example-dialog.html',
+  templateUrl: 'dialog-overview-example-dialog.html',
 })
 export class DialogOverviewExampleDialog {}
diff --git a/src/material-examples/dialog-result/dialog-result-example.ts b/src/material-examples/dialog-result/dialog-result-example.ts
index ec25f92f134..19ac7222024 100644
--- a/src/material-examples/dialog-result/dialog-result-example.ts
+++ b/src/material-examples/dialog-result/dialog-result-example.ts
@@ -4,7 +4,7 @@ import {MdDialog, MdDialogRef} from '@angular/material';
 
 @Component({
   selector: 'dialog-result-example',
-  templateUrl: './dialog-result-example.html',
+  templateUrl: 'dialog-result-example.html',
 })
 export class DialogResultExample {
   selectedOption: string;
@@ -22,7 +22,7 @@ export class DialogResultExample {
 
 @Component({
   selector: 'dialog-result-example-dialog',
-  templateUrl: './dialog-result-example-dialog.html',
+  templateUrl: 'dialog-result-example-dialog.html',
 })
 export class DialogResultExampleDialog {
   constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts
index 62dd46fd106..4af008e2733 100644
--- a/src/material-examples/example-module.ts
+++ b/src/material-examples/example-module.ts
@@ -82,8 +82,8 @@ import {
 export interface LiveExample {
   title: string;
   component: any;
-  additionalFiles: string[];
-  selectorName: string;
+  additionalFiles?: string[];
+  selectorName?: string;
 }
 
 /**
diff --git a/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts b/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts
index 8f0834fa0ae..d8fee340152 100644
--- a/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts
+++ b/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.ts
@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'grid-list-dynamic-example',
-  templateUrl: './grid-list-dynamic-example.html',
+  templateUrl: 'grid-list-dynamic-example.html',
 })
 export class GridListDynamicExample {
   tiles = [
diff --git a/src/material-examples/grid-list-overview/grid-list-overview-example.ts b/src/material-examples/grid-list-overview/grid-list-overview-example.ts
index ba23f5740b9..29b60b3cc58 100644
--- a/src/material-examples/grid-list-overview/grid-list-overview-example.ts
+++ b/src/material-examples/grid-list-overview/grid-list-overview-example.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'grid-list-overview-example',
-  styleUrls: ['./grid-list-overview-example.css'],
-  templateUrl: './grid-list-overview-example.html',
+  styleUrls: ['grid-list-overview-example.css'],
+  templateUrl: 'grid-list-overview-example.html',
 })
 export class GridListOverviewExample {}
diff --git a/src/material-examples/icon-overview/icon-overview-example.ts b/src/material-examples/icon-overview/icon-overview-example.ts
index 90ed28a6126..52ed35de322 100644
--- a/src/material-examples/icon-overview/icon-overview-example.ts
+++ b/src/material-examples/icon-overview/icon-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'icon-overview-example',
-  templateUrl: './icon-overview-example.html',
+  templateUrl: 'icon-overview-example.html',
 })
 export class IconOverviewExample {}
diff --git a/src/material-examples/icon-svg-example/icon-svg-example.ts b/src/material-examples/icon-svg-example/icon-svg-example.ts
index b9689b4208a..228edea1db0 100644
--- a/src/material-examples/icon-svg-example/icon-svg-example.ts
+++ b/src/material-examples/icon-svg-example/icon-svg-example.ts
@@ -5,7 +5,7 @@ import {MdIconRegistry} from '@angular/material';
 
 @Component({
   selector: 'icon-svg-example',
-  templateUrl: './icon-svg-example.html',
+  templateUrl: 'icon-svg-example.html',
 })
 export class IconSvgExample {
   constructor(iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
diff --git a/src/material-examples/input-form/input-form-example.ts b/src/material-examples/input-form/input-form-example.ts
index 2e209d9f50a..760ed857125 100644
--- a/src/material-examples/input-form/input-form-example.ts
+++ b/src/material-examples/input-form/input-form-example.ts
@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'input-form-example',
-  templateUrl: './input-form-example.html',
-  styleUrls: ['./input-form-example.css'],
+  templateUrl: 'input-form-example.html',
+  styleUrls: ['input-form-example.css'],
 })
 export class InputFormExample {}
diff --git a/src/material-examples/input-overview/input-overview-example.ts b/src/material-examples/input-overview/input-overview-example.ts
index 2bdc3fd6b20..4af520da8b6 100644
--- a/src/material-examples/input-overview/input-overview-example.ts
+++ b/src/material-examples/input-overview/input-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'input-overview-example',
-  templateUrl: './input-overview-example.html',
+  templateUrl: 'input-overview-example.html',
 })
 export class InputOverviewExample {}
diff --git a/src/material-examples/list-overview/list-overview-example.ts b/src/material-examples/list-overview/list-overview-example.ts
index f38e186020d..f999bbdebfb 100644
--- a/src/material-examples/list-overview/list-overview-example.ts
+++ b/src/material-examples/list-overview/list-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'list-overview-example',
-  templateUrl: './list-overview-example.html',
+  templateUrl: 'list-overview-example.html',
 })
 export class ListOverviewExample {}
diff --git a/src/material-examples/list-sections/list-sections-example.ts b/src/material-examples/list-sections/list-sections-example.ts
index d5a20e8f484..16f1ff7f07d 100644
--- a/src/material-examples/list-sections/list-sections-example.ts
+++ b/src/material-examples/list-sections/list-sections-example.ts
@@ -3,8 +3,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'list-sections-example',
-  styleUrls: ['./list-sections-example.css'],
-  templateUrl: './list-sections-example.html',
+  styleUrls: ['list-sections-example.css'],
+  templateUrl: 'list-sections-example.html',
 })
 export class ListSectionsExample {
   folders = [
diff --git a/src/material-examples/menu-icons/menu-icons-example.ts b/src/material-examples/menu-icons/menu-icons-example.ts
index 070bc434bdb..f09a07e7d15 100644
--- a/src/material-examples/menu-icons/menu-icons-example.ts
+++ b/src/material-examples/menu-icons/menu-icons-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'menu-icons-example',
-  templateUrl: './menu-icons-example.html',
+  templateUrl: 'menu-icons-example.html',
 })
 export class MenuIconsExample {}
diff --git a/src/material-examples/menu-overview/menu-overview-example.ts b/src/material-examples/menu-overview/menu-overview-example.ts
index b5b8c8a8df4..8c25e07b69c 100644
--- a/src/material-examples/menu-overview/menu-overview-example.ts
+++ b/src/material-examples/menu-overview/menu-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'menu-overview-example',
-  templateUrl: './menu-overview-example.html',
+  templateUrl: 'menu-overview-example.html',
 })
 export class MenuOverviewExample {}
diff --git a/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.ts b/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.ts
index f3fa937826b..6363a491301 100644
--- a/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.ts
+++ b/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.ts
@@ -3,8 +3,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'progress-bar-configurable-example',
-  templateUrl: './progress-bar-configurable-example.html',
-  styleUrls: ['./progress-bar-configurable-example.css'],
+  templateUrl: 'progress-bar-configurable-example.html',
+  styleUrls: ['progress-bar-configurable-example.css'],
 })
 export class ProgressBarConfigurableExample {
   color = 'primary';
diff --git a/src/material-examples/progress-bar-overview/progress-bar-overview-example.ts b/src/material-examples/progress-bar-overview/progress-bar-overview-example.ts
index cf11f1cf257..bf455f94842 100644
--- a/src/material-examples/progress-bar-overview/progress-bar-overview-example.ts
+++ b/src/material-examples/progress-bar-overview/progress-bar-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'progress-bar-overview-example',
-  templateUrl: './progress-bar-overview-example.html',
+  templateUrl: 'progress-bar-overview-example.html',
 })
 export class ProgressBarOverviewExample {}
diff --git a/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts b/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts
index b621aaa51e6..705fda16d61 100644
--- a/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts
+++ b/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts
@@ -3,8 +3,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'progress-spinner-configurable-example',
-  templateUrl: './progress-spinner-configurable-example.html',
-  styleUrls: ['./progress-spinner-configurable-example.css'],
+  templateUrl: 'progress-spinner-configurable-example.html',
+  styleUrls: ['progress-spinner-configurable-example.css'],
 })
 export class ProgressSpinnerConfigurableExample {
   color = 'primary';
diff --git a/src/material-examples/progress-spinner-overview/progress-spinner-overview-example.ts b/src/material-examples/progress-spinner-overview/progress-spinner-overview-example.ts
index 89cce852a1f..55b9f833a8b 100644
--- a/src/material-examples/progress-spinner-overview/progress-spinner-overview-example.ts
+++ b/src/material-examples/progress-spinner-overview/progress-spinner-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'progress-spinner-overview-example',
-  templateUrl: './progress-spinner-overview-example.html',
+  templateUrl: 'progress-spinner-overview-example.html',
 })
 export class ProgressSpinnerOverviewExample {}
diff --git a/src/material-examples/radio-ng-model/radio-ng-model-example.ts b/src/material-examples/radio-ng-model/radio-ng-model-example.ts
index 42e93bc5d1b..1ce419b65cd 100644
--- a/src/material-examples/radio-ng-model/radio-ng-model-example.ts
+++ b/src/material-examples/radio-ng-model/radio-ng-model-example.ts
@@ -3,8 +3,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'radio-ng-model-example',
-  templateUrl: './radio-ng-model-example.html',
-  styleUrls: ['./radio-ng-model-example.css'],
+  templateUrl: 'radio-ng-model-example.html',
+  styleUrls: ['radio-ng-model-example.css'],
 })
 export class RadioNgModelExample {
   favoriteSeason: string;
diff --git a/src/material-examples/radio-overview/radio-overview-example.ts b/src/material-examples/radio-overview/radio-overview-example.ts
index a845835e41f..e3753efc7b1 100644
--- a/src/material-examples/radio-overview/radio-overview-example.ts
+++ b/src/material-examples/radio-overview/radio-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'radio-overview-example',
-  templateUrl: './radio-overview-example.html',
+  templateUrl: 'radio-overview-example.html',
 })
 export class RadioOverviewExample {}
diff --git a/src/material-examples/select-form/select-form-example.ts b/src/material-examples/select-form/select-form-example.ts
index 684bf016e5a..ab0bc62cba5 100644
--- a/src/material-examples/select-form/select-form-example.ts
+++ b/src/material-examples/select-form/select-form-example.ts
@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'select-form-example',
-  templateUrl: './select-form-example.html',
+  templateUrl: 'select-form-example.html',
 })
 export class SelectFormExample {
   selectedValue: string;
diff --git a/src/material-examples/select-overview/select-overview-example.ts b/src/material-examples/select-overview/select-overview-example.ts
index 8162dc7f616..e5e6cf4e668 100644
--- a/src/material-examples/select-overview/select-overview-example.ts
+++ b/src/material-examples/select-overview/select-overview-example.ts
@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'select-overview-example',
-  templateUrl: './select-overview-example.html',
+  templateUrl: 'select-overview-example.html',
 })
 export class SelectOverviewExample {
   foods = [
diff --git a/src/material-examples/sidenav-fab/sidenav-fab-example.ts b/src/material-examples/sidenav-fab/sidenav-fab-example.ts
index a86050b2957..9270a564514 100644
--- a/src/material-examples/sidenav-fab/sidenav-fab-example.ts
+++ b/src/material-examples/sidenav-fab/sidenav-fab-example.ts
@@ -3,8 +3,8 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'sidenav-fab-example',
-  templateUrl: './sidenav-fab-example.html',
-  styleUrls: ['./sidenav-fab-example.css'],
+  templateUrl: 'sidenav-fab-example.html',
+  styleUrls: ['sidenav-fab-example.css'],
   encapsulation: ViewEncapsulation.None,
 })
 export class SidenavFabExample {}
diff --git a/src/material-examples/sidenav-overview/sidenav-overview-example.ts b/src/material-examples/sidenav-overview/sidenav-overview-example.ts
index 533802a9099..a71f112660b 100644
--- a/src/material-examples/sidenav-overview/sidenav-overview-example.ts
+++ b/src/material-examples/sidenav-overview/sidenav-overview-example.ts
@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'sidenav-overview-example',
-  templateUrl: './sidenav-overview-example.html',
-  styleUrls: ['./sidenav-overview-example.css'],
+  templateUrl: 'sidenav-overview-example.html',
+  styleUrls: ['sidenav-overview-example.css'],
 })
 export class SidenavOverviewExample {}
diff --git a/src/material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts b/src/material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts
index cfa28ceddd4..dd21d0e5ab3 100644
--- a/src/material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts
+++ b/src/material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts
@@ -3,8 +3,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'slide-toggle-configurable-example',
-  templateUrl: './slide-toggle-configurable-example.html',
-  styleUrls: ['./slide-toggle-configurable-example.css'],
+  templateUrl: 'slide-toggle-configurable-example.html',
+  styleUrls: ['slide-toggle-configurable-example.css'],
 })
 export class SlideToggleConfigurableExample {
   color = 'accent';
diff --git a/src/material-examples/slide-toggle-overview/slide-toggle-overview-example.ts b/src/material-examples/slide-toggle-overview/slide-toggle-overview-example.ts
index 0f35c9d5e9b..9bfb08616de 100644
--- a/src/material-examples/slide-toggle-overview/slide-toggle-overview-example.ts
+++ b/src/material-examples/slide-toggle-overview/slide-toggle-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'slide-toggle-overview-example',
-  templateUrl: './slide-toggle-overview-example.html',
+  templateUrl: 'slide-toggle-overview-example.html',
 })
 export class SlideToggleOverviewExample {}
diff --git a/src/material-examples/slider-configurable/slider-configurable-example.ts b/src/material-examples/slider-configurable/slider-configurable-example.ts
index 933a9dee731..5b6813e6ad6 100644
--- a/src/material-examples/slider-configurable/slider-configurable-example.ts
+++ b/src/material-examples/slider-configurable/slider-configurable-example.ts
@@ -3,8 +3,8 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'slider-configurable-example',
-  templateUrl: './slider-configurable-example.html',
-  styleUrls: ['./slider-configurable-example.css'],
+  templateUrl: 'slider-configurable-example.html',
+  styleUrls: ['slider-configurable-example.css'],
   encapsulation: ViewEncapsulation.None,
 })
 export class SliderConfigurableExample {
diff --git a/src/material-examples/slider-overview/slider-overview-example.ts b/src/material-examples/slider-overview/slider-overview-example.ts
index 1f020fd662f..8dfaa812bb2 100644
--- a/src/material-examples/slider-overview/slider-overview-example.ts
+++ b/src/material-examples/slider-overview/slider-overview-example.ts
@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'slider-overview-example',
-  templateUrl: './slider-overview-example.html',
-  styleUrls: ['./slider-overview-example.css'],
+  templateUrl: 'slider-overview-example.html',
+  styleUrls: ['slider-overview-example.css'],
 })
 export class SliderOverviewExample {}
diff --git a/src/material-examples/snack-bar-component/snack-bar-component-example.ts b/src/material-examples/snack-bar-component/snack-bar-component-example.ts
index 03ef19e8a70..d1e2d197f2c 100644
--- a/src/material-examples/snack-bar-component/snack-bar-component-example.ts
+++ b/src/material-examples/snack-bar-component/snack-bar-component-example.ts
@@ -4,7 +4,7 @@ import {MdSnackBar} from '@angular/material';
 
 @Component({
   selector: 'snack-bar-component-example',
-  templateUrl: './snack-bar-component-example.html',
+  templateUrl: 'snack-bar-component-example.html',
 })
 export class SnackBarComponentExample {
   constructor(public snackBar: MdSnackBar) {}
@@ -19,7 +19,7 @@ export class SnackBarComponentExample {
 
 @Component({
   selector: 'snack-bar-component-example-snack',
-  templateUrl: './snack-bar-component-example-snack.html',
-  styleUrls: ['./snack-bar-component-example-snack.css'],
+  templateUrl: 'snack-bar-component-example-snack.html',
+  styleUrls: ['snack-bar-component-example-snack.css'],
 })
 export class PizzaPartyComponent {}
diff --git a/src/material-examples/snack-bar-overview/snack-bar-overview-example.ts b/src/material-examples/snack-bar-overview/snack-bar-overview-example.ts
index 312de83ea67..c4d5ecb0aea 100644
--- a/src/material-examples/snack-bar-overview/snack-bar-overview-example.ts
+++ b/src/material-examples/snack-bar-overview/snack-bar-overview-example.ts
@@ -4,7 +4,7 @@ import {MdSnackBar} from '@angular/material';
 
 @Component({
   selector: 'snack-bar-overview-example',
-  templateUrl: './snack-bar-overview-example.html',
+  templateUrl: 'snack-bar-overview-example.html',
 })
 export class SnackBarOverviewExample {
   constructor(public snackBar: MdSnackBar) {}
diff --git a/src/material-examples/tabs-overview/tabs-overview-example.ts b/src/material-examples/tabs-overview/tabs-overview-example.ts
index 4f222c11262..77ee5cb5192 100644
--- a/src/material-examples/tabs-overview/tabs-overview-example.ts
+++ b/src/material-examples/tabs-overview/tabs-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'tabs-overview-example',
-  templateUrl: './tabs-overview-example.html',
+  templateUrl: 'tabs-overview-example.html',
 })
 export class TabsOverviewExample {}
diff --git a/src/material-examples/tabs-template-label/tabs-template-label-example.ts b/src/material-examples/tabs-template-label/tabs-template-label-example.ts
index 7015b1f7418..3b9f436e4b9 100644
--- a/src/material-examples/tabs-template-label/tabs-template-label-example.ts
+++ b/src/material-examples/tabs-template-label/tabs-template-label-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'tabs-template-label-example',
-  templateUrl: './tabs-template-label-example.html',
+  templateUrl: 'tabs-template-label-example.html',
 })
 export class TabsTemplateLabelExample {}
diff --git a/src/material-examples/toolbar-multirow/toolbar-multirow-example.ts b/src/material-examples/toolbar-multirow/toolbar-multirow-example.ts
index 132b98174f6..558bf8cebda 100644
--- a/src/material-examples/toolbar-multirow/toolbar-multirow-example.ts
+++ b/src/material-examples/toolbar-multirow/toolbar-multirow-example.ts
@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'toolbar-multirow-example',
-  templateUrl: './toolbar-multirow-example.html',
-  styleUrls: ['./toolbar-multirow-example.css'],
+  templateUrl: 'toolbar-multirow-example.html',
+  styleUrls: ['toolbar-multirow-example.css'],
 })
 export class ToolbarMultirowExample {}
diff --git a/src/material-examples/toolbar-overview/toolbar-overview-example.ts b/src/material-examples/toolbar-overview/toolbar-overview-example.ts
index 6919aca4f3f..515d63252a2 100644
--- a/src/material-examples/toolbar-overview/toolbar-overview-example.ts
+++ b/src/material-examples/toolbar-overview/toolbar-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'toolbar-overview-example',
-  templateUrl: './toolbar-overview-example.html',
+  templateUrl: 'toolbar-overview-example.html',
 })
 export class ToolbarOverviewExample {}
diff --git a/src/material-examples/tooltip-overview/tooltip-overview-example.ts b/src/material-examples/tooltip-overview/tooltip-overview-example.ts
index cf9eefc9455..97b72348178 100644
--- a/src/material-examples/tooltip-overview/tooltip-overview-example.ts
+++ b/src/material-examples/tooltip-overview/tooltip-overview-example.ts
@@ -3,6 +3,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'tooltip-overview-example',
-  templateUrl: './tooltip-overview-example.html',
+  templateUrl: 'tooltip-overview-example.html',
 })
 export class TooltipOverviewExample {}
diff --git a/src/material-examples/tooltip-position/tooltip-position-example.ts b/src/material-examples/tooltip-position/tooltip-position-example.ts
index 0b580c722bf..d505c8aee51 100644
--- a/src/material-examples/tooltip-position/tooltip-position-example.ts
+++ b/src/material-examples/tooltip-position/tooltip-position-example.ts
@@ -3,8 +3,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'tooltip-position-example',
-  templateUrl: './tooltip-position-example.html',
-  styleUrls: ['./tooltip-position-example.css'],
+  templateUrl: 'tooltip-position-example.html',
+  styleUrls: ['tooltip-position-example.css'],
 })
 export class TooltipPositionExample {
   position = 'before';
diff --git a/src/material-examples/tsconfig-build.json b/src/material-examples/tsconfig-build.json
index 275f76fe1c5..d330422d8a3 100644
--- a/src/material-examples/tsconfig-build.json
+++ b/src/material-examples/tsconfig-build.json
@@ -28,6 +28,7 @@
     "annotateForClosureCompiler": true,
     "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
+    "flatModuleId": "@angular/material-examples",
     "skipTemplateCodegen": true
   }
 }