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.

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;

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 {}

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 {}

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 {}

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 {}

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 {}

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 {}

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;

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 {}

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 {}

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;

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 {}

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 { }

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 {}

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>) {}

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;
 }
 
 /**

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 = [

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 {}

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 {}

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) {

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 {}

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 {}

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 {}

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 = [

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 {}

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 {}

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';

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 {}

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';

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 {}

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;

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 {}

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;

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 = [

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 {}

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 {}

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';

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 {}

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 {

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 {}

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 {}

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) {}

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 {}

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 {}

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 {}

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 {}

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 {}

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';

src/material-examples/tsconfig-build.json

@@ -28,6 +28,7 @@
     "annotateForClosureCompiler": true,
     "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
+    "flatModuleId": "@angular/material-examples",
     "skipTemplateCodegen": true
   }
 }