build: move from angular-cli to gulp (#948)

Fixed #1636.
2026-09-14 13:54:52 +08:00 · 2016-08-19 10:59:45 -07:00
parent b5e1e332d3
commit abcc6af54d
246 changed files with 780 additions and 3520 deletions
@@ -24,19 +24,11 @@ env:
  - BROWSER_STACK_ACCESS_KEY=BWCd4SynLzdDcv8xtzsB
  - ARCH=linux-x64
  - BROWSER_PROVIDER_READY_FILE=/tmp/angular-material2-build/readyfile
-  # Token for tsd to increase github rate limit
-  # See https://github.com/DefinitelyTyped/tsd#tsdrc
-  # This does not use http://docs.travis-ci.com/user/environment-variables/#Secure-Variables
-  # because those are not visible for pull requests, and those should also be reliable.
-  # This SSO token belongs to github account angular-github-ratelimit-token which has no access
-  # (password is in Valentine)
-  - TSDRC='{"token":"ef474500309daea53d5991b3079159a29520a40b"}'
  # GITHUB_TOKEN_ANGULAR
  - secure: "fq/U7VDMWO8O8SnAQkdbkoSe2X92PVqg4d044HmRYVmcf6YbO48+xeGJ8yOk0pCBwl3ISO4Q2ot0x546kxfiYBuHkZetlngZxZCtQiFT9kyId8ZKcYdXaIW9OVdw3Gh3tQyUwDucfkVhqcs52D6NZjyE2aWZ4/d1V4kWRO/LMgo="
  matrix:
    # Order: a slower build first, so that we don't occupy an idle travis worker waiting for others to complete.
    - MODE=lint
-    - MODE=circular_deps
    - MODE=extract_metadata
    - MODE=e2e
    - MODE=saucelabs_required
@@ -51,13 +43,12 @@ matrix:

 install:
  - npm install
-  - npm run typings

 before_script:
  - mkdir -p $LOGS_DIR

 script:
- ./scripts/ci/build-and-test.sh
+  - ./scripts/ci/build-and-test.sh

 cache:
  directories:
@@ -1,111 +0,0 @@
-'use strict';
-const fs = require('fs');
-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');
-const autoPrefixerTree = require('broccoli-autoprefixer');
-
-
-module.exports = function(defaults) {
-  // 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' ]
-  }));
-
-  // Include the scss sources in the output for when we publish.
-  const scssSources = new Funnel('src', {include: ['**/*.scss']});
-
-  return new MergeTree([appTree, cssAutoprefixed, scssSources], { overwrite: true });
-};
-
-
-/**
- * Build the Broccoli Tree containing all the files used as the input to the Demo 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 containing all the files used as the input to the e2e Angular2App.
- */
-function _buildE2EAppInputTree() {
-  return new MergeTree([
-    new Funnel('typings', {
-      destDir: 'typings'
-    }),
-    new Funnel('src', {
-      include: ['components/**/*', 'core/**/*'],
-      destDir: 'src/e2e-app'
-    }),
-    new Funnel('src/e2e-app', {
-      destDir: 'src/e2e-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;
-  let sourceDir;
-  switch(process.env['MD_APP']) {
-    case 'e2e':
-      inputNode = _buildE2EAppInputTree();
-      sourceDir = 'src/e2e-app';
-      break;
-    default:
-      inputNode = _buildDemoAppInputTree();
-      sourceDir = 'src/demo-app';
-  }
-
-  return new Angular2App(defaults, inputNode, {
-    sourceDir: sourceDir,
-    polyfills: [
-      'vendor/core-js/client/core.js',
-      'vendor/systemjs/dist/system.src.js',
-      'vendor/zone.js/dist/zone.js',
-      'vendor/hammerjs/hammer.min.js'
-    ],
-    tsCompiler: {},
-    sassCompiler: {
-      includePaths: [
-        'src/core/style'
-      ]
-    },
-    vendorNpmFiles: [
-      'systemjs/dist/system-polyfills.js',
-      'systemjs/dist/system.src.js',
-      'zone.js/dist/*.+(js|js.map)',
-      'core-js/client/core.js',
-      'rxjs/**/*.+(js|js.map)',
-      '@angular/**/*.+(js|js.map)',
-      'hammerjs/*.min.+(js|js.map)'
-    ]
-  });
-}
@@ -1,25 +0,0 @@
-{
-  "project": {
-    "version": "0.0.37",
-    "name": "material2"
-  },
-  "apps": [
-    {"main": "src/main.ts", "tsconfig": "src/tsconfig.json"}
-  ],
-  "addons": [],
-  "packages": [],
-  "e2e": {
-    "protractor": {
-      "config": "test/protractor.conf.js"
-    }
-  },
-  "test": {
-    "karma": {
-      "config": "test/karma.conf.js"
-    }
-  },
-  "defaults": {
-    "prefix": "",
-    "sourceDir": "src"
-  }
-}
@@ -0,0 +1,14 @@
+'use strict';
+/**
+ * Load the TypeScript compiler, then load the TypeScript gulpfile which simply loads all
+ * the tasks. The tasks are really inside tools/gulp/tasks.
+ */
+
+const path = require('path');
+
+// Register TS compilation.
+require('ts-node').register({
+  project: path.join(__dirname, 'tools/gulp')
+});
+
+require('./tools/gulp/gulpfile');
@@ -8,17 +8,12 @@
    "url": "https://github.com/angular/material2.git"
  },
  "scripts": {
-    "ci:forbidden-identifiers": "node ./scripts/ci/forbidden-identifiers.js",
-    "build": "ng build",
-    "demo-app": "ng serve",
-    "test": "karma start test/karma.conf.js",
-    "tslint": "tslint -c tslint.json 'src/**/*.ts'",
-    "stylelint": "stylelint 'src/**/*.scss' --config stylelint-config.json --syntax scss",
-    "check-circular-deps": "madge --circular ./dist",
-    "typings": "typings install --global",
-    "postinstall": "npm run typings",
-    "e2e": "protractor",
-    "inline-resources": "node ./scripts/release/inline-resources.js ./dist/components",
+    "build": "gulp build",
+    "demo-app": "gulp serve:devapp",
+    "test": "gulp test",
+    "tslint": "gulp lint",
+    "stylelint": "gulp lint",
+    "e2e": "gulp e2e",
    "deploy": "firebase deploy",
    "webdriver-manager": "webdriver-manager"
  },
@@ -31,10 +26,10 @@
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
+    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
-    "@angular/forms": "0.3.0",
    "@angular/router": "3.0.0-rc.1",
    "core-js": "^2.4.0",
    "hammerjs": "^2.0.8",
@@ -44,19 +39,27 @@
  },
  "devDependencies": {
    "@angular/compiler-cli": "^0.4.1",
-    "add-stream": "^1.0.0",
-    "angular-cli": "^1.0.0-beta.9",
-    "broccoli-autoprefixer": "^4.1.0",
-    "broccoli-funnel": "^1.0.1",
-    "broccoli-merge-trees": "^1.1.1",
+    "@types/glob": "^5.0.29",
+    "@types/gulp": "^3.8.29",
+    "@types/hammerjs": "^2.0.30",
+    "@types/jasmine": "^2.2.31",
+    "@types/merge2": "0.0.28",
+    "@types/node": "^6.0.34",
+    "@types/run-sequence": "0.0.27",
    "browserstacktunnel-wrapper": "^1.4.2",
    "conventional-changelog": "^1.1.0",
-    "ember-cli-inject-live-reload": "^1.4.0",
+    "express": "^4.14.0",
    "firebase-tools": "^2.2.1",
    "fs-extra": "^0.26.5",
    "glob": "^6.0.4",
+    "gulp": "^3.9.1",
+    "gulp-clean": "^0.3.2",
+    "gulp-sass": "^2.3.2",
+    "gulp-server-livereload": "^1.8.2",
+    "gulp-shell": "^0.5.2",
+    "gulp-sourcemaps": "^1.6.0",
+    "gulp-typescript": "^2.13.6",
    "jasmine-core": "^2.4.1",
-    "js-yaml": "^3.5.2",
    "karma": "^1.1.1",
    "karma-browserstack-launcher": "^1.0.1",
    "karma-chrome-launcher": "^1.0.1",
@@ -64,9 +67,12 @@
    "karma-jasmine": "^1.0.2",
    "karma-sauce-launcher": "^1.0.0",
    "madge": "^0.6.0",
+    "merge2": "^1.0.2",
    "node-sass": "^3.4.2",
    "protractor": "^3.3.0",
    "protractor-accessibility-plugin": "0.1.1",
+    "resolve-bin": "^0.4.0",
+    "run-sequence": "^1.2.2",
    "sass": "^0.5.0",
    "strip-ansi": "^3.0.0",
    "stylelint": "^6.9.0",
@@ -14,42 +14,12 @@ start_tunnel

 wait_for_tunnel
 if is_lint; then
-  npm run tslint  
-  npm run ci:forbidden-identifiers
-  npm run stylelint
-elif is_circular_deps_check; then
-  # Build first because madge needs the JavaScript output.
-  ng build
-  npm run check-circular-deps
+  $(npm bin)/gulp ci:lint
 elif is_e2e; then
-  # Start up the e2e app. This will take some time.
-  echo "Starting e2e app"
-  MD_APP=e2e ng serve &
-  sleep 1
-
-  # Wait until the dist/ directory is created, indicating that the e2e app is ready.
-  # Use the presence of `button.js` to determine whether the compiled output is ready to be served.
-  echo "Waiting for e2e app to start"
-  while [ ! -f ./dist/components/button/button.js ]; do
-    sleep 2
-    echo -n ".."
-  done
-
-  echo "\nInlining resources"
-  npm run inline-resources
-
-  # Run the e2e tests on the served e2e app.
-  echo "Starting e2e tests"
-  ng e2e
+  $(npm bin)/gulp ci:e2e
 elif is_extract_metadata; then
-  # Run `tsc` first so that the directory structure in dist/ matches what ngc expects.
-  ./node_modules/.bin/tsc -p ./src/demo-app/
-  ./node_modules/.bin/ngc -p ./src/demo-app/
+  $(npm bin)/gulp ci:extract-metadata
 else
-  # Unit tests
-  npm run build
-  npm run inline-resources
-
-  karma start test/karma.conf.js --single-run --no-auto-watch --reporters='dots'
+  $(npm bin)/gulp ci:test
 fi
 teardown_tunnel
@@ -29,7 +29,7 @@ const blocked_statements = [
 ];

 const sourceFolders = ['./src', './e2e'];
-const scopePackages = ['src/core'].concat(glob('src/components/*'));
+const scopePackages = glob('src/lib/*');
 const blockedRegex = new RegExp(blocked_statements.join('|'), 'g');
 const importRegex = /from\s+'(.*)';/g;

@@ -227,4 +227,4 @@ function exec(cmd) {
      }
    });
  });
-}
+}
@@ -9,10 +9,6 @@ is_lint() {
  [[ "$MODE" = lint ]]
 }

-is_circular_deps_check() {
-  [[ "$MODE" = circular_deps ]]
-}
-
 is_extract_metadata() {
  [[ "$MODE" = extract_metadata ]]
 }
@@ -29,29 +29,34 @@ 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, '**', '*');
+function inlineResources(globs) {
+  /**
+   * For every argument, inline the templates and styles under it and write the new file.
+   */
+  for (let pattern of globs) {
+    if (pattern.indexOf('*') < 0) {
+      // Argument is a directory target, add glob patterns to include every files.
+      pattern = path.join(pattern, '**', '*');
+    }
+
+    const files = glob.sync(pattern, {})
+      .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);
+        });
+    });
  }
+}

-  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 => removeModuleIds(content))
-      .then(content => writeFile(filePath, content))
-      .catch(err => {
-        console.error('An error occured: ', err);
-      });
-  });
+if (require.main === module) {
+  inlineResources(process.argv.slice(2));
 }


@@ -98,12 +103,5 @@ function inlineStyle(filePath, content) {
  });
 }

-/**
- * Removes the module ids of the component metadata.
- * Since the templates and styles are now inlined, the module id has become unnecessary and
- * can cause unexpected issues.
- */
-function removeModuleIds(content) {
-  // Match the line feeds as well, because we want to get rid of that line.
-  return content.replace(/^\W+moduleId:\W+module\.id,?[\n|\r]+/gm, '');
-}
+
+module.exports = inlineResources;
@@ -1,28 +0,0 @@
-@echo off
-REM Stages a release by putting everything that should be packaged and released
-REM into the ./deploy folder. This script should be run from the root of the
-REM material2 repo.
-
-REM Make sure you are not running `ng serve` or `ng build --watch` when running this.
-
-
-REM Clear dist/ and deploy/ so that we guarantee there are no stale artifacts.
-rmdir /S /Q dist
-rmdir /S /Q deploy
-
-REM Perform a build with the modified tsconfig.json.
-call ng build
-
-REM Inline the css and html into the component ts files.
-call npm run inline-resources
-
-REM deploy/ serves as a working directory to stage the release.
-mkdir deploy
-
-REM Copy all components/ to deploy/
-xcopy /E dist\components\*.* deploy\
-
-REM Copy the core/ directory directly into ./deploy
-xcopy /E dist\core\*.* deploy\core\
-
-REM To test the packages, simply `npm install` the package directories.
@@ -1,72 +0,0 @@
-#!/usr/bin/env bash
-set -xu
-
-# Stages a release by putting everything that should be packaged and released
-# into the ./deploy folder. This script should be run from the root of the
-# material2 repo.
-
-# Make sure you are not running `ng serve` or `ng build --watch` when running this.
-
-
-# Clear dist/ and deploy/ so that we guarantee there are no stale artifacts.
-rm -rf ./dist
-rm -rf ./deploy
-
-# deploy/ serves as a working directory to stage the release.
-mkdir deploy
-
-# Start off by building normally.
-ng build
-
-# `ng build` does not complete synchronously, so wait a moment for it.
-sleep 2
-
-# We need to remove moduleId for the ngc build. We do this by simply commenting out with a
-# distinguishing marker and then undoing those lines after we've generated the .metadata.json files.
-grep -lr "moduleId:" ./src/ | xargs sed -i 's|moduleId:|//MODULE moduleId:|g'
-
-# Run tsc directly first so that the output directories match what ngc is expecting. This is
-# different from what the CLI will output for *demo-app*, but we don't care about the output for
-# demo-app when we're staging a release (only components/ and core/).
-tsc -p ./src/demo-app
-
-# Now run ngc to generate the .metadata.json files. Our tsconfig is configred with
-# skipTemplateCodegen, so only the metadata files are actually generated.
-./node_modules/.bin/ngc -p ./src/demo-app
-
-# Restore the moduleIds.
-grep -lr "//MODULE " ./src/ | xargs sed -i 's|//MODULE ||g'
-
-# At this point, we have all of our .metadata.json files, which is all we care about from ngc.
-# Temporarily copy them over to deploy/ so we can cut a clean build.
-# Use rsync since we want to preserve the directory structure and `cp --parents` won't work on OSX.
-find ./dist/{components,core} -iname "*.metadata.json" | xargs -i rsync -Rq {} ./deploy/
-
-# Wipe away dist and perform a clean build.
-rm -rf ./dist
-ng build
-
-# Inline the css and html into the component ts files.
-npm run inline-resources
-
-# Move the .metadata.json files back to where we want them.
-(cd ./deploy ; find ./ -iname "*.metadata.json" | xargs -i rsync -Rq {} ../)
-
-# Clear the deploy/ directory again now that we've pulled the metadata out of it.
-rm -rf ./deploy/*
-
-# Copy all components/ to deploy/
-cp -R ./dist/components/* ./deploy/
-
-# Copy the core/ directory directly into ./deploy
-cp -R ./dist/core/ ./deploy/core/
-
-# Remove css files from src/
-find ./src -iname "*.css" | xargs rm
-
-# Remove test files from deploy/
-find ./deploy -iname "*.spec.d.ts" | xargs rm
-find ./deploy -iname "*.spec.js" | xargs rm
-find ./deploy -iname "*.spec.js.map" | xargs rm
-
-# To test the packages, simply `npm install` the package directories.
@@ -1,5 +1,3 @@
-@import 'default-theme';
-@import 'variables';

 .demo-basic {
  padding: 0;
@@ -18,13 +16,6 @@
  width: inherit;
 }

-.demo-transform {
-  transition: color $swift-ease-out-duration $swift-ease-out-timing-function;
-}
-.demo-primary {
-  color: md-color($md-primary);
-}
-
 .demo-card {
  margin: 16px;
 }
@@ -1,7 +0,0 @@
-// 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
-};
@@ -1,21 +1,14 @@
 <!doctype html>
-{{!-- This file is an handlebar file that gets filled at build time. --}}
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Material2</title>
-  <base href=".">
-
-  {{!-- Add live-reload support, only in development. --}}
-  {{#unless environment.production}}
-  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
-  {{/unless}}
+  <base href="/">

  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="core/style/core.css" rel="stylesheet">
-  <link href="main.css" rel="stylesheet">
+  <link href="@angular2-material/core/style/core.css" rel="stylesheet">

  <!-- FontAwesome for md-icon demo. -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
@@ -23,10 +16,10 @@
 <body>
  <demo-app>Loading...</demo-app>

-  {{!-- Add all polyfill scripts. --}}
-  {{#each scripts.polyfills}}
-  <script src="{{.}}"></script>
-  {{/each}}
+  <script src="vendor/core-js/client/core.js"></script>
+  <script src="vendor/systemjs/dist/system.src.js"></script>
+  <script src="vendor/zone.js/dist/zone.js"></script>
+  <script src="vendor/hammerjs/hammer.min.js"></script>

  <script>
    System.import('system-config.js').then(function () {
@@ -1,6 +1,3 @@
-@import 'default-theme';
-@import 'variables';
-
 .demo-basic {
  padding: 0;
 }
@@ -18,13 +15,6 @@
  width: inherit;
 }

-.demo-transform {
-  transition: color $swift-ease-out-duration $swift-ease-out-timing-function;
-}
-.demo-primary {
-  color: md-color($md-primary);
-}
-
 .demo-card {
  margin: 16px;
 }
@@ -1,6 +0,0 @@
-// Main library CSS file that will eventually be delivered as angular2-material.css.
-// Contains CSS rules that users will consume throughout their application as well as rules
-// that are consumed across multiple components (and thus shouldn't be scoped).
-
-@import 'core/overlay/overlay';
-@import 'core/a11y/live-announcer';
@@ -25,12 +25,6 @@ const components = [
  'tooltip',
 ];

-/** 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 = {
@@ -100,4 +94,4 @@ System.config({
 });

 // Apply the user's configuration.
-System.config({ map, packages });
+System.config({ packages });
@@ -3,36 +3,33 @@
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
+    "lib": ["es6", "es2015", "dom"],
    "mapRoot": "/",
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": true,
    "outDir": "../../dist/",
-    "rootDir": "..",
    "sourceMap": true,
    "target": "es5",
-    "inlineSources": true,
    "stripInternal": true,
    "baseUrl": "",
+    "typeRoots": [
+      "../../node_modules/@types",
+      "../../node_modules"
+    ],
    "paths": {
-      "@angular2-material/core/*": [
-        "./core/*",
-        "../core/*"
-      ],
      "@angular2-material/*": [
-        "./components/*",
-        "../components/*"
+        "../../dist/@angular2-material/*"
      ]
-    }
+    },
+    "types": [
+      "hammerjs"
+    ]
  },
  "angularCompilerOptions": {
    "genDir": "../../dist",
    "skipTemplateCodegen": true,
    "debug": true
-  },
-  "files": [
-    "main.ts",
-    "typings.d.ts"
-  ]
+  }
 }
@@ -1,3 +1 @@
-/// <reference path="../../typings/index.d.ts" />
-
 declare var module: { id: string };
@@ -1,19 +1,14 @@
 <!doctype html>
-{{!-- This file is an handlebar file that gets filled at build time. --}}
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Material2</title>
-  <base href=".">
-
-  {{#unless environment.production}}
-  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
-  {{/unless}}
+  <base href="/">

  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="main.css" rel="stylesheet">
+  <link href="@angular2-material/core/style/core.css" rel="stylesheet">

  <!-- FontAwesome for md-icon demo. -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
@@ -21,9 +16,10 @@
 <body>
  <e2e-app>Loading...</e2e-app>

-  {{#each scripts.polyfills}}
-  <script src="{{.}}"></script>
-  {{/each}}
+  <script src="vendor/core-js/client/core.js"></script>
+  <script src="vendor/systemjs/dist/system.src.js"></script>
+  <script src="vendor/zone.js/dist/zone.js"></script>
+  <script src="vendor/hammerjs/hammer.min.js"></script>

  <script>
    System.import('system-config.js').then(function () {
@@ -1,2 +0,0 @@
-@import 'core/overlay/overlay';
-@import 'core/a11y/live-announcer';
@@ -2,9 +2,6 @@
 * User Configuration.
 **********************************************************************************************/

-System.defaultJSExtensions = true;
-
-
 const components = [
  'all',
  'button',
@@ -29,18 +26,16 @@ const components = [
 ];


-/** 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 = {
  '@angular2-material/core': {
    format: 'cjs',
    defaultExtension: 'js'
+  },
+  // Set the default extension for the root package, because otherwise the demo-app can't
+  // be built within the production mode. Due to missing file extensions.
+  '.': {
+    defaultExtension: 'js'
  }
 };
 components.forEach(name => {
@@ -50,6 +45,7 @@ components.forEach(name => {
  };
 });

+
 ////////////////////////////////////////////////////////////////////////////////////////////////
 /***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
@@ -58,9 +54,9 @@ const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
-  '@angular/forms',
  '@angular/compiler',
  '@angular/http',
+  '@angular/forms',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
@@ -69,7 +65,13 @@ const barrels: string[] = [
  'rxjs',

  // App specific barrels.
-  'e2e-app',
+  'demo-app',
+  'button-toggle',
+  'gestures',
+  'live-announcer',
+  'portal',
+  'overlay',
+  ...components
  /** @cli-barrel */
 ];

@@ -92,4 +94,4 @@ System.config({
 });

 // Apply the user's configuration.
-System.config({ map, packages });
+System.config({ packages });
@@ -3,31 +3,33 @@
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
+    "lib": ["es6", "es2015", "dom"],
    "mapRoot": "",
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": true,
    "outDir": "../../dist/",
-    "rootDir": "..",
    "sourceMap": true,
    "target": "es5",
-    "inlineSources": true,
    "stripInternal": true,
    "baseUrl": "",
+    "typeRoots": [
+      "../../node_modules/@types",
+      "../../node_modules"
+    ],
    "paths": {
-      "@angular2-material/core/*": [
-        "./core/*",
-        "../core/*"
-      ],
      "@angular2-material/*": [
-        "./components/*",
-        "../components/*"
+        "../../dist/@angular2-material/*"
      ]
-    }
+    },
+    "types": [
+      "hammerjs"
+    ]
  },
-  "files": [
-    "main.ts",
-    "typings.d.ts"
-  ]
+  "angularCompilerOptions": {
+    "genDir": "../../dist",
+    "skipTemplateCodegen": true,
+    "debug": true
+  }
 }
@@ -1,4 +1 @@
-/// <reference path="../../typings/index.d.ts" />
-
 declare var module: { id: string };
-
@@ -132,9 +132,11 @@ export class MdButtonToggleGroup implements ControlValueAccessor {
  }

  private _updateButtonToggleNames(): void {
-    (this._buttonToggles || []).forEach((toggle) => {
-      toggle.name = this._name;
-    });
+    if (this._buttonToggles) {
+      this._buttonToggles.forEach((toggle) => {
+        toggle.name = this._name;
+      });
+    }
  }

  // TODO: Refactor into shared code with radio.
@@ -209,7 +211,6 @@ export class MdButtonToggleGroupMultiple {
 }

@Component({
-  moduleId: module.id,
  selector: 'md-button-toggle',
  templateUrl: 'button-toggle.html',
  styleUrls: ['button-toggle.css'],
@@ -17,7 +17,6 @@ import {MdRippleModule} from '@angular2-material/core/ripple/ripple';


@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'],
@@ -105,7 +104,6 @@ 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: {
@@ -0,0 +1 @@
+export * from './button';
@@ -21,7 +21,6 @@ it also provides a number of preset styles for common card sections, including:
 */

@Component({
-  moduleId: module.id,
  selector: 'md-card',
  templateUrl: 'card.html',
  styleUrls: ['card.css'],
@@ -46,7 +45,6 @@ TODO(kara): update link to demo site when it exists
 */

@Component({
-  moduleId: module.id,
  selector: 'md-card-header',
  templateUrl: 'card-header.html',
  encapsulation: ViewEncapsulation.None,
@@ -66,7 +64,6 @@ TODO(kara): update link to demo site when it exists
 */

@Component({
-  moduleId: module.id,
  selector: 'md-card-title-group',
  templateUrl: 'card-title-group.html',
  encapsulation: ViewEncapsulation.None,
@@ -56,7 +56,6 @@ export class MdCheckboxChange {
 * See: https://www.google.com/design/spec/components/selection-controls.html
 */
@Component({
-  moduleId: module.id,
  selector: 'md-checkbox',
  templateUrl: 'checkbox.html',
  styleUrls: ['checkbox.css'],
--- a/Show More
+++ b/Show More