angular · devversion · Mar 18, 2017 · Mar 21, 2017 · Mar 22, 2017 · Mar 22, 2017
diff --git a/gulpfile.js b/gulpfile.js
@@ -8,7 +8,7 @@ const path = require('path');
 
 // Register TS compilation.
 require('ts-node').register({
-  project: path.join(__dirname, 'tools/gulp')
+  project: path.join(__dirname, 'tools/gulp/tsconfig.json')
 });
 
 require('./tools/gulp/gulpfile');
diff --git a/package.json b/package.json
@@ -25,22 +25,23 @@
     "node": ">= 5.4.1 < 7"
   },
   "dependencies": {
-    "@angular/common": "^2.3.0",
-    "@angular/compiler": "^2.3.0",
-    "@angular/core": "^2.3.0",
-    "@angular/forms": "^2.3.0",
-    "@angular/http": "^2.3.0",
-    "@angular/platform-browser": "^2.3.0",
+    "@angular/animations": "^4.0.0-rc.5",
+    "@angular/common": "^4.0.0-rc.5",
+    "@angular/compiler": "^4.0.0-rc.5",
+    "@angular/core": "^4.0.0-rc.5",
+    "@angular/forms": "^4.0.0-rc.5",
+    "@angular/http": "^4.0.0-rc.5",
+    "@angular/platform-browser": "^4.0.0-rc.5",
     "core-js": "^2.4.1",
     "rxjs": "^5.0.1",
     "systemjs": "0.19.43",
-    "zone.js": "^0.7.2"
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^2.3.0",
-    "@angular/platform-browser-dynamic": "^2.3.0",
-    "@angular/platform-server": "^2.3.0",
-    "@angular/router": "^3.3.0",
+    "@angular/compiler-cli": "^4.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "^4.0.0-rc.5",
+    "@angular/platform-server": "^4.0.0-rc.5",
+    "@angular/router": "^4.0.0-rc.5",
     "@types/chalk": "^0.4.31",
     "@types/fs-extra": "0.0.37",
     "@types/glob": "^5.0.30",
@@ -65,7 +66,6 @@
     "glob": "^7.1.1",
     "google-cloud": "^0.48.0",
     "gulp": "^3.9.1",
-    "gulp-better-rollup": "^1.0.2",
     "gulp-clean": "^0.3.2",
     "gulp-clean-css": "^3.0.3",
     "gulp-cli": "^1.2.2",
@@ -82,6 +82,7 @@
     "gulp-transform": "^1.1.0",
     "hammerjs": "^2.0.8",
     "highlight.js": "^9.9.0",
+    "http-rewrite-middleware": "^0.1.6",
     "image-diff": "^1.6.3",
     "jasmine-core": "^2.5.2",
     "karma": "^1.5.0",
@@ -98,16 +99,17 @@
     "node-sass": "^4.5.0",
     "protractor": "^5.1.1",
     "resolve-bin": "^0.4.0",
+    "rollup": "^0.41.6",
     "run-sequence": "^1.2.2",
     "sass": "^0.5.0",
     "selenium-webdriver": "^3.1.0",
     "stylelint": "^7.8.0",
     "travis-after-modes": "0.0.7",
-    "ts-node": "^2.1.0",
+    "ts-node": "^3.0.0",
     "tslint": "^4.4.2",
     "tslint-no-unused-var": "0.0.6",
-    "typescript": "~2.0.10",
-    "uglify-js": "^2.8.7",
+    "typescript": "~2.2.1",
+    "uglify-js": "^2.8.14",
     "web-animations-js": "^2.2.2"
   }
 }
diff --git a/src/demo-app/dialog/dialog-demo.html b/src/demo-app/dialog/dialog-demo.html
@@ -67,6 +67,6 @@ <h2>Other options</h2>
 
 <p>Last close result: {{lastCloseResult}}</p>
 
-<template>
+<ng-template>
   I'm a template dialog. I've been opened {{numTemplateOpens}} times!
-</template>
+</ng-template>
diff --git a/src/demo-app/index.html b/src/demo-app/index.html
@@ -8,19 +8,19 @@
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
+  <link href="dist/packages/material/core/theming/prebuilt/indigo-pink.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">
 </head>
 <body>
   <demo-app>Loading...</demo-app>
 
-  <script src="vendor/core-js/client/core.js"></script>
-  <script src="vendor/web-animations-js/web-animations.min.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 src="node_modules/core-js/client/core.js"></script>
+  <script src="node_modules/web-animations-js/web-animations.min.js"></script>
+  <script src="node_modules/systemjs/dist/system.src.js"></script>
+  <script src="node_modules/zone.js/dist/zone.js"></script>
+  <script src="node_modules/hammerjs/hammer.min.js"></script>
 
   <script>
     System.import('system-config.js').then(function () {

diff --git a/src/demo-app/overlay/overlay-demo.html b/src/demo-app/overlay/overlay-demo.html
@@ -15,16 +15,16 @@
   Open menu
 </button>
 
-<template cdk-connected-overlay [origin]="trigger" [width]="500" hasBackdrop [open]="isMenuOpen"
+<ng-template cdk-connected-overlay [origin]="trigger" [width]="500" hasBackdrop [open]="isMenuOpen"
   (backdropClick)="isMenuOpen=false">
   <div style="background-color: mediumpurple" >
     This is the menu panel.
   </div>
-</template>
+</ng-template>
 
 <!-- Template to load into an overlay. -->
-<template cdk-portal>
+<ng-template cdk-portal>
   <p class="demo-fusilli"> Fusilli </p>
-</template>
+</ng-template>
 
 <button (click)="openPanelWithBackdrop()">Backdrop panel</button>
diff --git a/src/demo-app/portal/portal-demo.html b/src/demo-app/portal/portal-demo.html
@@ -1,6 +1,6 @@
 <h2> The portal host is here: </h2>
 <div class="demo-portal-host">
-  <template [cdkPortalHost]="selectedPortal"></template>
+  <ng-template [cdkPortalHost]="selectedPortal"></ng-template>
 </div>
 
 <button type="button" (click)="selectedPortal = programmingJoke">
@@ -15,15 +15,15 @@ <h2> The portal host is here: </h2>
   Science joke
 </button>
 
-<!-- Template vars on <template> elements can't be accessed _in_ the template because Angular
+<!-- Template vars on <ng-template> elements can't be accessed _in_ the template because Angular
     doesn't support grabbing the instance / TemplateRef this way because the variable may be
     referring to something *in* the template (such as #item in ngFor). As such, the component
     has to use @ViewChild / @ViewChildren to get these references.
     See https://github.com/angular/angular/issues/7158 -->
-<template cdk-portal>
+<ng-template cdk-portal>
   <p> - Why don't jokes work in octal?</p>
   <p> - Because 7 10 11.</p>
-</template>
+</ng-template>
 
 <div *cdk-portal>
  <p> - Did you hear about this year's Fibonacci Conference? </p>

diff --git a/src/demo-app/system-config.ts b/src/demo-app/system-config.ts
@@ -3,21 +3,28 @@ declare const System: any;
 
 // Apply the CLI SystemJS configuration.
 System.config({
+  paths: {
+    'node:*': 'node_modules/*',
+  },
   map: {
-    'rxjs': 'vendor/rxjs',
+    'rxjs': 'node:rxjs',
     'main': 'main.js',
 
     // Angular specific mappings.
-    '@angular/core': 'vendor/@angular/core/bundles/core.umd.js',
-    '@angular/common': 'vendor/@angular/common/bundles/common.umd.js',
-    '@angular/compiler': 'vendor/@angular/compiler/bundles/compiler.umd.js',
-    '@angular/http': 'vendor/@angular/http/bundles/http.umd.js',
-    '@angular/forms': 'vendor/@angular/forms/bundles/forms.umd.js',
-    '@angular/router': 'vendor/@angular/router/bundles/router.umd.js',
-    '@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
+    '@angular/core': 'node:@angular/core/bundles/core.umd.js',
+    '@angular/common': 'node:@angular/common/bundles/common.umd.js',
+    '@angular/compiler': 'node:@angular/compiler/bundles/compiler.umd.js',
+    '@angular/http': 'node:@angular/http/bundles/http.umd.js',
+    '@angular/forms': 'node:@angular/forms/bundles/forms.umd.js',
+    '@angular/router': 'node:@angular/router/bundles/router.umd.js',
+    '@angular/animations': 'node:@angular/animations/bundles/animations.umd.js',
+    '@angular/animations/browser': 'node:@angular/animations/bundles/animations-browser.umd.js',
+    '@angular/platform-browser': 'node:@angular/platform-browser/bundles/platform-browser.umd.js',
+    '@angular/platform-browser/animations':
+      'node:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
     '@angular/platform-browser-dynamic':
-      'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/material': '@angular/material/bundles/material.umd.js'
+      'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+    '@angular/material': 'dist/bundles/material.umd.js'
   },
   packages: {
     // Thirdparty barrels.

diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html
@@ -48,7 +48,7 @@ <h1>Tab Group Demo - Dynamic Tabs</h1>
 
   <md-tab-group class="demo-tab-group" dynamicHeight [(selectedIndex)]="activeTabIndex">
     <md-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
-      <template md-tab-label>{{tab.label}}</template>
+      <ng-template md-tab-label>{{tab.label}}</ng-template>
       <div class="tab-content">
         {{tab.content}}
         <br>
@@ -100,7 +100,7 @@ <h1>Tab Group Demo - Dynamic Height</h1>
 
 <md-tab-group class="demo-tab-group" dynamicHeight>
   <md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
-    <template md-tab-label>{{tab.label}}</template>
+    <ng-template md-tab-label>{{tab.label}}</ng-template>
     <div class="tab-content">
       {{tab.content}}
       <br>
@@ -146,7 +146,7 @@ <h1>Tab Group Demo - Fixed Height</h1>
 
 <md-tab-group class="demo-tab-group" style="height: 220px">
   <md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
-    <template md-tab-label>{{tab.label}}</template>
+    <ng-template md-tab-label>{{tab.label}}</ng-template>
     <div class="tab-content">
       {{tab.content}}
       <br>
@@ -191,7 +191,7 @@ <h1>Stretched Tabs</h1>
 
 <md-tab-group class="demo-tab-group" style="height: 200px" md-stretch-tabs>
   <md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
-    <template md-tab-label>{{tab.label}}</template>
+    <ng-template md-tab-label>{{tab.label}}</ng-template>
     <div class="tab-content">
       {{tab.content}}
     </div>
@@ -203,7 +203,7 @@ <h1>Async Tabs</h1>
 
 <md-tab-group class="demo-tab-group">
   <md-tab *ngFor="let tab of asyncTabs | async; let i = index" [disabled]="i == 1">
-    <template md-tab-label>{{tab.label}}</template>
+    <ng-template md-tab-label>{{tab.label}}</ng-template>
 
     <div class="tab-content">
       {{tab.content}}

diff --git a/src/demo-app/tsconfig-aot.json b/src/demo-app/tsconfig-aot.json
@@ -1,22 +1,10 @@
 /* Config file for the Angular Compiler. Paths need to be relative to the dist folder. */
 {
+  "extends": "./tsconfig",
   "compilerOptions": {
-    "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": ["es6", "es2015", "dom"],
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "noImplicitAny": true,
-    "target": "es5",
-    "baseUrl": "",
-    "typeRoots": [
-      "../node_modules/@types/!(node)"
-    ],
     "paths": {
-      "@angular/material": [
-        "./@angular/material"
-      ]
+      "@angular/material": ["./material"]
     }
   },
   "files": [
@@ -25,7 +13,6 @@
     "./main-aot.ts"
   ],
   "angularCompilerOptions": {
-    "skipTemplateCodegen": false,
-    "debug": true
+    "skipTemplateCodegen": false
   }
 }
diff --git a/src/demo-app/tsconfig.json b/src/demo-app/tsconfig.json
@@ -8,7 +8,7 @@
     "moduleResolution": "node",
     "noEmitOnError": true,
     "noImplicitAny": true,
-    "outDir": "../../dist/",
+    "outDir": "../../dist/packages/demo-app",
     "sourceMap": true,
     "target": "es5",
     "stripInternal": false,
@@ -18,7 +18,7 @@
     ],
     "paths": {
       "@angular/material": [
-        "../../dist/@angular/material"
+        "../../dist/packages/material"
       ]
     }
   },
@@ -27,10 +27,5 @@
     "./demo-app-module.ts",
     "./system-config.ts",
     "./main.ts"
-  ],
-  "angularCompilerOptions": {
-    "genDir": "../../dist",
-    "skipTemplateCodegen": true,
-    "debug": true
-  }
+  ]
 }
diff --git a/src/e2e-app/dialog/dialog-e2e.html b/src/e2e-app/dialog/dialog-e2e.html
@@ -2,4 +2,4 @@
 <button id="disabled" (click)="openDisabled()">DISABLED</button>
 <button id="template" (click)="openTemplate()">TEMPLATE</button>
 
-<template><div class="my-template-dialog">my template dialog</div></template>
+<ng-template><div class="my-template-dialog">my template dialog</div></ng-template>
diff --git a/src/e2e-app/e2e-app-module.ts b/src/e2e-app/e2e-app-module.ts
@@ -1,5 +1,6 @@
 import {NgModule} from '@angular/core';
-import {BrowserModule, AnimationDriver} from '@angular/platform-browser';
+import {BrowserModule} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';
 import {SimpleCheckboxes} from './checkbox/checkbox-e2e';
 import {E2EApp, Home} from './e2e-app/e2e-app';
@@ -23,6 +24,7 @@ import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
     BrowserModule,
     RouterModule.forRoot(E2E_APP_ROUTES),
     MaterialModule.forRoot(),
+    NoopAnimationsModule,
   ],
   declarations: [
     E2EApp,
@@ -45,7 +47,6 @@ import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
   ],
   bootstrap: [E2EApp],
   providers: [
-    {provide: AnimationDriver, useValue: AnimationDriver.NOOP},
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer}
   ],
   entryComponents: [TestDialog, TestDialogFullScreen]

diff --git a/src/e2e-app/index.html b/src/e2e-app/index.html
@@ -8,19 +8,19 @@
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
+  <link href="dist/packages/material/core/theming/prebuilt/indigo-pink.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">
 </head>
 <body>
   <e2e-app>Loading...</e2e-app>
 
-  <script src="vendor/core-js/client/core.js"></script>
-  <script src="vendor/web-animations-js/web-animations.min.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 src="node_modules/core-js/client/core.js"></script>
+  <script src="node_modules/web-animations-js/web-animations.min.js"></script>
+  <script src="node_modules/systemjs/dist/system.src.js"></script>
+  <script src="node_modules/zone.js/dist/zone.js"></script>
+  <script src="node_modules/hammerjs/hammer.min.js"></script>
 
   <script>
     System.import('system-config.js').then(function () {