build: separate demo-app in its own directory. (#451)

* build: separate demo-app in its own directory.

* chore: replace gulp-inline-resources with a script

This also improves upon the relative path problem. All template paths
now should be relative. Also, we can now include double-quotes in
CSS/HTML.

.gitignore

@@ -25,6 +25,7 @@
 /.idea
 
 # misc
+.DS_Store
 /.sass-cache
 /connect.lock
 /coverage/*

angular-cli-build.js

@@ -5,7 +5,6 @@ const path = require('path');
 // Import the require hook. Enables us to require TS files natively.
 require('ts-node/register');
 
-
 const Angular2App = require('angular-cli/lib/broccoli/angular2-app');
 const Funnel = require('broccoli-funnel');
 const MergeTree = require('broccoli-merge-trees');
@@ -13,8 +12,49 @@ const autoPrefixerTree = require('broccoli-autoprefixer');
 
 
 module.exports = function(defaults) {
-  var angularAppTree = new Angular2App(defaults, {
-    sourceDir: 'src/',
+  // The Angular Application tree.
+  const appTree = _buildAppTree(defaults);
+
+  // The CSS tree that is auto prefixed with browser support.
+  const cssAutoprefixed = autoPrefixerTree(new Funnel(appTree, {
+    include: [ '**/*.css' ]
+  }));
+
+  return new MergeTree([appTree, cssAutoprefixed], { overwrite: true });
+};
+
+
+/**
+ * Build the Broccoli Tree containing all the files used as the input to the Angular2App.
+ */
+function _buildDemoAppInputTree() {
+  return new MergeTree([
+    new Funnel('typings', {
+      destDir: 'typings'
+    }),
+    new Funnel('src', {
+      include: ['components/**/*', 'core/**/*'],
+      destDir: 'src/demo-app'
+    }),
+    new Funnel('src/demo-app', {
+      destDir: 'src/demo-app'
+    })
+  ]);
+}
+
+/**
+ * Build the Broccoli Tree that contains the Angular2 App. This picks between E2E, Example or Demo
+ * app.
+ * @param defaults The default objects from AngularCLI (deprecated).
+ * @returns {Angular2App}
+ */
+function _buildAppTree(defaults) {
+  let inputNode = _buildDemoAppInputTree();
+
+  return new Angular2App(defaults, inputNode, {
+    sourceDir: 'src/demo-app',
+    tsCompiler: {
+    },
     sassCompiler: {
       includePaths: [
         'src/core/style'
@@ -27,17 +67,7 @@ module.exports = function(defaults) {
       'es6-shim/es6-shim.js',
       'reflect-metadata/*.js',
       'rxjs/**/*.js',
-      '@angular/**/*.js',
+      '@angular/**/*.js'
     ]
   });
-
-  const cssAutoprefixed = autoPrefixerTree(new Funnel(angularAppTree, {
-    include: [ '**/*.css' ]
-  }));
-
-  return new MergeTree([
-    new Funnel('src', { include: ['**/*.scss']}),
-    angularAppTree,
-    cssAutoprefixed,
-  ], { overwrite: true });
-};
+}

config/environment.dev.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: false
+};

config/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

gulpfile.js

@@ -1,19 +0,0 @@
-var gulp = require('gulp');
-var inlineNg2Template = require('gulp-inline-ng2-template');
-
-
-/**
- * DO NOT ADD EXTRA TASKS HERE.
- *
- * gulp is only used temporarily in order to perform HTML and CSS in-lining for publishing.
- * Eventually the CLI should support this.
- *
- * See https://github.com/angular/angular-cli/issues/296
- *
- */
-
-gulp.task('inline-resources', function(){
-  gulp.src('./dist/components/**/*.js')
-      .pipe(inlineNg2Template({base: './dist', target: 'es5'}))
-      .pipe(gulp.dest('./dist/components'));
-});

package.json

@@ -16,7 +16,7 @@
     "typings": "typings install --ambient",
     "postinstall": "npm run typings",
     "e2e": "protractor test/protractor.conf.js",
-    "inline-resources": "gulp inline-resources",
+    "inline-resources": "node ./scripts/release/inline-resources.js ./dist/components",
     "deploy": "firebase deploy"
   },
   "version": "2.0.0-alpha.4",
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "add-stream": "^1.0.0",
-    "angular-cli": "0.0.37",
+    "angular-cli": "^1.0.0-beta.4",
     "broccoli-autoprefixer": "^4.1.0",
     "broccoli-funnel": "^1.0.1",
     "broccoli-merge-trees": "^1.1.1",
@@ -51,8 +51,6 @@
     "firebase-tools": "^2.2.1",
     "fs-extra": "^0.26.5",
     "glob": "^6.0.4",
-    "gulp": "^3.9.1",
-    "gulp-inline-ng2-template": "^1.1.2",
     "jasmine-core": "^2.4.1",
     "js-yaml": "^3.5.2",
     "karma": "^0.13.15",
@@ -68,7 +66,7 @@
     "symlink-or-copy": "^1.0.1",
     "ts-node": "^0.5.5",
     "tslint": "^3.5.0",
-    "typescript": "^1.8.0",
+    "typescript": "^1.9.0-dev",
     "typings": "^0.8.1",
     "which": "^1.2.4"
   }

scripts/release/inline-resources.js

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+
+/**
+ * Simple Promiseify function that takes a Node API and return a version that supports promises.
+ * We use promises instead of synchronized functions to make the process less I/O bound and
+ * faster. It also simplify the code.
+ */
+function promiseify(fn) {
+  return function() {
+    const args = [].slice.call(arguments, 0);
+    return new Promise((resolve, reject) => {
+      fn.apply(this, args.concat([function (err, value) {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(value);
+        }
+      }]));
+    });
+  };
+}
+
+const readFile = promiseify(fs.readFile);
+const writeFile = promiseify(fs.writeFile);
+
+
+/**
+ * For every argument, inline the templates and styles under it and write the new file.
+ */
+for (let arg of process.argv.slice(2)) {
+  if (arg.indexOf('*') < 0) {
+    // Argument is a directory target, add glob patterns to include every files.
+    arg = path.join(arg, '**', '*');
+  }
+
+  const files = glob.sync(arg, {})
+    .filter(name => /\.js$/.test(name));  // Matches only JavaScript files.
+
+  // Generate all files content with inlined templates.
+  files.forEach(filePath => {
+    readFile(filePath, 'utf-8')
+      .then(content => inlineTemplate(filePath, content))
+      .then(content => inlineStyle(filePath, content))
+      .then(content => writeFile(filePath, content))
+      .catch(err => {
+        console.error('An error occured: ', err);
+      });
+  });
+}
+
+
+/**
+ * Inline the templates for a source file. Simply search for instances of `templateUrl: ...` and
+ * replace with `template: ...` (with the content of the file included).
+ * @param filePath {string} The path of the source file.
+ * @param content {string} The source file's content.
+ * @return {string} The content with all templates inlined.
+ */
+function inlineTemplate(filePath, content) {
+  return content.replace(/templateUrl:\s*'([^']+\.html)'/g, function(m, templateUrl) {
+    const templateFile = path.join(path.dirname(filePath), templateUrl);
+    const templateContent = fs.readFileSync(templateFile, 'utf-8');
+    const shortenedTemplate = templateContent
+      .replace(/([\n\r]\s*)+/gm, ' ')
+      .replace(/"/g, '\\"');
+    return `template: "${shortenedTemplate}"`;
+  });
+}
+
+
+/**
+ * Inline the styles for a source file. Simply search for instances of `styleUrls: [...]` and
+ * replace with `styles: [...]` (with the content of the file included).
+ * @param filePath {string} The path of the source file.
+ * @param content {string} The source file's content.
+ * @return {string} The content with all styles inlined.
+ */
+function inlineStyle(filePath, content) {
+  return content.replace(/styleUrls:\s*(\[[\s\S]*?\])/gm, function(m, styleUrls) {
+    const urls = eval(styleUrls);
+    return 'styles: ['
+      + urls.map(styleUrl => {
+          const styleFile = path.join(path.dirname(filePath), styleUrl);
+          const styleContent = fs.readFileSync(styleFile, 'utf-8');
+          const shortenedStyle = styleContent
+            .replace(/([\n\r]\s*)+/gm, ' ')
+            .replace(/"/g, '\\"');
+          return `"${shortenedStyle}"`;
+        })
+        .join(',\n')
+      + ']';
+  });
+}

src/components/button/button.ts

@@ -14,6 +14,7 @@ import {
 
 
 @Component({
+  moduleId: module.id,
   selector: 'button[md-button], button[md-raised-button], button[md-icon-button], ' +
             'button[md-fab], button[md-mini-fab]',
   inputs: ['color'],
@@ -23,8 +24,8 @@ import {
     '(focus)': 'setKeyboardFocus()',
     '(blur)': 'removeKeyboardFocus()',
   },
-  templateUrl: './components/button/button.html',
-  styleUrls: ['./components/button/button.css'],
+  templateUrl: 'button.html',
+  styleUrls: ['button.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -81,6 +82,7 @@ export class MdButton {
 }
 
 @Component({
+  moduleId: module.id,
   selector: 'a[md-button], a[md-raised-button], a[md-icon-button], a[md-fab], a[md-mini-fab]',
   inputs: ['color'],
   host: {
@@ -90,8 +92,8 @@ export class MdButton {
     '(blur)': 'removeKeyboardFocus()',
     '(click)': 'haltDisabledEvents($event)',
   },
-  templateUrl: './components/button/button.html',
-  styleUrls: ['./components/button/button.css'],
+  templateUrl: 'button.html',
+  styleUrls: ['button.css'],
   encapsulation: ViewEncapsulation.None
 })
 export class MdAnchor extends MdButton {

src/components/card/card.ts

@@ -21,9 +21,10 @@ it also provides a number of preset styles for common card sections, including:
 */
 
 @Component({
+  moduleId: module.id,
   selector: 'md-card',
-  templateUrl: './components/card/card.html',
-  styleUrls: ['./components/card/card.css'],
+  templateUrl: 'card.html',
+  styleUrls: ['card.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -45,8 +46,9 @@ TODO(kara): update link to demo site when it exists
 */
 
 @Component({
+  moduleId: module.id,
   selector: 'md-card-header',
-  templateUrl: './components/card/card-header.html',
+  templateUrl: 'card-header.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -64,8 +66,9 @@ TODO(kara): update link to demo site when it exists
 */
 
 @Component({
+  moduleId: module.id,
   selector: 'md-card-title-group',
-  templateUrl: './components/card/card-title-group.html',
+  templateUrl: 'card-title-group.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/components/checkbox/checkbox.spec.ts

@@ -4,7 +4,7 @@ import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdCheckbox} from './checkbox';
-import {PromiseCompleter} from '../../core/async/promise-completer';
+import {PromiseCompleter} from '@angular2-material/core/async/promise-completer';
 
 // TODO: Implement E2E tests for spacebar/click behavior for checking/unchecking
 

src/components/checkbox/checkbox.ts

@@ -53,9 +53,10 @@ enum TransitionCheckState {
  * See: https://www.google.com/design/spec/components/selection-controls.html
  */
 @Component({
+  moduleId: module.id,
   selector: 'md-checkbox',
-  templateUrl: './components/checkbox/checkbox.html',
-  styleUrls: ['./components/checkbox/checkbox.css'],
+  templateUrl: 'checkbox.html',
+  styleUrls: ['checkbox.css'],
   host: {
     '[class.md-checkbox-indeterminate]': 'indeterminate',
     '[class.md-checkbox-checked]': 'checked',

src/components/grid-list/grid-list-errors.ts

@@ -1,4 +1,4 @@
-import {MdError} from '../../core/errors/error';
+import {MdError} from '@angular2-material/core/errors/error';
 
 /**
  * Exception thrown when cols property is missing from grid-list

src/components/grid-list/grid-list.ts

@@ -18,7 +18,7 @@ import {
     FixedTileStyler
 } from './tile-styler';
 import {MdGridListColsError} from './grid-list-errors';
-import {Dir} from '../../core/rtl/dir';
+import {Dir} from '@angular2-material/core/rtl/dir';
 
 // TODO(kara): Conditional (responsive) column count / row size.
 // TODO(kara): Re-layout on window resize / media change (debounced).
@@ -27,10 +27,10 @@ import {Dir} from '../../core/rtl/dir';
 const MD_FIT_MODE = 'fit';
 
 @Component({
+  moduleId: module.id,
   selector: 'md-grid-list',
-  host: { 'role': 'list' },
-  templateUrl: './components/grid-list/grid-list.html',
-  styleUrls: ['./components/grid-list/grid-list.css'],
+  templateUrl: 'grid-list.html',
+  styleUrls: ['grid-list.css'],
   encapsulation: ViewEncapsulation.None,
 })
 export class MdGridList implements OnInit, AfterContentChecked {

src/components/grid-list/grid-tile.ts

@@ -9,10 +9,11 @@ import {
 import {coerceToNumber} from './grid-list';
 
 @Component({
+  moduleId: module.id,
   selector: 'md-grid-tile',
   host: { 'role': 'listitem' },
-  templateUrl: './components/grid-list/grid-tile.html',
-  styleUrls: ['./components/grid-list/grid-list.css'],
+  templateUrl: 'grid-tile.html',
+  styleUrls: ['grid-list.css'],
   encapsulation: ViewEncapsulation.None,
 })
 export class MdGridTile {

src/components/grid-list/tile-styler.ts

@@ -1,7 +1,7 @@
 import {MdGridTile} from './grid-tile';
 import {TileCoordinator} from './tile-coordinator';
 import {MdGridListBadRatioError} from './grid-list-errors';
-import {Dir} from '../../core/rtl/dir';
+import {Dir} from '@angular2-material/core/rtl/dir';
 
 /* Sets the style properties for an individual tile, given the position calculated by the
 * Tile Coordinator. */

src/components/icon/icon-registry.ts

@@ -1,5 +1,6 @@
 import {Injectable} from '@angular/core';
 import {Http} from '@angular/http';
+import {MdError} from '@angular2-material/core/errors/error';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/observable/forkJoin';
 import 'rxjs/add/observable/of';
@@ -9,7 +10,6 @@ import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/share';
 import 'rxjs/add/operator/finally';
 import 'rxjs/add/operator/catch';
-import {MdError} from '../../core/errors/error';
 
 
 /** Exception thrown when attempting to load an icon with a name that cannot be found. */

src/components/icon/icon.ts

@@ -10,8 +10,8 @@ import {
     ViewEncapsulation,
     AfterViewChecked
 } from '@angular/core';
+import {MdError} from '@angular2-material/core/errors/error';
 import {MdIconRegistry} from './icon-registry';
-import {MdError} from '../../core/errors/error';
 export {MdIconRegistry} from './icon-registry';
 
 
@@ -56,9 +56,10 @@ export class MdIconInvalidNameError extends MdError {
  *     <md-icon fontSet="fa" fontIcon="alarm"></md-icon>
  */
 @Component({
+  moduleId: module.id,
   template: '<ng-content></ng-content>',
   selector: 'md-icon',
-  styleUrls: ['./components/icon/icon.css'],
+  styleUrls: ['icon.css'],
   host: {
     'role': 'img',
   },

src/components/input/input.ts

@@ -20,8 +20,8 @@ import {
   NG_VALUE_ACCESSOR,
   ControlValueAccessor
 } from '@angular/common';
-import {BooleanFieldValue} from '../../core/annotations/field-value';
-import {MdError} from '../../core/errors/error';
+import {BooleanFieldValue} from '@angular2-material/core/annotations/field-value';
+import {MdError} from '@angular2-material/core/errors/error';
 import {Observable} from 'rxjs/Observable';
 
 
@@ -92,9 +92,10 @@ export class MdHint {
  * improve on its behaviour, along with styling it according to the Material Design.
  */
 @Component({
+  moduleId: module.id,
   selector: 'md-input',
-  templateUrl: 'components/input/input.html',
-  styleUrls: ['components/input/input.css'],
+  templateUrl: 'input.html',
+  styleUrls: ['input.css'],
   providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
   host: {'(click)' : 'focus()'}
 })

src/components/list/list.ts

@@ -13,10 +13,11 @@ import {
 
 
 @Component({
+  moduleId: module.id,
   selector: 'md-list, md-nav-list',
   host: {'role': 'list'},
   template: '<ng-content></ng-content>',
-  styleUrls: ['./components/list/list.css'],
+  styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None
 })
 export class MdList {}
@@ -30,9 +31,10 @@ export class MdLine {}
 export class MdListAvatar {}
 
 @Component({
+  moduleId: module.id,
   selector: 'md-list-item, a[md-list-item]',
   host: {'role': 'listitem'},
-  templateUrl: './components/list/list-item.html',
+  templateUrl: 'list-item.html',
   encapsulation: ViewEncapsulation.None
 })
 export class MdListItem implements AfterContentInit {

src/components/progress-bar/progress-bar.ts

@@ -14,14 +14,15 @@ import {
  * <md-progress-bar> component.
  */
 @Component({
+  moduleId: module.id,
   selector: 'md-progress-bar',
   host: {
     'role': 'progressbar',
     'aria-valuemin': '0',
     'aria-valuemax': '100',
   },
-  templateUrl: './components/progress-bar/progress-bar.html',
-  styleUrls: ['./components/progress-bar/progress-bar.css'],
+  templateUrl: 'progress-bar.html',
+  styleUrls: ['progress-bar.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdProgressBar {

src/components/progress-circle/progress-circle.ts

@@ -30,14 +30,15 @@ type EasingFn = (currentTime: number, startValue: number,
  * <md-progress-circle> component.
  */
 @Component({
+  moduleId: module.id,
   selector: 'md-progress-circle',
   host: {
     'role': 'progressbar',
     'aria-valuemin': '0',
     'aria-valuemax': '100',
   },
-  templateUrl: './components/progress-circle/progress-circle.html',
-  styleUrls: ['./components/progress-circle/progress-circle.css'],
+  templateUrl: 'progress-circle.html',
+  styleUrls: ['progress-circle.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdProgressCircle {
@@ -188,12 +189,13 @@ export class MdProgressCircle {
  * indeterminate <md-progress-circle> instance.
  */
 @Component({
+  moduleId: module.id,
   selector: 'md-spinner',
   host: {
     'role': 'progressbar',
   },
-  templateUrl: './components/progress-circle/progress-circle.html',
-  styleUrls: ['./components/progress-circle/progress-circle.css'],
+  templateUrl: 'progress-circle.html',
+  styleUrls: ['progress-circle.css'],
 })
 export class MdSpinner extends MdProgressCircle {
   constructor(changeDetectorRef: ChangeDetectorRef) {

src/components/radio/radio.ts

@@ -239,9 +239,10 @@ export class MdRadioGroup implements AfterContentInit, ControlValueAccessor {
 
 
 @Component({
+  moduleId: module.id,
   selector: 'md-radio-button',
-  templateUrl: './components/radio/radio.html',
-  styleUrls: ['./components/radio/radio.css'],
+  templateUrl: 'radio.html',
+  styleUrls: ['radio.css'],
   encapsulation: ViewEncapsulation.None,
   host: {
     '(click)': 'onClick($event)'

src/components/sidenav/sidenav.ts

@@ -14,10 +14,10 @@ import {
     EventEmitter,
     Renderer
 } from '@angular/core';
-import {Dir} from '../../core/rtl/dir';
-import {PromiseCompleter} from '../../core/async/promise-completer';
-import {MdError} from '../../core/errors/error';
-import { BooleanFieldValue } from '../../core/annotations/field-value';
+import {Dir} from '@angular2-material/core/rtl/dir';
+import {PromiseCompleter} from '@angular2-material/core/async/promise-completer';
+import {MdError} from '@angular2-material/core/errors/error';
+import { BooleanFieldValue } from '@angular2-material/core/annotations/field-value';
 
 
 /** Exception thrown when two MdSidenav are matching the same side. */
@@ -36,6 +36,7 @@ export class MdDuplicatedSidenavError extends MdError {
  * Please refer to README.md for examples on how to use it.
  */
 @Component({
+  moduleId: module.id,
   selector: 'md-sidenav',
   template: '<ng-content></ng-content>',
   host: {
@@ -231,15 +232,16 @@ export class MdSidenav {
  * and coordinate the backdrop and content styling.
  */
 @Component({
+  moduleId: module.id,
   selector: 'md-sidenav-layout',
   // Do not use ChangeDetectionStrategy.OnPush. It does not work for this component because
   // technically it is a sibling of MdSidenav (on the content tree) and isn't updated when MdSidenav
   // changes its state.
   directives: [MdSidenav],
-  templateUrl: './components/sidenav/sidenav.html',
+  templateUrl: 'sidenav.html',
   styleUrls: [
-    './components/sidenav/sidenav.css',
-    './components/sidenav/sidenav-transitions.css',
+    'sidenav.css',
+    'sidenav-transitions.css',
   ],
 })
 export class MdSidenavLayout implements AfterContentInit {

src/components/slide-toggle/slide-toggle.scss

@@ -1,9 +1,9 @@
-@import "../../core/style/variables";
-@import "../../core/style/mixins";
-@import "../../core/style/elevation";
+@import "variables";
+@import "mixins";
+@import "elevation";
 
 //TODO(): remove the default theme.
-@import "../../core/style/default-theme";
+@import "default-theme";
 
 $md-slide-toggle-width: 36px !default;
 $md-slide-toggle-height: 24px !default;

src/components/slide-toggle/slide-toggle.ts

@@ -12,7 +12,7 @@ import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR
 } from '@angular/common';
-import { BooleanFieldValue } from '../../core/annotations/field-value';
+import { BooleanFieldValue } from '@angular2-material/core/annotations/field-value';
 import { Observable } from 'rxjs/Observable';
 
 export const MD_SLIDE_TOGGLE_VALUE_ACCESSOR: any = {
@@ -25,14 +25,15 @@ export const MD_SLIDE_TOGGLE_VALUE_ACCESSOR: any = {
 let nextId = 0;
 
 @Component({
+  moduleId: module.id,
   selector: 'md-slide-toggle',
   host: {
     '[class.md-checked]': 'checked',
     '[class.md-disabled]': 'disabled',
     '(click)': 'onTouched()'
   },
-  templateUrl: './components/slide-toggle/slide-toggle.html',
-  styleUrls: ['./components/slide-toggle/slide-toggle.css'],
+  templateUrl: 'slide-toggle.html',
+  styleUrls: ['slide-toggle.css'],
   providers: [MD_SLIDE_TOGGLE_VALUE_ACCESSOR],
   changeDetection: ChangeDetectionStrategy.OnPush
 })

src/components/tab-group/tab-content.ts

@@ -1,5 +1,5 @@
 import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
-import {TemplatePortalDirective} from '../../core/portal/portal-directives';
+import {TemplatePortalDirective} from '@angular2-material/core/portal/portal-directives';
 
 /** Used to flag tab contents for use with the portal directive */
 @Directive({

src/components/tab-group/tab-group.ts

@@ -1,7 +1,7 @@
 import {Component, Input, ViewChildren, NgZone} from '@angular/core';
 import {QueryList} from '@angular/core';
 import {ContentChildren} from '@angular/core';
-import {PortalHostDirective} from '../../core/portal/portal-directives';
+import {PortalHostDirective} from '@angular2-material/core/portal/portal-directives';
 import {MdTabLabel} from './tab-label';
 import {MdTabContent} from './tab-content';
 import {MdTabLabelWrapper} from './tab-label-wrapper';
@@ -16,9 +16,10 @@ let nextId = 0;
  * See: https://www.google.com/design/spec/components/tabs.html
  */
 @Component({
+  moduleId: module.id,
   selector: 'md-tab-group',
-  templateUrl: './components/tab-group/tab-group.html',
-  styleUrls: ['./components/tab-group/tab-group.css'],
+  templateUrl: 'tab-group.html',
+  styleUrls: ['tab-group.css'],
   directives: [PortalHostDirective, MdTabLabelWrapper, MdInkBar],
 })
 export class MdTabGroup {

src/components/tab-group/tab-label.ts

@@ -1,5 +1,5 @@
 import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
-import {TemplatePortalDirective} from '../../core/portal/portal-directives';
+import {TemplatePortalDirective} from '@angular2-material/core/portal/portal-directives';
 
 /** Used to flag tab labels for use with the portal directive */
 @Directive({

src/components/toolbar/toolbar.ts

@@ -7,9 +7,10 @@ import {Renderer} from '@angular/core';
 import {ElementRef} from '@angular/core';
 
 @Component({
+  moduleId: module.id,
   selector: 'md-toolbar',
-  templateUrl: './components/toolbar/toolbar.html',
-  styleUrls: ['./components/toolbar/toolbar.css'],
+  templateUrl: 'toolbar.html',
+  styleUrls: ['toolbar.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdToolbar {

src/core/annotations/field-value.ts

@@ -18,9 +18,9 @@ function booleanFieldValueFactory() {
     target[localKey] = defaultValue;
 
     Object.defineProperty(target, key, {
-      get() { return this[localKey]; },
+      get() { return (<any>this)[localKey]; },
       set(value: boolean) {
-        this[localKey] = value != null && `${value}` !== 'false';
+        (<any>this)[localKey] = value != null && `${value}` !== 'false';
       }
     });
   };

src/core/overlay/position/connected-position-strategy.ts

@@ -1,7 +1,7 @@
 import {PositionStrategy} from './position-strategy';
 import {ElementRef} from '@angular/core';
+import {applyCssTransform} from '@angular2-material/core/style/apply-transform';
 import {ViewportRuler} from './viewport-ruler';
-import {applyCssTransform} from '../../style/apply-transform';
 
 
 

src/core/overlay/position/global-position-strategy.ts

@@ -1,5 +1,5 @@
+import {applyCssTransform} from '@angular2-material/core/style/apply-transform';
 import {PositionStrategy} from './position-strategy';
-import {applyCssTransform} from '../../style/apply-transform';
 
 
 /**

src/demo-app/button/button-demo.ts

@@ -1,12 +1,13 @@
 import {Component} from '@angular/core';
-import {MdButton, MdAnchor} from '../../components/button/button';
-import {MdIcon} from '../../components/icon/icon';
+import {MdButton, MdAnchor} from '@angular2-material/button/button';
+import {MdIcon} from '@angular2-material/icon/icon';
 
 @Component({
-    selector: 'button-demo',
-    templateUrl: 'demo-app/button/button-demo.html',
-    styleUrls: ['demo-app/button/button-demo.css'],
-    directives: [MdButton, MdAnchor, MdIcon]
+  moduleId: module.id,
+  selector: 'button-demo',
+  templateUrl: 'button-demo.html',
+  styleUrls: ['button-demo.css'],
+  directives: [MdButton, MdAnchor, MdIcon]
 })
 export class ButtonDemo {
   isDisabled: boolean = false;

src/demo-app/card/card-demo.ts

@@ -1,11 +1,12 @@
 import {Component} from '@angular/core';
-import {MdButton} from '../../components/button/button';
-import {MD_CARD_DIRECTIVES} from '../../components/card/card';
+import {MdButton} from '@angular2-material/button/button';
+import {MD_CARD_DIRECTIVES} from '@angular2-material/card/card';
 
 @Component({
-    selector: 'card-demo',
-    templateUrl: 'demo-app/card/card-demo.html',
-    styleUrls: ['demo-app/card/card-demo.css'],
-    directives: [MD_CARD_DIRECTIVES, MdButton]
+  moduleId: module.id,
+  selector: 'card-demo',
+  templateUrl: 'card-demo.html',
+  styleUrls: ['card-demo.css'],
+  directives: [MD_CARD_DIRECTIVES, MdButton]
 })
 export class CardDemo {}

src/demo-app/checkbox/checkbox-demo.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {FORM_DIRECTIVES} from '@angular/common';
-import {MdCheckbox} from '../../components/checkbox/checkbox';
+import {MdCheckbox} from '@angular2-material/checkbox/checkbox';
 
 interface Task {
   name: string;
@@ -9,13 +9,14 @@ interface Task {
 }
 
 @Component({
+  moduleId: module.id,
   selector: 'md-checkbox-demo-nested-checklist',
   styles: [`
     li {
       margin-bottom: 4px;
     }
   `],
-  templateUrl: 'demo-app/checkbox/nested-checklist.html',
+  templateUrl: 'nested-checklist.html',
   directives: [MdCheckbox]
 })
 class MdCheckboxDemoNestedChecklist {
@@ -58,9 +59,10 @@ class MdCheckboxDemoNestedChecklist {
 }
 
 @Component({
+  moduleId: module.id,
   selector: 'md-checkbox-demo',
-  templateUrl: 'demo-app/checkbox/checkbox-demo.html',
-  styleUrls: ['demo-app/checkbox/checkbox-demo.css'],
+  templateUrl: 'checkbox-demo.html',
+  styleUrls: ['checkbox-demo.css'],
   directives: [MdCheckbox, MdCheckboxDemoNestedChecklist, FORM_DIRECTIVES]
 })
 export class CheckboxDemo {

src/demo-app/demo-app/demo-app.ts

@@ -1,29 +1,31 @@
 import {Component} from '@angular/core';
 import {Route, Routes, ROUTER_DIRECTIVES} from '@angular/router';
-import {CardDemo} from './card/card-demo';
-import {ButtonDemo} from './button/button-demo';
-import {IconDemo} from './icon/icon-demo';
-import {RadioDemo} from './radio/radio-demo';
-import {SidenavDemo} from './sidenav/sidenav-demo';
-import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
-import {ProgressCircleDemo} from './progress-circle/progress-circle-demo';
-import {CheckboxDemo} from './checkbox/checkbox-demo';
-import {Dir} from '../core/rtl/dir';
-import {MdButton} from '../components/button/button';
-import {MD_SIDENAV_DIRECTIVES} from '../components/sidenav/sidenav';
-import {MD_LIST_DIRECTIVES} from '../components/list/list';
-import {MdIcon} from '../components/icon/icon';
-import {MdToolbar} from '../components/toolbar/toolbar';
-import {PortalDemo} from './portal/portal-demo';
-import {ToolbarDemo} from './toolbar/toolbar-demo';
-import {OverlayDemo} from './overlay/overlay-demo';
-import {ListDemo} from './list/list-demo';
-import {InputDemo} from './input/input-demo';
-import {LiveAnnouncerDemo} from './live-announcer/live-announcer-demo';
-import {GesturesDemo} from './gestures/gestures-demo';
-import {GridListDemo} from './grid-list/grid-list-demo';
-import {TabGroupDemo} from './tab-group/tab-group-demo';
-import {SlideToggleDemo} from './slide-toggle/slide-toggle-demo';
+
+import {Dir} from '@angular2-material/core/rtl/dir';
+import {MdButton} from '@angular2-material/button/button';
+import {MD_SIDENAV_DIRECTIVES} from '@angular2-material/sidenav/sidenav';
+import {MD_LIST_DIRECTIVES} from '@angular2-material/list/list';
+import {MdIcon} from '@angular2-material/icon/icon';
+import {MdToolbar} from '@angular2-material/toolbar/toolbar';
+
+import {CardDemo} from '../card/card-demo';
+import {ButtonDemo} from '../button/button-demo';
+import {IconDemo} from '../icon/icon-demo';
+import {RadioDemo} from '../radio/radio-demo';
+import {SidenavDemo} from '../sidenav/sidenav-demo';
+import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
+import {ProgressCircleDemo} from '../progress-circle/progress-circle-demo';
+import {CheckboxDemo} from '../checkbox/checkbox-demo';
+import {PortalDemo} from '../portal/portal-demo';
+import {ToolbarDemo} from '../toolbar/toolbar-demo';
+import {OverlayDemo} from '../overlay/overlay-demo';
+import {ListDemo} from '../list/list-demo';
+import {InputDemo} from '../input/input-demo';
+import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
+import {GesturesDemo} from '../gestures/gestures-demo';
+import {GridListDemo} from '../grid-list/grid-list-demo';
+import {TabGroupDemo} from '../tab-group/tab-group-demo';
+import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
 
 @Component({
   selector: 'home',
@@ -35,10 +37,11 @@ import {SlideToggleDemo} from './slide-toggle/slide-toggle-demo';
 export class Home {}
 
 @Component({
+  moduleId: module.id,
   selector: 'demo-app',
   providers: [],
-  templateUrl: 'demo-app/demo-app.html',
-  styleUrls: ['demo-app/demo-app.css'],
+  templateUrl: 'demo-app.html',
+  styleUrls: ['demo-app.css'],
   directives: [
     ROUTER_DIRECTIVES,
     Dir,

src/demo-app/environment.ts

@@ -0,0 +1,7 @@
+// The file for the current environment will overwrite this one during build
+// Different environments can be found in config/environment.{dev|prod}.ts
+// The build system defaults to the dev environment
+
+export const environment = {
+  production: false
+};

src/demo-app/gestures/gestures-demo.ts

@@ -1,9 +1,10 @@
 import {Component} from '@angular/core';
 
 @Component({
+  moduleId: module.id,
   selector: 'gestures-demo',
-  templateUrl: 'demo-app/gestures/gestures-demo.html',
-  styleUrls: ['demo-app/gestures/gestures-demo.css'],
+  templateUrl: 'gestures-demo.html',
+  styleUrls: ['gestures-demo.css'],
   directives: []
 })
 export class GesturesDemo {

src/demo-app/grid-list/grid-list-demo.ts

@@ -1,12 +1,13 @@
 import {Component} from '@angular/core';
-import {MD_GRID_LIST_DIRECTIVES} from '../../components/grid-list/grid-list';
-import {MdButton} from '../../components/button/button';
-import {MD_CARD_DIRECTIVES} from '../../components/card/card';
+import {MD_GRID_LIST_DIRECTIVES} from '@angular2-material/grid-list/grid-list';
+import {MdButton} from '@angular2-material/button/button';
+import {MD_CARD_DIRECTIVES} from '@angular2-material/card/card';
 
 @Component({
+  moduleId: module.id,
   selector: 'grid-list-demo',
-  templateUrl: 'demo-app/grid-list/grid-list-demo.html',
-  styleUrls: ['demo-app/grid-list/grid-list-demo.css'],
+  templateUrl: 'grid-list-demo.html',
+  styleUrls: ['grid-list-demo.css'],
   directives: [MD_GRID_LIST_DIRECTIVES, MdButton, MD_CARD_DIRECTIVES]
 })
 export class GridListDemo {

src/demo-app/icon/icon-demo.html

@@ -5,7 +5,7 @@
 
   <p>
     From URL:
-    <md-icon svgSrc="/demo-app/icon/assets/search-icon.svg"></md-icon>
+    <md-icon svgSrc="/icon/assets/search-icon.svg"></md-icon>
   </p>
 
   <p>

src/demo-app/icon/icon-demo.ts

@@ -1,10 +1,11 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {MdIcon, MdIconRegistry} from '../../components/icon/icon';
+import {MdIcon, MdIconRegistry} from '@angular2-material/icon/icon';
 
 @Component({
+  moduleId: module.id,
   selector: 'md-icon-demo',
-  templateUrl: 'demo-app/icon/icon-demo.html',
-  styleUrls: ['demo-app/icon/icon-demo.css'],
+  templateUrl: 'icon-demo.html',
+  styleUrls: ['icon-demo.css'],
   directives: [MdIcon],
   viewProviders: [MdIconRegistry],
   encapsulation: ViewEncapsulation.None,
@@ -12,8 +13,8 @@ import {MdIcon, MdIconRegistry} from '../../components/icon/icon';
 export class IconDemo {
   constructor(mdIconRegistry: MdIconRegistry) {
     mdIconRegistry
-        .addSvgIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg')
-        .addSvgIconSetInNamespace('core', '/demo-app/icon/assets/core-icon-set.svg')
+        .addSvgIcon('thumb-up', '/icon/assets/thumbup-icon.svg')
+        .addSvgIconSetInNamespace('core', '/icon/assets/core-icon-set.svg')
         .registerFontClassAlias('fontawesome', 'fa');
   }
 }

src/demo-app/input/input-demo.ts

@@ -1,18 +1,19 @@
 import {Component} from '@angular/core';
-import {MD_INPUT_DIRECTIVES} from '../../components/input/input';
-import {MdButton} from '../../components/button/button';
-import {MdCard} from '../../components/card/card';
-import {MdCheckbox} from '../../components/checkbox/checkbox';
-import {MdIcon} from '../../components/icon/icon';
-import {MdToolbar} from '../../components/toolbar/toolbar';
+import {MD_INPUT_DIRECTIVES} from '@angular2-material/input/input';
+import {MdButton} from '@angular2-material/button/button';
+import {MdCard} from '@angular2-material/card/card';
+import {MdCheckbox} from '@angular2-material/checkbox/checkbox';
+import {MdIcon} from '@angular2-material/icon/icon';
+import {MdToolbar} from '@angular2-material/toolbar/toolbar';
 
 
 let max = 5;
 
 @Component({
+  moduleId: module.id,
   selector: 'input-demo',
-  templateUrl: 'demo-app/input/input-demo.html',
-  styleUrls: ['demo-app/input/input-demo.css'],
+  templateUrl: 'input-demo.html',
+  styleUrls: ['input-demo.css'],
   directives: [MdCard, MdCheckbox, MdButton, MdIcon, MdToolbar, MD_INPUT_DIRECTIVES]
 })
 export class InputDemo {

src/demo-app/list/list-demo.ts

@@ -1,12 +1,13 @@
 import {Component} from '@angular/core';
-import {MdButton} from '../../components/button/button';
-import {MD_LIST_DIRECTIVES} from '../../components/list/list';
-import {MdIcon} from '../../components/icon/icon';
+import {MdButton} from '@angular2-material/button/button';
+import {MD_LIST_DIRECTIVES} from '@angular2-material/list/list';
+import {MdIcon} from '@angular2-material/icon/icon';
 
 @Component({
+  moduleId: module.id,
   selector: 'list-demo',
-  templateUrl: 'demo-app/list/list-demo.html',
-  styleUrls: ['demo-app/list/list-demo.css'],
+  templateUrl: 'list-demo.html',
+  styleUrls: ['list-demo.css'],
   directives: [MD_LIST_DIRECTIVES, MdButton, MdIcon]
 })
 export class ListDemo {

src/demo-app/live-announcer/live-announcer-demo.ts

@@ -1,9 +1,10 @@
 import {Component} from '@angular/core';
-import {MdLiveAnnouncer} from '../../core/live-announcer/live-announcer';
+import {MdLiveAnnouncer} from '@angular2-material/core/live-announcer/live-announcer';
 
 @Component({
+  moduleId: module.id,
   selector: 'toolbar-demo',
-  templateUrl: 'demo-app/live-announcer/live-announcer-demo.html',
+  templateUrl: 'live-announcer-demo.html',
 })
 export class LiveAnnouncerDemo {
 

src/demo-app/main.ts

@@ -1,16 +1,17 @@
 import {bootstrap} from '@angular/platform-browser-dynamic';
 import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
-import {DemoApp} from './demo-app/demo-app';
 import {HTTP_PROVIDERS} from '@angular/http';
 import {ROUTER_PROVIDERS} from '@angular/router';
-import {MdIconRegistry} from './components/icon/icon-registry';
-import {OVERLAY_CONTAINER_TOKEN} from './core/overlay/overlay';
-import {MdLiveAnnouncer} from './core/live-announcer/live-announcer';
 import {provide} from '@angular/core';
-import {createOverlayContainer} from './core/overlay/overlay-container';
 import {Renderer} from '@angular/core';
-import {MdGestureConfig} from './core/gestures/MdGestureConfig';
-import 'rxjs/Rx';
+
+import {OVERLAY_CONTAINER_TOKEN} from '@angular2-material/core/overlay/overlay';
+import {MdLiveAnnouncer} from '@angular2-material/core/live-announcer/live-announcer';
+import {createOverlayContainer} from '@angular2-material/core/overlay/overlay-container';
+import {MdGestureConfig} from '@angular2-material/core/gestures/MdGestureConfig';
+import {MdIconRegistry} from '@angular2-material/icon/icon-registry';
+
+import {DemoApp} from './demo-app/demo-app';
 
 bootstrap(DemoApp, [
   ROUTER_PROVIDERS,

src/demo-app/overlay/overlay-demo.ts

@@ -8,10 +8,11 @@ import {
     ViewChild,
     ViewContainerRef
 } from '@angular/core';
-import {Overlay, OverlayState, OVERLAY_PROVIDERS} from '../../core/overlay/overlay';
-import {ComponentPortal, Portal} from '../../core/portal/portal';
-import {TemplatePortalDirective} from '../../core/portal/portal-directives';
-import {RelativePosition} from '../../core/overlay/position/connected-position-strategy';
+import {Overlay, OverlayState, OVERLAY_PROVIDERS} from '@angular2-material/core/overlay/overlay';
+import {ComponentPortal, Portal} from '@angular2-material/core/portal/portal';
+import {TemplatePortalDirective} from '@angular2-material/core/portal/portal-directives';
+import {RelativePosition} from
+    '@angular2-material/core/overlay/position/connected-position-strategy';
 
 
 
@@ -22,9 +23,10 @@ class OverlayOrigin {
 
 
 @Component({
+  moduleId: module.id,
   selector: 'overlay-demo',
-  templateUrl: 'demo-app/overlay/overlay-demo.html',
-  styleUrls: ['demo-app/overlay/overlay-demo.css'],
+  templateUrl: 'overlay-demo.html',
+  styleUrls: ['overlay-demo.css'],
   directives: [TemplatePortalDirective, OverlayOrigin],
   providers: [OVERLAY_PROVIDERS],
   encapsulation: ViewEncapsulation.None,
@@ -89,6 +91,7 @@ export class OverlayDemo {
 
 /** Simple component to load into an overlay */
 @Component({
+  moduleId: module.id,
   selector: 'rotini-panel',
   template: '<p class="demo-rotini">Rotini {{value}}</p>'
 })

src/demo-app/portal/portal-demo.ts

@@ -1,15 +1,16 @@
 import {Component} from '@angular/core';
-import {PortalHostDirective} from '../../core/portal/portal-directives';
-import {TemplatePortalDirective} from '../../core/portal/portal-directives';
-import {Portal} from '../../core/portal/portal';
+import {PortalHostDirective} from '@angular2-material/core/portal/portal-directives';
+import {TemplatePortalDirective} from '@angular2-material/core/portal/portal-directives';
+import {Portal} from '@angular2-material/core/portal/portal';
 import {ViewChildren} from '@angular/core';
 import {QueryList} from '@angular/core';
-import {ComponentPortal} from '../../core/portal/portal';
+import {ComponentPortal} from '@angular2-material/core/portal/portal';
 
 @Component({
+  moduleId: module.id,
   selector: 'portal-demo',
-  templateUrl: 'demo-app/portal/portal-demo.html',
-  styleUrls: ['demo-app/portal/portal-demo.css'],
+  templateUrl: 'portal-demo.html',
+  styleUrls: ['portal-demo.css'],
   directives: [TemplatePortalDirective, PortalHostDirective]
 })
 export class PortalDemo {
@@ -32,6 +33,7 @@ export class PortalDemo {
 
 
 @Component({
+  moduleId: module.id,
   selector: 'science-joke',
   template: `<p> 100 kilopascals go into a bar. </p>`
 })

src/demo-app/progress-bar/progress-bar-demo.ts

@@ -1,13 +1,14 @@
 import {Component} from '@angular/core';
-import {MdButton} from '../../components/button/button';
-import {MdProgressBar} from '../../components/progress-bar/progress-bar';
+import {MdButton} from '@angular2-material/button/button';
+import {MdProgressBar} from '@angular2-material/progress-bar/progress-bar';
 
 // TODO(josephperrott): Add an automatically filling example progress bar.
 
 @Component({
+  moduleId: module.id,
   selector: 'progress-bar-demo',
-  templateUrl: 'demo-app/progress-bar/progress-bar-demo.html',
-  styleUrls: ['demo-app/progress-bar/progress-bar-demo.css'],
+  templateUrl: 'progress-bar-demo.html',
+  styleUrls: ['progress-bar-demo.css'],
   directives: [MdProgressBar, MdButton]
 })
 export class ProgressBarDemo {

src/demo-app/progress-circle/progress-circle-demo.ts

@@ -1,11 +1,12 @@
 import {Component} from '@angular/core';
-import {MdButton} from '../../components/button/button';
-import {MdProgressCircle, MdSpinner} from '../../components/progress-circle/progress-circle';
+import {MdButton} from '@angular2-material/button/button';
+import {MdProgressCircle, MdSpinner} from '@angular2-material/progress-circle/progress-circle';
 
 @Component({
+  moduleId: module.id,
   selector: 'progress-circle-demo',
-  templateUrl: 'demo-app/progress-circle/progress-circle-demo.html',
-  styleUrls: ['demo-app/progress-circle/progress-circle-demo.css'],
+  templateUrl: 'progress-circle-demo.html',
+  styleUrls: ['progress-circle-demo.css'],
   directives: [MdProgressCircle, MdSpinner, MdButton]
 })
 export class ProgressCircleDemo {

src/demo-app/radio/radio-demo.ts

@@ -1,11 +1,12 @@
 import {Component} from '@angular/core';
-import {MdRadioButton, MdRadioGroup} from '../../components/radio/radio';
-import {MdRadioDispatcher} from '../../components/radio/radio_dispatcher';
+import {MdRadioButton, MdRadioGroup} from '@angular2-material/radio/radio';
+import {MdRadioDispatcher} from '@angular2-material/radio/radio_dispatcher';
 
 @Component({
+  moduleId: module.id,
   selector: 'radio-demo',
-  templateUrl: 'demo-app/radio/radio-demo.html',
-  styleUrls: ['demo-app/radio/radio-demo.css'],
+  templateUrl: 'radio-demo.html',
+  styleUrls: ['radio-demo.css'],
   providers: [MdRadioDispatcher],
   directives: [MdRadioButton, MdRadioGroup]
 })

src/demo-app/sidenav/sidenav-demo.ts

@@ -1,11 +1,12 @@
 import {Component} from '@angular/core';
-import {MdButton} from '../../components/button/button';
-import {MD_SIDENAV_DIRECTIVES} from '../../components/sidenav/sidenav';
+import {MdButton} from '@angular2-material/button/button';
+import {MD_SIDENAV_DIRECTIVES} from '@angular2-material/sidenav/sidenav';
 
 @Component({
+    moduleId: module.id,
     selector: 'sidenav-demo',
-    templateUrl: 'demo-app/sidenav/sidenav-demo.html',
-    styleUrls: ['demo-app/sidenav/sidenav-demo.css'],
+    templateUrl: 'sidenav-demo.html',
+    styleUrls: ['sidenav-demo.css'],
     directives: [MD_SIDENAV_DIRECTIVES, MdButton]
 })
 export class SidenavDemo { }

src/demo-app/slide-toggle/slide-toggle-demo.ts

@@ -1,10 +1,11 @@
 import {Component} from '@angular/core';
-import {MdSlideToggle} from '../../components/slide-toggle/slide-toggle';
+import {MdSlideToggle} from '@angular2-material/slide-toggle/slide-toggle';
 
 @Component({
+  moduleId: module.id,
   selector: 'switch-demo',
-  templateUrl: 'demo-app/slide-toggle/slide-toggle-demo.html',
-  styleUrls: ['demo-app/slide-toggle/slide-toggle-demo.css'],
+  templateUrl: 'slide-toggle-demo.html',
+  styleUrls: ['slide-toggle-demo.css'],
   directives: [MdSlideToggle]
 })
 export class SlideToggleDemo {}

src/demo-app/system-config.ts

@@ -1,25 +1,48 @@
 /***********************************************************************************************
  * User Configuration.
  **********************************************************************************************/
+
+System.defaultJSExtensions = true;
+
+
+const components = [
+  'button',
+  'card',
+  'checkbox',
+  'grid-list',
+  'icon',
+  'input',
+  'list',
+  'progress-bar',
+  'progress-circle',
+  'radio',
+  'sidenav',
+  'slide-toggle',
+  'tab-group',
+  'toolbar'
+];
+
+
 /** Map relative paths to URLs. */
 const map: any = {
+  '@angular2-material/core': '/core',
 };
+components.forEach(name => map[`@angular2-material/${name}`] = `/components/${name}`);
+
 
 /** User packages configuration. */
 const packages: any = {
-  'demo-app': {
+  '@angular2-material/core': {
     format: 'cjs',
     defaultExtension: 'js'
-  },
-  'components': {
-    format: 'cjs',
-    defaultExtension: 'js'
-  },
-  'core': {
-    format: 'cjs',
-    defaultExtension: 'js'
-  },
+  }
 };
+components.forEach(name => {
+  packages[`@angular2-material/${name}`] = {
+    format: 'cjs',
+    defaultExtension: 'js'
+  };
+});
 
 ////////////////////////////////////////////////////////////////////////////////////////////////
 /***********************************************************************************************

src/demo-app/tab-group/tab-group-demo.ts

@@ -1,12 +1,13 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {MD_TAB_GROUP_DIRECTIVES} from '../../components/tab-group/tab-group';
-import {MdToolbar} from '../../components/toolbar/toolbar';
-import {MdInput} from '../../components/input/input';
+import {MD_TAB_GROUP_DIRECTIVES} from '@angular2-material/tab-group/tab-group';
+import {MdToolbar} from '@angular2-material/toolbar/toolbar';
+import {MdInput} from '@angular2-material/input/input';
 
 @Component({
+  moduleId: module.id,
   selector: 'tab-group-demo',
-  templateUrl: 'demo-app/tab-group/tab-group-demo.html',
-  styleUrls: ['demo-app/tab-group/tab-group-demo.css'],
+  templateUrl: 'tab-group-demo.html',
+  styleUrls: ['tab-group-demo.css'],
   directives: [MD_TAB_GROUP_DIRECTIVES, MdToolbar, MdInput],
   encapsulation: ViewEncapsulation.None,
 })

src/demo-app/toolbar/toolbar-demo.ts

@@ -1,11 +1,12 @@
 import {Component} from '@angular/core';
-import {MdIcon} from '../../components/icon/icon';
-import {MdToolbar} from '../../components/toolbar/toolbar';
+import {MdIcon} from '@angular2-material/icon/icon';
+import {MdToolbar} from '@angular2-material/toolbar/toolbar';
 
 @Component({
+  moduleId: module.id,
   selector: 'toolbar-demo',
-  templateUrl: 'demo-app/toolbar/toolbar-demo.html',
-  styleUrls: ['demo-app/toolbar/toolbar-demo.css'],
+  templateUrl: 'toolbar-demo.html',
+  styleUrls: ['toolbar-demo.css'],
   directives: [MdToolbar, MdIcon]
 })
 export class ToolbarDemo {

src/demo-app/tsconfig.json

@@ -8,12 +8,23 @@
     "moduleResolution": "node",
     "noEmitOnError": true,
     "noImplicitAny": true,
-    "outDir": "../dist/",
-    "rootDir": ".",
+    "outDir": "../../dist/",
+    "rootDir": "..",
     "sourceMap": true,
     "target": "es5",
     "inlineSources": true,
-    "stripInternal": true
+    "stripInternal": true,
+    "baseUrl": "",
+    "paths": {
+      "@angular2-material/core/*": [
+        "./core/*",
+        "../core/*"
+      ],
+      "@angular2-material/*": [
+        "./components/*",
+        "../components/*"
+      ]
+    }
   },
   "files": [
     "main.ts",

src/demo-app/typings.d.ts

@@ -0,0 +1,4 @@
+/// <reference path="../../typings/browser.d.ts" />
+
+declare var module: { id: string };
+

src/typings.d.ts

@@ -1 +0,0 @@
-/// <reference path="../typings/browser.d.ts" />