diff --git a/.gitignore b/.gitignore
index 1c34f4721183..94eb0c6e1546 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,7 @@
 /.idea
 
 # misc
+.DS_Store
 /.sass-cache
 /connect.lock
 /coverage/*
diff --git a/angular-cli-build.js b/angular-cli-build.js
index 362ba6d06168..cd46f6fa6941 100644
--- a/angular-cli-build.js
+++ b/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 });
-};
+}
diff --git a/config/environment.dev.ts b/config/environment.dev.ts
new file mode 100644
index 000000000000..ffe8aed76642
--- /dev/null
+++ b/config/environment.dev.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: false
+};
diff --git a/config/environment.prod.ts b/config/environment.prod.ts
new file mode 100644
index 000000000000..3612073bc31c
--- /dev/null
+++ b/config/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/gulpfile.js b/gulpfile.js
deleted file mode 100644
index b39248e634d0..000000000000
--- a/gulpfile.js
+++ /dev/null
@@ -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'));
-});
diff --git a/package.json b/package.json
index dd31b3daa5d0..8174da620355 100644
--- a/package.json
+++ b/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"
   }
diff --git a/scripts/release/inline-resources.js b/scripts/release/inline-resources.js
new file mode 100644
index 000000000000..133ec2e6627a
--- /dev/null
+++ b/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')
+      + ']';
+  });
+}
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 0ac746786e5e..ace5c0da0994 100644
--- a/src/components/button/button.ts
+++ b/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 {
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index 69901a276477..2dc60f610b9f 100644
--- a/src/components/card/card.ts
+++ b/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,
 })
diff --git a/src/components/checkbox/checkbox.spec.ts b/src/components/checkbox/checkbox.spec.ts
index 96d4bc4145c5..7cb9ae712044 100644
--- a/src/components/checkbox/checkbox.spec.ts
+++ b/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
 
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 13bf2395e233..3dd9b3f86f60 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/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',
diff --git a/src/components/grid-list/grid-list-errors.ts b/src/components/grid-list/grid-list-errors.ts
index cc38681a16ce..6c15aba8b034 100644
--- a/src/components/grid-list/grid-list-errors.ts
+++ b/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
diff --git a/src/components/grid-list/grid-list.ts b/src/components/grid-list/grid-list.ts
index 474456161c45..29792d5f68c8 100644
--- a/src/components/grid-list/grid-list.ts
+++ b/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 {
diff --git a/src/components/grid-list/grid-tile.ts b/src/components/grid-list/grid-tile.ts
index 419c11ff1c5f..3e3088f8d2c9 100644
--- a/src/components/grid-list/grid-tile.ts
+++ b/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 {
diff --git a/src/components/grid-list/tile-styler.ts b/src/components/grid-list/tile-styler.ts
index 5e342a5e4e6d..3a8353616392 100644
--- a/src/components/grid-list/tile-styler.ts
+++ b/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. */
diff --git a/src/components/icon/icon-registry.ts b/src/components/icon/icon-registry.ts
index 72f025c1a0ac..be2784168f21 100644
--- a/src/components/icon/icon-registry.ts
+++ b/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. */
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 046d721dd89c..d4c2fe78031d 100644
--- a/src/components/icon/icon.ts
+++ b/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',
   },
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 0b92e5570bb4..a4507558e38f 100644
--- a/src/components/input/input.ts
+++ b/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()'}
 })
diff --git a/src/components/list/list.ts b/src/components/list/list.ts
index 78272b41119a..8846b6ed5666 100644
--- a/src/components/list/list.ts
+++ b/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 {
diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts
index de3efc36498e..8aca3fcd3dd6 100644
--- a/src/components/progress-bar/progress-bar.ts
+++ b/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 {
diff --git a/src/components/progress-circle/progress-circle.ts b/src/components/progress-circle/progress-circle.ts
index 0b258d306990..c3a8ac73e54f 100644
--- a/src/components/progress-circle/progress-circle.ts
+++ b/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) {
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 2ea34b5e82a9..ec881ebdd938 100644
--- a/src/components/radio/radio.ts
+++ b/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)'
diff --git a/src/components/sidenav/sidenav.ts b/src/components/sidenav/sidenav.ts
index 11155858274f..8d821c0c24a8 100644
--- a/src/components/sidenav/sidenav.ts
+++ b/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 {
diff --git a/src/components/slide-toggle/slide-toggle.scss b/src/components/slide-toggle/slide-toggle.scss
index d0d9bcecfa4a..9e0123ba863b 100644
--- a/src/components/slide-toggle/slide-toggle.scss
+++ b/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;
diff --git a/src/components/slide-toggle/slide-toggle.ts b/src/components/slide-toggle/slide-toggle.ts
index d2b5cabdf560..cd0d8bf02210 100644
--- a/src/components/slide-toggle/slide-toggle.ts
+++ b/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
 })
diff --git a/src/components/tab-group/tab-content.ts b/src/components/tab-group/tab-content.ts
index a90d5f26535e..20b004bb7954 100644
--- a/src/components/tab-group/tab-content.ts
+++ b/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({
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index 0254ac65109d..0eb44aab71cc 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/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 {
diff --git a/src/components/tab-group/tab-label.ts b/src/components/tab-group/tab-label.ts
index 3ea219587d1c..8adb67afaf57 100644
--- a/src/components/tab-group/tab-label.ts
+++ b/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({
diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts
index 9f78b786f5cc..54cbc9c58016 100644
--- a/src/components/toolbar/toolbar.ts
+++ b/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 {
diff --git a/src/core/annotations/field-value.ts b/src/core/annotations/field-value.ts
index 7583e146236a..b821215bd425 100644
--- a/src/core/annotations/field-value.ts
+++ b/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';
       }
     });
   };
diff --git a/src/core/overlay/position/connected-position-strategy.ts b/src/core/overlay/position/connected-position-strategy.ts
index f1103f8a8644..6ab6496f8c66 100644
--- a/src/core/overlay/position/connected-position-strategy.ts
+++ b/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';
 
 
 
diff --git a/src/core/overlay/position/global-position-strategy.ts b/src/core/overlay/position/global-position-strategy.ts
index 0e2379f4bacc..be97efeb1b9c 100644
--- a/src/core/overlay/position/global-position-strategy.ts
+++ b/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';
 
 
 /**
diff --git a/src/demo-app/button/button-demo.ts b/src/demo-app/button/button-demo.ts
index 9f591b02144b..16746c32dbeb 100644
--- a/src/demo-app/button/button-demo.ts
+++ b/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;
diff --git a/src/demo-app/card/card-demo.ts b/src/demo-app/card/card-demo.ts
index 8eaf7801bfab..299948052fed 100644
--- a/src/demo-app/card/card-demo.ts
+++ b/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 {}
diff --git a/src/demo-app/checkbox/checkbox-demo.ts b/src/demo-app/checkbox/checkbox-demo.ts
index 7e4584697b9e..cd578f020cec 100644
--- a/src/demo-app/checkbox/checkbox-demo.ts
+++ b/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 {
diff --git a/src/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html
similarity index 100%
rename from src/demo-app/demo-app.html
rename to src/demo-app/demo-app/demo-app.html
diff --git a/src/demo-app/demo-app.scss b/src/demo-app/demo-app/demo-app.scss
similarity index 100%
rename from src/demo-app/demo-app.scss
rename to src/demo-app/demo-app/demo-app.scss
diff --git a/src/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts
similarity index 53%
rename from src/demo-app/demo-app.ts
rename to src/demo-app/demo-app/demo-app.ts
index e2c484bf5bd8..6cd15e0a022a 100644
--- a/src/demo-app/demo-app.ts
+++ b/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,
diff --git a/src/demo-app/environment.ts b/src/demo-app/environment.ts
new file mode 100644
index 000000000000..79ee96fdfdbd
--- /dev/null
+++ b/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
+};
diff --git a/src/favicon.ico b/src/demo-app/favicon.ico
similarity index 100%
rename from src/favicon.ico
rename to src/demo-app/favicon.ico
diff --git a/src/demo-app/gestures/gestures-demo.ts b/src/demo-app/gestures/gestures-demo.ts
index e828abf4b5fe..08284dab1c95 100644
--- a/src/demo-app/gestures/gestures-demo.ts
+++ b/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 {
diff --git a/src/demo-app/grid-list/grid-list-demo.ts b/src/demo-app/grid-list/grid-list-demo.ts
index fc947fb5bcb4..095d44c3cc9b 100644
--- a/src/demo-app/grid-list/grid-list-demo.ts
+++ b/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 {
diff --git a/src/demo-app/icon/icon-demo.html b/src/demo-app/icon/icon-demo.html
index 744a68c44bae..8c766f50a481 100644
--- a/src/demo-app/icon/icon-demo.html
+++ b/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>
diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts
index d594a82f1a3b..3298ad143d33 100644
--- a/src/demo-app/icon/icon-demo.ts
+++ b/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');
   }
 }
diff --git a/src/index.html b/src/demo-app/index.html
similarity index 100%
rename from src/index.html
rename to src/demo-app/index.html
diff --git a/src/demo-app/input/input-demo.ts b/src/demo-app/input/input-demo.ts
index 1b46610e9b20..0be50ac36313 100644
--- a/src/demo-app/input/input-demo.ts
+++ b/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 {
diff --git a/src/demo-app/list/list-demo.ts b/src/demo-app/list/list-demo.ts
index f24d2a63728e..0c4791b3d8a8 100644
--- a/src/demo-app/list/list-demo.ts
+++ b/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 {
diff --git a/src/demo-app/live-announcer/live-announcer-demo.ts b/src/demo-app/live-announcer/live-announcer-demo.ts
index 377438c6201a..8fda54a3dacc 100644
--- a/src/demo-app/live-announcer/live-announcer-demo.ts
+++ b/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 {
 
diff --git a/src/main.scss b/src/demo-app/main.scss
similarity index 100%
rename from src/main.scss
rename to src/demo-app/main.scss
diff --git a/src/main.ts b/src/demo-app/main.ts
similarity index 59%
rename from src/main.ts
rename to src/demo-app/main.ts
index babe0c1e1c58..15ef934edd7f 100644
--- a/src/main.ts
+++ b/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,
diff --git a/src/demo-app/overlay/overlay-demo.ts b/src/demo-app/overlay/overlay-demo.ts
index 83f4fcf1685c..3419002a4bd3 100644
--- a/src/demo-app/overlay/overlay-demo.ts
+++ b/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>'
 })
diff --git a/src/demo-app/portal/portal-demo.ts b/src/demo-app/portal/portal-demo.ts
index 65a5e0980769..b2bb0cd3e0b8 100644
--- a/src/demo-app/portal/portal-demo.ts
+++ b/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>`
 })
diff --git a/src/demo-app/progress-bar/progress-bar-demo.ts b/src/demo-app/progress-bar/progress-bar-demo.ts
index 04a54c839532..df6244402cc5 100644
--- a/src/demo-app/progress-bar/progress-bar-demo.ts
+++ b/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 {
diff --git a/src/demo-app/progress-circle/progress-circle-demo.ts b/src/demo-app/progress-circle/progress-circle-demo.ts
index 4b50fe6e2928..f19bf4cc8ab4 100644
--- a/src/demo-app/progress-circle/progress-circle-demo.ts
+++ b/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 {
diff --git a/src/demo-app/radio/radio-demo.ts b/src/demo-app/radio/radio-demo.ts
index f5c13f5fc731..a64548b40e18 100644
--- a/src/demo-app/radio/radio-demo.ts
+++ b/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]
 })
diff --git a/src/demo-app/sidenav/sidenav-demo.ts b/src/demo-app/sidenav/sidenav-demo.ts
index 135ba46b94a1..7eedd41032a6 100644
--- a/src/demo-app/sidenav/sidenav-demo.ts
+++ b/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 { }
diff --git a/src/demo-app/slide-toggle/slide-toggle-demo.ts b/src/demo-app/slide-toggle/slide-toggle-demo.ts
index 68bf0398c1d1..47e1a27757ad 100644
--- a/src/demo-app/slide-toggle/slide-toggle-demo.ts
+++ b/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 {}
diff --git a/src/system-config.ts b/src/demo-app/system-config.ts
similarity index 76%
rename from src/system-config.ts
rename to src/demo-app/system-config.ts
index 5a7d5f604a97..d310607fd984 100644
--- a/src/system-config.ts
+++ b/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': {
+  }
+};
+components.forEach(name => {
+  packages[`@angular2-material/${name}`] = {
     format: 'cjs',
     defaultExtension: 'js'
-  },
-};
+  };
+});
 
 ////////////////////////////////////////////////////////////////////////////////////////////////
 /***********************************************************************************************
diff --git a/src/demo-app/tab-group/tab-group-demo.ts b/src/demo-app/tab-group/tab-group-demo.ts
index 1ca31c1aad92..7e79d2b5fad6 100644
--- a/src/demo-app/tab-group/tab-group-demo.ts
+++ b/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,
 })
diff --git a/src/demo-app/toolbar/toolbar-demo.ts b/src/demo-app/toolbar/toolbar-demo.ts
index 0aefbb60125c..dd5433f39ae7 100644
--- a/src/demo-app/toolbar/toolbar-demo.ts
+++ b/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 {
diff --git a/src/tsconfig.json b/src/demo-app/tsconfig.json
similarity index 56%
rename from src/tsconfig.json
rename to src/demo-app/tsconfig.json
index 99ee503241db..e5e1c4d8eea7 100644
--- a/src/tsconfig.json
+++ b/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",
diff --git a/src/demo-app/typings.d.ts b/src/demo-app/typings.d.ts
new file mode 100644
index 000000000000..3e0714ab420c
--- /dev/null
+++ b/src/demo-app/typings.d.ts
@@ -0,0 +1,4 @@
+/// <reference path="../../typings/browser.d.ts" />
+
+declare var module: { id: string };
+
diff --git a/src/typings.d.ts b/src/typings.d.ts
deleted file mode 100644
index beb6cefcecec..000000000000
--- a/src/typings.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference path="../typings/browser.d.ts" />