From 7098e4d121e5801631d08b92e8fec718636fa5b7 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 14 Mar 2017 23:52:59 +0100
Subject: [PATCH] feat: angular 4 compatibility

* Bumps the required Angular version to 4 and TypeScript to 2.1.6.
* Fixes deprecation warnings for `<template>` usages.
* Fixes any unit and e2e test failures.
* Includes the new animations module and switches any components that use animations to it.
* Fixes issues with the various test apps.

Fixes #3357.
Fixes #3336.
FIxes #3301.
---
 package.json                                  | 23 ++---
 src/demo-app/dialog/dialog-demo.html          |  4 +-
 src/demo-app/overlay/overlay-demo.html        |  8 +-
 src/demo-app/portal/portal-demo.html          |  8 +-
 src/demo-app/system-config.ts                 |  3 +
 src/demo-app/tabs/tabs-demo.html              | 10 +--
 src/e2e-app/dialog/dialog-e2e.html            |  2 +-
 src/e2e-app/e2e-app-module.ts                 |  5 +-
 src/e2e-app/system-config.ts                  |  3 +
 src/e2e-app/tabs/tabs-e2e.html                |  6 +-
 src/lib/autocomplete/autocomplete.html        |  4 +-
 src/lib/checkbox/checkbox.spec.ts             | 71 ++++++++-------
 src/lib/checkbox/checkbox.ts                  |  6 +-
 .../core/overlay/overlay-directives.spec.ts   |  4 +-
 src/lib/core/overlay/overlay.spec.ts          |  2 +-
 src/lib/core/portal/README.md                 |  8 +-
 src/lib/core/portal/portal-directives.ts      |  6 +-
 src/lib/core/portal/portal.spec.ts            | 12 +--
 src/lib/dialog/dialog-container.html          |  2 +-
 src/lib/dialog/dialog-container.ts            | 12 +--
 src/lib/dialog/dialog.spec.ts                 |  7 +-
 src/lib/dialog/index.ts                       |  2 +
 src/lib/input/input-container.spec.ts         |  2 +-
 src/lib/menu/index.ts                         |  9 +-
 src/lib/menu/menu-animations.ts               | 10 +--
 src/lib/menu/menu.html                        |  4 +-
 src/lib/menu/menu.spec.ts                     | 15 ++--
 src/lib/select/index.ts                       |  9 +-
 src/lib/select/select-animations.ts           | 10 +--
 src/lib/select/select.html                    |  4 +-
 src/lib/select/select.spec.ts                 | 87 ++++++++++---------
 src/lib/slide-toggle/slide-toggle.spec.ts     |  2 +-
 src/lib/snack-bar/index.ts                    |  9 +-
 src/lib/snack-bar/snack-bar-container.html    |  2 +-
 src/lib/snack-bar/snack-bar-container.ts      | 16 ++--
 src/lib/snack-bar/snack-bar.spec.ts           |  5 +-
 src/lib/system-config-spec.ts                 |  3 +
 src/lib/tabs/index.ts                         |  9 +-
 src/lib/tabs/tab-body.html                    |  2 +-
 src/lib/tabs/tab-body.spec.ts                 |  9 +-
 src/lib/tabs/tab-body.ts                      | 18 ++--
 src/lib/tabs/tab-group.html                   |  8 +-
 src/lib/tabs/tab-group.spec.ts                | 16 ++--
 src/lib/tabs/tab.html                         |  2 +-
 src/lib/tabs/tab.ts                           |  2 +-
 src/lib/tabs/tabs.md                          | 18 ++--
 src/lib/tooltip/index.ts                      |  3 +-
 src/lib/tooltip/tooltip.spec.ts               |  9 +-
 src/lib/tooltip/tooltip.ts                    | 16 ++--
 tools/gulp/tasks/components.ts                |  2 +
 50 files changed, 290 insertions(+), 219 deletions(-)

diff --git a/package.json b/package.json
index 9c3e7b764237..533682c33471 100644
--- 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.3",
+    "@angular/common": "^4.0.0-rc.3",
+    "@angular/compiler": "^4.0.0-rc.3",
+    "@angular/core": "^4.0.0-rc.3",
+    "@angular/forms": "^4.0.0-rc.3",
+    "@angular/http": "^4.0.0-rc.3",
+    "@angular/platform-browser": "^4.0.0-rc.3",
     "core-js": "^2.4.1",
     "rxjs": "^5.0.1",
     "systemjs": "0.19.43",
     "zone.js": "^0.7.2"
   },
   "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.3",
+    "@angular/platform-browser-dynamic": "^4.0.0-rc.3",
+    "@angular/platform-server": "^4.0.0-rc.3",
+    "@angular/router": "^4.0.0-rc.3",
     "@types/fs-extra": "0.0.37",
     "@types/glob": "^5.0.30",
     "@types/gulp": "^3.8.32",
@@ -104,7 +105,7 @@
     "ts-node": "^2.1.0",
     "tslint": "^4.4.2",
     "tslint-no-unused-var": "0.0.6",
-    "typescript": "~2.0.10",
+    "typescript": "~2.1.6",
     "uglify-js": "^2.8.7",
     "web-animations-js": "^2.2.2"
   }
diff --git a/src/demo-app/dialog/dialog-demo.html b/src/demo-app/dialog/dialog-demo.html
index ec05d8f1ae04..45e7ba5925ca 100644
--- 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/overlay/overlay-demo.html b/src/demo-app/overlay/overlay-demo.html
index 91af08845104..c431cffc15fc 100644
--- 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
index 95d29a441deb..ee17457ba788 100644
--- 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
index 58a48554a870..d3630211da88 100644
--- a/src/demo-app/system-config.ts
+++ b/src/demo-app/system-config.ts
@@ -14,7 +14,10 @@ System.config({
     '@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/animations': 'vendor/@angular/animations/bundles/animations.umd.js',
     '@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
+    '@angular/platform-browser/animations':
+      'vendor/@angular/platform-browser/bundles/platform-browser-animations.umd',
     '@angular/platform-browser-dynamic':
       'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
     '@angular/material': '@angular/material/bundles/material.umd.js'
diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html
index 902009497c67..3e7ead185e3b 100644
--- 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/e2e-app/dialog/dialog-e2e.html b/src/e2e-app/dialog/dialog-e2e.html
index b66e8dfd8c51..95b8dc4e8dc6 100644
--- 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
index 091698206b8f..32b6df2bc5c5 100644
--- 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/system-config.ts b/src/e2e-app/system-config.ts
index e5615524cb8e..b249677bd2d2 100644
--- a/src/e2e-app/system-config.ts
+++ b/src/e2e-app/system-config.ts
@@ -14,6 +14,9 @@ System.config({
     '@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/animations': 'vendor/@angular/animations/bundles/animations.umd.js',
+    '@angular/platform-browser/animations':
+      'vendor/@angular/platform-browser/bundles/platform-browser-animations.umd',
     '@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
     '@angular/platform-browser/testing':
       'vendor/@angular/platform-browser/bundles/platform-browser-testing.umd.js',
diff --git a/src/e2e-app/tabs/tabs-e2e.html b/src/e2e-app/tabs/tabs-e2e.html
index 20e03126c0a5..9e9431af0cc0 100644
--- a/src/e2e-app/tabs/tabs-e2e.html
+++ b/src/e2e-app/tabs/tabs-e2e.html
@@ -1,15 +1,15 @@
 <section>
   <md-tab-group>
     <md-tab>
-      <template md-tab-label>One</template>
+      <ng-template md-tab-label>One</ng-template>
       First tab's content
     </md-tab>
     <md-tab>
-      <template md-tab-label>Two</template>
+      <ng-template md-tab-label>Two</ng-template>
       Second tab's content
     </md-tab>
     <md-tab>
-      <template md-tab-label>Three</template>
+      <ng-template md-tab-label>Three</ng-template>
       Third tab's content
     </md-tab>
   </md-tab-group>
diff --git a/src/lib/autocomplete/autocomplete.html b/src/lib/autocomplete/autocomplete.html
index cd94ceeb7340..41227961fe5c 100644
--- a/src/lib/autocomplete/autocomplete.html
+++ b/src/lib/autocomplete/autocomplete.html
@@ -1,5 +1,5 @@
-<template>
+<ng-template>
   <div class="mat-autocomplete-panel" role="listbox" [id]="id" [ngClass]="_getClassList()" #panel>
     <ng-content></ng-content>
   </div>
-</template>
\ No newline at end of file
+</ng-template>
diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts
index 4f75c88051b0..b5a1b5a4f053 100644
--- a/src/lib/checkbox/checkbox.spec.ts
+++ b/src/lib/checkbox/checkbox.spec.ts
@@ -113,7 +113,7 @@ describe('MdCheckbox', () => {
       expect(inputElement.indeterminate).toBe(false);
     });
 
-    it('should set indeterminate to false when set checked', () => {
+    it('should set indeterminate to false when set checked', async(() => {
       testComponent.isIndeterminate = true;
       fixture.detectChanges();
 
@@ -124,27 +124,34 @@ describe('MdCheckbox', () => {
       testComponent.isChecked = true;
       fixture.detectChanges();
 
-      expect(checkboxInstance.checked).toBe(true);
-      expect(inputElement.indeterminate).toBe(false);
-      expect(inputElement.checked).toBe(true);
-      expect(testComponent.isIndeterminate).toBe(false);
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(checkboxInstance.checked).toBe(true);
+        expect(inputElement.indeterminate).toBe(false);
+        expect(inputElement.checked).toBe(true);
+        expect(testComponent.isIndeterminate).toBe(false);
 
-      testComponent.isIndeterminate = true;
-      fixture.detectChanges();
+        testComponent.isIndeterminate = true;
+        fixture.detectChanges();
 
-      expect(checkboxInstance.indeterminate).toBe(true);
-      expect(inputElement.indeterminate).toBe(true);
-      expect(inputElement.checked).toBe(true);
-      expect(testComponent.isIndeterminate).toBe(true);
+        expect(checkboxInstance.indeterminate).toBe(true);
+        expect(inputElement.indeterminate).toBe(true);
+        expect(inputElement.checked).toBe(true);
+        expect(testComponent.isIndeterminate).toBe(true);
 
-      testComponent.isChecked = false;
-      fixture.detectChanges();
+        testComponent.isChecked = false;
+        fixture.detectChanges();
 
-      expect(checkboxInstance.checked).toBe(false);
-      expect(inputElement.indeterminate).toBe(false);
-      expect(inputElement.checked).toBe(false);
-      expect(testComponent.isIndeterminate).toBe(false);
-    });
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+          expect(checkboxInstance.checked).toBe(false);
+          expect(inputElement.indeterminate).toBe(false);
+          expect(inputElement.checked).toBe(false);
+          expect(testComponent.isIndeterminate).toBe(false);
+        });
+      });
+
+    }));
 
     it('should change native element checked when check programmatically', () => {
       expect(inputElement.checked).toBe(false);
@@ -169,7 +176,7 @@ describe('MdCheckbox', () => {
       expect(checkboxInstance.checked).toBe(false);
     });
 
-    it('should change from indeterminate to checked on click', () => {
+    it('should change from indeterminate to checked on click', async(() => {
       testComponent.isChecked = false;
       testComponent.isIndeterminate = true;
       fixture.detectChanges();
@@ -179,15 +186,17 @@ describe('MdCheckbox', () => {
 
       checkboxInstance._onInputClick(<Event>{stopPropagation: () => {}});
 
-      expect(checkboxInstance.checked).toBe(true);
-      expect(checkboxInstance.indeterminate).toBe(false);
+      fixture.whenStable().then(() => {
+        expect(checkboxInstance.checked).toBe(true);
+        expect(checkboxInstance.indeterminate).toBe(false);
 
-      checkboxInstance._onInputClick(<Event>{stopPropagation: () => {}});
-      fixture.detectChanges();
+        checkboxInstance._onInputClick(<Event>{stopPropagation: () => {}});
+        fixture.detectChanges();
 
-      expect(checkboxInstance.checked).toBe(false);
-      expect(checkboxInstance.indeterminate).toBe(false);
-    });
+        expect(checkboxInstance.checked).toBe(false);
+        expect(checkboxInstance.indeterminate).toBe(false);
+      });
+    }));
 
     it('should add and remove disabled state', () => {
       expect(checkboxInstance.disabled).toBe(false);
@@ -219,16 +228,18 @@ describe('MdCheckbox', () => {
       expect(checkboxInstance.checked).toBe(false);
     });
 
-    it('should overwrite indeterminate state when checked is re-set', () => {
+    it('should overwrite indeterminate state when checked is re-set', async(() => {
       testComponent.isIndeterminate = true;
       fixture.detectChanges();
 
       testComponent.isChecked = true;
       fixture.detectChanges();
 
-      expect(checkboxInstance.checked).toBe(true);
-      expect(checkboxInstance.indeterminate).toBe(false);
-    });
+      fixture.whenStable().then(() => {
+        expect(checkboxInstance.checked).toBe(true);
+        expect(checkboxInstance.indeterminate).toBe(false);
+      });
+    }));
 
     it('should preserve the user-provided id', () => {
       expect(checkboxNativeElement.id).toBe('simple-check');
diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts
index eac2c0131768..00b8a804de62 100644
--- a/src/lib/checkbox/checkbox.ts
+++ b/src/lib/checkbox/checkbox.ts
@@ -225,8 +225,10 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro
   set checked(checked: boolean) {
     if (checked != this.checked) {
       if (this._indeterminate) {
-        this._indeterminate = false;
-        this.indeterminateChange.emit(this._indeterminate);
+        Promise.resolve().then(() => {
+          this._indeterminate = false;
+          this.indeterminateChange.emit(this._indeterminate);
+        });
       }
       this._checked = checked;
       this._changeDetectorRef.markForCheck();
diff --git a/src/lib/core/overlay/overlay-directives.spec.ts b/src/lib/core/overlay/overlay-directives.spec.ts
index 26368a112a7b..3af7f42e7911 100644
--- a/src/lib/core/overlay/overlay-directives.spec.ts
+++ b/src/lib/core/overlay/overlay-directives.spec.ts
@@ -268,14 +268,14 @@ describe('Overlay directives', () => {
 @Component({
   template: `
   <button cdk-overlay-origin #trigger="cdkOverlayOrigin">Toggle menu</button>
-  <template cdk-connected-overlay [open]="isOpen" [width]="width" [height]="height"
+  <ng-template cdk-connected-overlay [open]="isOpen" [width]="width" [height]="height"
             [origin]="trigger"
             [hasBackdrop]="hasBackdrop" backdropClass="mat-test-class"
             (backdropClick)="backdropClicked=true" [offsetX]="offsetX" [offsetY]="offsetY"
             (positionChange)="positionChangeHandler($event)" (attach)="attachHandler()"
             (detach)="detachHandler()" [minWidth]="minWidth" [minHeight]="minHeight">
     <p>Menu content</p>
-  </template>`,
+  </ng-template>`,
 })
 class ConnectedOverlayDirectiveTest {
   isOpen = false;
diff --git a/src/lib/core/overlay/overlay.spec.ts b/src/lib/core/overlay/overlay.spec.ts
index 328809e4d272..46ebcb18454b 100644
--- a/src/lib/core/overlay/overlay.spec.ts
+++ b/src/lib/core/overlay/overlay.spec.ts
@@ -307,7 +307,7 @@ class PizzaMsg { }
 
 
 /** Test-bed component that contains a TempatePortal and an ElementRef. */
-@Component({template: `<template cdk-portal>Cake</template>`})
+@Component({template: `<ng-template cdk-portal>Cake</ng-template>`})
 class TestComponentWithTemplatePortals {
   @ViewChild(TemplatePortalDirective) templatePortal: TemplatePortalDirective;
 
diff --git a/src/lib/core/portal/README.md b/src/lib/core/portal/README.md
index c8c1b3b5cfb1..214823de6b3e 100644
--- a/src/lib/core/portal/README.md
+++ b/src/lib/core/portal/README.md
@@ -34,13 +34,13 @@ be built upon.
 
 
 ##### `TemplatePortalDirective`
-Used to get a portal from a `<template>`. `TemplatePortalDirectives` *is* a `Portal`.
+Used to get a portal from a `<ng-template>`. `TemplatePortalDirectives` *is* a `Portal`.
 
 Usage:
 ```html
-<template cdk-portal>
+<ng-template cdk-portal>
   <p>The content of this template is captured by the portal.</p>
-</template>
+</ng-template>
 
 <!-- OR -->
 
@@ -68,5 +68,5 @@ Used to add a portal host to a template. `PortalHostDirective` *is* a `PortalHos
 Usage:
 ```html
 <!-- Attaches the `userSettingsPortal` from the previous example. -->
-<template [cdk-portalHost]="userSettingsPortal"></template>
+<ng-template [cdk-portalHost]="userSettingsPortal"></ng-template>
 ```
diff --git a/src/lib/core/portal/portal-directives.ts b/src/lib/core/portal/portal-directives.ts
index 1502239211d6..e11dd9129c3c 100644
--- a/src/lib/core/portal/portal-directives.ts
+++ b/src/lib/core/portal/portal-directives.ts
@@ -17,9 +17,9 @@ import {Portal, TemplatePortal, ComponentPortal, BasePortalHost} from './portal'
  * the directive instance itself can be attached to a host, enabling declarative use of portals.
  *
  * Usage:
- * <template portal #greeting>
+ * <ng-template portal #greeting>
  *   <p> Hello {{name}} </p>
- * </template>
+ * </ng-template>
  */
 @Directive({
   selector: '[cdk-portal], [portal]',
@@ -37,7 +37,7 @@ export class TemplatePortalDirective extends TemplatePortal {
  * directly attached to it, enabling declarative use.
  *
  * Usage:
- * <template [cdkPortalHost]="greeting"></template>
+ * <ng-template [cdkPortalHost]="greeting"></ng-template>
  */
 @Directive({
   selector: '[cdkPortalHost], [portalHost]',
diff --git a/src/lib/core/portal/portal.spec.ts b/src/lib/core/portal/portal.spec.ts
index ab0b56919aa5..20543991e1aa 100644
--- a/src/lib/core/portal/portal.spec.ts
+++ b/src/lib/core/portal/portal.spec.ts
@@ -70,7 +70,7 @@ describe('Portals', () => {
       expect(hostContainer.textContent).toContain('Chocolate');
     });
 
-    it('should load a <template> portal', () => {
+    it('should load a <ng-template> portal', () => {
       let testAppComponent = fixture.debugElement.componentInstance;
 
       // Detect changes initially so that the component's ViewChildren are resolved.
@@ -85,7 +85,7 @@ describe('Portals', () => {
       expect(hostContainer.textContent).toContain('Cake');
     });
 
-    it('should load a <template> portal with the `*` sugar', () => {
+    it('should load a <ng-template> portal with the `*` sugar', () => {
       let testAppComponent = fixture.debugElement.componentInstance;
 
       // Detect changes initially so that the component's ViewChildren are resolved.
@@ -100,7 +100,7 @@ describe('Portals', () => {
       expect(hostContainer.textContent).toContain('Pie');
     });
 
-    it('should load a <template> portal with a binding', () => {
+    it('should load a <ng-template> portal with a binding', () => {
       let testAppComponent = fixture.debugElement.componentInstance;
 
       // Detect changes initially so that the component's ViewChildren are resolved.
@@ -320,14 +320,14 @@ class ArbitraryViewContainerRefComponent {
   selector: 'portal-test',
   template: `
   <div class="portal-container">
-    <template [cdkPortalHost]="selectedPortal"></template>
+    <ng-template [cdkPortalHost]="selectedPortal"></ng-template>
   </div>
 
-  <template cdk-portal>Cake</template>
+  <ng-template cdk-portal>Cake</ng-template>
 
   <div *cdk-portal>Pie</div>
 
-  <template cdk-portal> {{fruit}} </template>`,
+  <ng-template cdk-portal> {{fruit}} </ng-template>`,
 })
 class PortalTestApp {
   @ViewChildren(TemplatePortalDirective) portals: QueryList<TemplatePortalDirective>;
diff --git a/src/lib/dialog/dialog-container.html b/src/lib/dialog/dialog-container.html
index 9ca2bad1e9cf..5b263ad218a4 100644
--- a/src/lib/dialog/dialog-container.html
+++ b/src/lib/dialog/dialog-container.html
@@ -1 +1 @@
-<template cdkPortalHost></template>
+<ng-template cdkPortalHost></ng-template>
diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts
index 8816385f4272..82f0185611fd 100644
--- a/src/lib/dialog/dialog-container.ts
+++ b/src/lib/dialog/dialog-container.ts
@@ -7,14 +7,16 @@ import {
   OnDestroy,
   Renderer,
   ElementRef,
+  EventEmitter,
+} from '@angular/core';
+import {
   animate,
+  trigger,
   state,
   style,
   transition,
-  trigger,
-  AnimationTransitionEvent,
-  EventEmitter,
-} from '@angular/core';
+  AnimationEvent,
+} from '@angular/animations';
 import {BasePortalHost, ComponentPortal, PortalHostDirective, TemplatePortal} from '../core';
 import {MdDialogConfig} from './dialog-config';
 import {MdDialogContentAlreadyAttachedError} from './dialog-errors';
@@ -139,7 +141,7 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
    * Callback, invoked whenever an animation on the host completes.
    * @docs-private
    */
-  _onAnimationDone(event: AnimationTransitionEvent) {
+  _onAnimationDone(event: AnimationEvent) {
     this._onAnimationStateChange.emit(event.toState as MdDialogContainerAnimationState);
   }
 
diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index 53e67ca2066a..1fb616a4ca17 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/src/lib/dialog/dialog.spec.ts
@@ -7,7 +7,8 @@ import {
   TestBed,
   tick,
 } from '@angular/core/testing';
-import {NgModule,
+import {
+  NgModule,
   Component,
   Directive,
   ViewChild,
@@ -16,6 +17,7 @@ import {NgModule,
   Inject,
 } from '@angular/core';
 import {By} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MdDialogModule} from './index';
 import {MdDialog} from './dialog';
 import {MdDialogContainer} from './dialog-container';
@@ -437,6 +439,7 @@ describe('MdDialog', () => {
       expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(1);
 
       (overlayContainerElement.querySelector('button[md-dialog-close]') as HTMLElement).click();
+      viewContainerFixture.detectChanges();
 
       viewContainerFixture.whenStable().then(() => {
         expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(0);
@@ -603,7 +606,7 @@ const TEST_DIRECTIVES = [
 ];
 
 @NgModule({
-  imports: [MdDialogModule],
+  imports: [MdDialogModule, NoopAnimationsModule],
   exports: TEST_DIRECTIVES,
   declarations: TEST_DIRECTIVES,
   entryComponents: [
diff --git a/src/lib/dialog/index.ts b/src/lib/dialog/index.ts
index 664f8e4b0ab5..ba7b68a15c60 100644
--- a/src/lib/dialog/index.ts
+++ b/src/lib/dialog/index.ts
@@ -1,4 +1,5 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {
   OverlayModule,
   PortalModule,
@@ -17,6 +18,7 @@ import {
 
 @NgModule({
   imports: [
+    BrowserAnimationsModule,
     OverlayModule,
     PortalModule,
     A11yModule,
diff --git a/src/lib/input/input-container.spec.ts b/src/lib/input/input-container.spec.ts
index 541af30cab1f..04f91f7b3c52 100644
--- a/src/lib/input/input-container.spec.ts
+++ b/src/lib/input/input-container.spec.ts
@@ -780,7 +780,7 @@ class MdInputContainerMissingMdInputTestController {}
  * See https://github.com/angular/angular/issues/8348
  */
 const angularWrappedErrorMessage = (e: Error) =>
-    new RegExp(`.*caused by: ${regexpEscape(e.message)}$`);
+    new RegExp(`${regexpEscape(e.message)}$`);
 
 /**
  * Escape a string for use inside a RegExp.
diff --git a/src/lib/menu/index.ts b/src/lib/menu/index.ts
index 87b541aca49e..f87411c8d8b5 100644
--- a/src/lib/menu/index.ts
+++ b/src/lib/menu/index.ts
@@ -1,4 +1,5 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {CommonModule} from '@angular/common';
 import {OverlayModule, CompatibilityModule} from '../core';
 import {MdMenu} from './menu-directive';
@@ -8,7 +9,13 @@ import {MdRippleModule} from '../core/ripple/index';
 
 
 @NgModule({
-  imports: [OverlayModule, CommonModule, MdRippleModule, CompatibilityModule],
+  imports: [
+    BrowserAnimationsModule,
+    OverlayModule,
+    CommonModule,
+    MdRippleModule,
+    CompatibilityModule,
+  ],
   exports: [MdMenu, MdMenuItem, MdMenuTrigger, CompatibilityModule],
   declarations: [MdMenu, MdMenuItem, MdMenuTrigger],
 })
diff --git a/src/lib/menu/menu-animations.ts b/src/lib/menu/menu-animations.ts
index 8186a3f3945f..4d1caf5bf2a5 100644
--- a/src/lib/menu/menu-animations.ts
+++ b/src/lib/menu/menu-animations.ts
@@ -1,11 +1,11 @@
 import{
-  AnimationEntryMetadata,
   trigger,
   state,
   style,
   animate,
-  transition
-} from '@angular/core';
+  transition,
+  AnimationTriggerMetadata,
+} from '@angular/animations';
 
 /**
  * Below are all the animations for the md-menu component.
@@ -23,7 +23,7 @@ import{
  */
 
 // TODO(kara): switch to :enter and :leave once Mobile Safari is sorted out.
-export const transformMenu: AnimationEntryMetadata = trigger('transformMenu', [
+export const transformMenu: AnimationTriggerMetadata = trigger('transformMenu', [
   state('showing', style({
     opacity: 1,
     transform: `scale(1)`
@@ -44,7 +44,7 @@ export const transformMenu: AnimationEntryMetadata = trigger('transformMenu', [
  * This animation fades in the background color and content of the menu panel
  * after its containing element is scaled in.
  */
-export const fadeInItems: AnimationEntryMetadata = trigger('fadeInItems', [
+export const fadeInItems: AnimationTriggerMetadata = trigger('fadeInItems', [
   state('showing', style({opacity: 1})),
   transition('void => *', [
     style({opacity: 0}),
diff --git a/src/lib/menu/menu.html b/src/lib/menu/menu.html
index 3360ab135e2e..989bf1f56acb 100644
--- a/src/lib/menu/menu.html
+++ b/src/lib/menu/menu.html
@@ -1,9 +1,9 @@
-<template>
+<ng-template>
   <div class="mat-menu-panel" [ngClass]="_classList" (keydown)="_keyManager.onKeydown($event)"
     (click)="_emitCloseEvent()" [@transformMenu]="'showing'">
     <div class="mat-menu-content" [@fadeInItems]="'showing'">
       <ng-content></ng-content>
     </div>
   </div>
-</template>
+</ng-template>
 
diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts
index 3199b475a2e7..849e84a8aa76 100644
--- a/src/lib/menu/menu.spec.ts
+++ b/src/lib/menu/menu.spec.ts
@@ -1,5 +1,6 @@
 import {TestBed, async, ComponentFixture} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {
   Component,
   ElementRef,
@@ -28,7 +29,7 @@ describe('MdMenu', () => {
   beforeEach(async(() => {
     dir = 'ltr';
     TestBed.configureTestingModule({
-      imports: [MdMenuModule.forRoot()],
+      imports: [MdMenuModule.forRoot(), NoopAnimationsModule],
       declarations: [SimpleMenu, PositionedMenu, OverlapMenu, CustomMenuPanel, CustomMenu],
       providers: [
         {provide: OverlayContainer, useFactory: () => {
@@ -70,7 +71,7 @@ describe('MdMenu', () => {
     }).not.toThrowError();
   });
 
-  it('should close the menu when a click occurs outside the menu', async(() => {
+  it('should close the menu when a click occurs outside the menu', () => {
     const fixture = TestBed.createComponent(SimpleMenu);
     fixture.detectChanges();
     fixture.componentInstance.trigger.openMenu();
@@ -79,10 +80,8 @@ describe('MdMenu', () => {
     backdrop.click();
     fixture.detectChanges();
 
-    fixture.whenStable().then(() => {
-      expect(overlayContainerElement.textContent).toBe('');
-    });
-  }));
+    expect(overlayContainerElement.textContent).toBe('');
+  });
 
   it('should open a custom menu', () => {
     const fixture = TestBed.createComponent(CustomMenu);
@@ -469,10 +468,10 @@ class OverlapMenu implements TestableMenu {
 @Component({
   selector: 'custom-menu',
   template: `
-    <template>
+    <ng-template>
       Custom Menu header
       <ng-content></ng-content>
-    </template>
+    </ng-template>
   `,
   exportAs: 'mdCustomMenu'
 })
diff --git a/src/lib/select/index.ts b/src/lib/select/index.ts
index e5390113f94a..861a46e707ae 100644
--- a/src/lib/select/index.ts
+++ b/src/lib/select/index.ts
@@ -1,12 +1,19 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MdSelect} from './select';
 import {MdOptionModule} from '../core/option/option';
 import {CompatibilityModule, OverlayModule} from '../core';
 
 
 @NgModule({
-  imports: [CommonModule, OverlayModule, MdOptionModule, CompatibilityModule],
+  imports: [
+    CommonModule,
+    BrowserAnimationsModule,
+    OverlayModule,
+    MdOptionModule,
+    CompatibilityModule,
+  ],
   exports: [MdSelect, MdOptionModule, CompatibilityModule],
   declarations: [MdSelect],
 })
diff --git a/src/lib/select/select-animations.ts b/src/lib/select/select-animations.ts
index a8d7ae1f0d41..42201b4bcc01 100644
--- a/src/lib/select/select-animations.ts
+++ b/src/lib/select/select-animations.ts
@@ -1,11 +1,11 @@
 import {
   animate,
-  AnimationEntryMetadata,
+  AnimationTriggerMetadata,
   state,
   style,
   transition,
   trigger,
-} from '@angular/core';
+} from '@angular/animations';
 
 /**
  * The following are all the animations for the md-select component, with each
@@ -19,7 +19,7 @@ import {
  * it to either the top left corner (ltr) or top right corner (rtl) of the trigger,
  * depending on the text direction of the application.
  */
-export const transformPlaceholder: AnimationEntryMetadata = trigger('transformPlaceholder', [
+export const transformPlaceholder: AnimationTriggerMetadata = trigger('transformPlaceholder', [
   state('floating-ltr', style({
     top: '-22px',
     left: '-2px',
@@ -42,7 +42,7 @@ export const transformPlaceholder: AnimationEntryMetadata = trigger('transformPl
  *
  * When the panel is removed from the DOM, it simply fades out linearly.
  */
-export const transformPanel: AnimationEntryMetadata = trigger('transformPanel', [
+export const transformPanel: AnimationTriggerMetadata = trigger('transformPanel', [
   state('showing', style({
     opacity: 1,
     minWidth: 'calc(100% + 32px)',
@@ -66,7 +66,7 @@ export const transformPanel: AnimationEntryMetadata = trigger('transformPanel',
  * select's options. It is time delayed to occur 100ms after the overlay
  * panel has transformed in.
  */
-export const fadeInContent: AnimationEntryMetadata  =  trigger('fadeInContent', [
+export const fadeInContent: AnimationTriggerMetadata  =  trigger('fadeInContent', [
   state('showing', style({opacity: 1})),
   transition('void => showing', [
     style({opacity: 0}),
diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index 7e4a09e8832b..9c9f0eefac97 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -13,7 +13,7 @@
   <span class="mat-select-underline"></span>
 </div>
 
-<template cdk-connected-overlay [origin]="origin" [open]="panelOpen" hasBackdrop (backdropClick)="close()"
+<ng-template cdk-connected-overlay [origin]="origin" [open]="panelOpen" hasBackdrop (backdropClick)="close()"
   backdropClass="cdk-overlay-transparent-backdrop" [positions]="_positions" [minWidth]="_triggerWidth"
   [offsetY]="_offsetY" [offsetX]="_offsetX" (attach)="_setScrollTop()">
   <div class="mat-select-panel" [@transformPanel]="'showing'" (@transformPanel.done)="_onPanelDone()"
@@ -23,4 +23,4 @@
       <ng-content></ng-content>
     </div>
   </div>
-</template>
+</ng-template>
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index a428799717e9..11e1fb49bbcc 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -9,6 +9,7 @@ import {
   ChangeDetectionStrategy,
   OnInit,
 } from '@angular/core';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MdSelectModule} from './index';
 import {OverlayContainer} from '../core/overlay/overlay-container';
 import {MdSelect, MdSelectFloatPlaceholderType} from './select';
@@ -27,7 +28,7 @@ describe('MdSelect', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdSelectModule.forRoot(), ReactiveFormsModule, FormsModule],
+      imports: [MdSelectModule.forRoot(), ReactiveFormsModule, FormsModule, NoopAnimationsModule],
       declarations: [
         BasicSelect,
         NgModelSelect,
@@ -589,67 +590,67 @@ describe('MdSelect', () => {
     let fixture: ComponentFixture<BasicSelect>;
     let trigger: HTMLElement;
 
-    beforeEach(() => {
+    beforeEach(fakeAsync(() => {
       fixture = TestBed.createComponent(BasicSelect);
       fixture.detectChanges();
 
       trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
-    });
+    }));
 
-      it('should float the placeholder when the panel is open and unselected', () => {
-        expect(fixture.componentInstance.select._getPlaceholderAnimationState())
-            .toEqual('', 'Expected placeholder to initially have a normal position.');
+    it('should float the placeholder when the panel is open and unselected', () => {
+      expect(fixture.componentInstance.select._getPlaceholderAnimationState())
+          .toEqual('', 'Expected placeholder to initially have a normal position.');
 
-        trigger.click();
-        fixture.detectChanges();
-        expect(fixture.componentInstance.select._getPlaceholderAnimationState())
-            .toEqual('floating-ltr', 'Expected placeholder to animate up to floating position.');
+      trigger.click();
+      fixture.detectChanges();
+      expect(fixture.componentInstance.select._getPlaceholderAnimationState())
+          .toEqual('floating-ltr', 'Expected placeholder to animate up to floating position.');
 
-        const backdrop =
-          overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
-        backdrop.click();
-        fixture.detectChanges();
+      const backdrop =
+        overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+      backdrop.click();
+      fixture.detectChanges();
 
-        expect(fixture.componentInstance.select._getPlaceholderAnimationState())
-            .toEqual('', 'Expected placeholder to animate back down to normal position.');
-      });
+      expect(fixture.componentInstance.select._getPlaceholderAnimationState())
+          .toEqual('', 'Expected placeholder to animate back down to normal position.');
+    });
 
-      it('should float the placeholder without animation when value is set', () => {
-        fixture.componentInstance.control.setValue('pizza-1');
-        fixture.detectChanges();
+    it('should float the placeholder without animation when value is set', () => {
+      fixture.componentInstance.control.setValue('pizza-1');
+      fixture.detectChanges();
 
-        const placeholderEl =
-            fixture.debugElement.query(By.css('.mat-select-placeholder')).nativeElement;
+      const placeholderEl =
+          fixture.debugElement.query(By.css('.mat-select-placeholder')).nativeElement;
 
-        expect(placeholderEl.classList)
-            .toContain('mat-floating-placeholder', 'Expected placeholder to display as floating.');
-        expect(fixture.componentInstance.select._getPlaceholderAnimationState())
-            .toEqual('', 'Expected animation state to be empty to avoid animation.');
-      });
+      expect(placeholderEl.classList)
+          .toContain('mat-floating-placeholder', 'Expected placeholder to display as floating.');
+      expect(fixture.componentInstance.select._getPlaceholderAnimationState())
+          .toEqual('', 'Expected animation state to be empty to avoid animation.');
+    });
 
-      it('should use the floating-rtl state when the dir is rtl', () => {
-        dir.value = 'rtl';
+    it('should use the floating-rtl state when the dir is rtl', () => {
+      dir.value = 'rtl';
 
-        trigger.click();
-        fixture.detectChanges();
-        expect(fixture.componentInstance.select._getPlaceholderAnimationState())
-            .toEqual('floating-rtl');
-      });
+      trigger.click();
+      fixture.detectChanges();
+      expect(fixture.componentInstance.select._getPlaceholderAnimationState())
+          .toEqual('floating-rtl');
+    });
 
+    it('should add a class to the panel when the menu is done animating', fakeAsync(() => {
+      trigger.click();
+      fixture.detectChanges();
 
-      it('should add a class to the panel when the menu is done animating', fakeAsync(() => {
-        trigger.click();
-        fixture.detectChanges();
+      const panel = overlayContainerElement.querySelector('.mat-select-panel');
 
-        const panel = overlayContainerElement.querySelector('.mat-select-panel');
+      expect(panel.classList).not.toContain('mat-select-panel-done-animating');
 
-        expect(panel.classList).not.toContain('mat-select-panel-done-animating');
+      tick(250);
+      fixture.detectChanges();
 
-        tick(250);
-        fixture.detectChanges();
+      expect(panel.classList).toContain('mat-select-panel-done-animating');
+    }));
 
-        expect(panel.classList).toContain('mat-select-panel-done-animating');
-      }));
   });
 
   describe('positioning', () => {
diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts
index 92d851c950f5..446e414123c0 100644
--- a/src/lib/slide-toggle/slide-toggle.spec.ts
+++ b/src/lib/slide-toggle/slide-toggle.spec.ts
@@ -664,7 +664,7 @@ class SlideToggleTestApp {
 @Component({
   selector: 'slide-toggle-forms-test-app',
   template: `
-    <form (ngSubmit)="isSubmitted = true">
+    <form ngNativeValidate (ngSubmit)="isSubmitted = true">
       <md-slide-toggle name="slide" ngModel [required]="isRequired">Required</md-slide-toggle>
       <button type="submit"></button>
     </form>`
diff --git a/src/lib/snack-bar/index.ts b/src/lib/snack-bar/index.ts
index 99dfe54532c1..352cb1eed2fd 100644
--- a/src/lib/snack-bar/index.ts
+++ b/src/lib/snack-bar/index.ts
@@ -1,4 +1,5 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {OverlayModule, PortalModule, CompatibilityModule, LIVE_ANNOUNCER_PROVIDER} from '../core';
 import {CommonModule} from '@angular/common';
 import {MdSnackBar} from './snack-bar';
@@ -7,7 +8,13 @@ import {SimpleSnackBar} from './simple-snack-bar';
 
 
 @NgModule({
-  imports: [OverlayModule, PortalModule, CommonModule, CompatibilityModule],
+  imports: [
+    BrowserAnimationsModule,
+    OverlayModule,
+    PortalModule,
+    CommonModule,
+    CompatibilityModule,
+  ],
   exports: [MdSnackBarContainer, CompatibilityModule],
   declarations: [MdSnackBarContainer, SimpleSnackBar],
   entryComponents: [MdSnackBarContainer, SimpleSnackBar],
diff --git a/src/lib/snack-bar/snack-bar-container.html b/src/lib/snack-bar/snack-bar-container.html
index 9ca2bad1e9cf..5b263ad218a4 100644
--- a/src/lib/snack-bar/snack-bar-container.html
+++ b/src/lib/snack-bar/snack-bar-container.html
@@ -1 +1 @@
-<template cdkPortalHost></template>
+<ng-template cdkPortalHost></ng-template>
diff --git a/src/lib/snack-bar/snack-bar-container.ts b/src/lib/snack-bar/snack-bar-container.ts
index d191067a0914..519735f9363c 100644
--- a/src/lib/snack-bar/snack-bar-container.ts
+++ b/src/lib/snack-bar/snack-bar-container.ts
@@ -2,17 +2,19 @@ import {
   Component,
   ComponentRef,
   ViewChild,
-  trigger,
-  state,
-  style,
-  transition,
-  animate,
-  AnimationTransitionEvent,
   NgZone,
   OnDestroy,
   Renderer,
   ElementRef,
 } from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  transition,
+  animate,
+  AnimationEvent,
+} from '@angular/animations';
 import {
   BasePortalHost,
   ComponentPortal,
@@ -103,7 +105,7 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy {
   }
 
   /** Handle end of animations, updating the state of the snackbar. */
-  onAnimationEnd(event: AnimationTransitionEvent) {
+  onAnimationEnd(event: AnimationEvent) {
     if (event.toState === 'void' || event.toState === 'complete') {
       this._completeExit();
     }
diff --git a/src/lib/snack-bar/snack-bar.spec.ts b/src/lib/snack-bar/snack-bar.spec.ts
index 84904665aca4..2eef079ec69a 100644
--- a/src/lib/snack-bar/snack-bar.spec.ts
+++ b/src/lib/snack-bar/snack-bar.spec.ts
@@ -9,6 +9,7 @@ import {
 } from '@angular/core/testing';
 import {NgModule, Component, Directive, ViewChild, ViewContainerRef} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MdSnackBarModule, MdSnackBar, MdSnackBarConfig, SimpleSnackBar} from './index';
 import {OverlayContainer, LiveAnnouncer} from '../core';
 
@@ -28,7 +29,7 @@ describe('MdSnackBar', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdSnackBarModule.forRoot(), SnackBarTestModule],
+      imports: [MdSnackBarModule.forRoot(), SnackBarTestModule, NoopAnimationsModule],
       providers: [
         {provide: OverlayContainer, useFactory: () => {
           overlayContainerElement = document.createElement('div');
@@ -353,7 +354,7 @@ describe('MdSnackBar with parent MdSnackBar', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdSnackBarModule.forRoot(), SnackBarTestModule],
+      imports: [MdSnackBarModule.forRoot(), SnackBarTestModule, NoopAnimationsModule],
       declarations: [ComponentThatProvidesMdSnackBar],
       providers: [
         {provide: OverlayContainer, useFactory: () => {
diff --git a/src/lib/system-config-spec.ts b/src/lib/system-config-spec.ts
index 20b147518c83..deef68fd7bf8 100644
--- a/src/lib/system-config-spec.ts
+++ b/src/lib/system-config-spec.ts
@@ -18,6 +18,9 @@ System.config({
     '@angular/http/testing': 'vendor/@angular/http/bundles/http-testing.umd.js',
     '@angular/forms': 'vendor/@angular/forms/bundles/forms.umd.js',
     '@angular/forms/testing': 'vendor/@angular/forms/bundles/forms-testing.umd.js',
+    '@angular/animations': 'vendor/@angular/animations/bundles/animations.umd.js',
+    '@angular/platform-browser/animations':
+      'vendor/@angular/platform-browser/bundles/platform-browser-animations.umd',
     '@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
     '@angular/platform-browser/testing':
       'vendor/@angular/platform-browser/bundles/platform-browser-testing.umd.js',
diff --git a/src/lib/tabs/index.ts b/src/lib/tabs/index.ts
index eff6d6da7d84..290aee4ddfbb 100644
--- a/src/lib/tabs/index.ts
+++ b/src/lib/tabs/index.ts
@@ -1,5 +1,6 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {PortalModule} from '../core';
 import {MdRippleModule} from '../core/ripple/index';
 import {ObserveContentModule} from '../core/observe-content/observe-content';
@@ -16,7 +17,13 @@ import {SCROLL_DISPATCHER_PROVIDER} from '../core/overlay/scroll/scroll-dispatch
 
 
 @NgModule({
-  imports: [CommonModule, PortalModule, MdRippleModule, ObserveContentModule],
+  imports: [
+    CommonModule,
+    BrowserAnimationsModule,
+    PortalModule,
+    MdRippleModule,
+    ObserveContentModule,
+  ],
   // Don't export all components because some are only to be used internally.
   exports: [
     MdTabGroup,
diff --git a/src/lib/tabs/tab-body.html b/src/lib/tabs/tab-body.html
index d1af7a7fd53c..73e619466fbf 100644
--- a/src/lib/tabs/tab-body.html
+++ b/src/lib/tabs/tab-body.html
@@ -2,5 +2,5 @@
      [@translateTab]="_canBeAnimated ? _position : null"
      (@translateTab.start)="_onTranslateTabStarted($event)"
      (@translateTab.done)="_onTranslateTabComplete($event)">
-  <template cdkPortalHost></template>
+  <ng-template cdkPortalHost></ng-template>
 </div>
diff --git a/src/lib/tabs/tab-body.spec.ts b/src/lib/tabs/tab-body.spec.ts
index 4d6840097c4a..a205922ff0f1 100644
--- a/src/lib/tabs/tab-body.spec.ts
+++ b/src/lib/tabs/tab-body.spec.ts
@@ -1,5 +1,6 @@
 import {async, ComponentFixture, TestBed, flushMicrotasks, fakeAsync} from '@angular/core/testing';
 import {Component, ViewChild, TemplateRef, ViewContainerRef} from '@angular/core';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {LayoutDirection, Dir} from '../core/rtl/dir';
 import {TemplatePortal} from '../core/portal/portal';
 import {MdTabBody} from './tab-body';
@@ -14,7 +15,7 @@ describe('MdTabBody', () => {
   beforeEach(async(() => {
     dir = 'ltr';
     TestBed.configureTestingModule({
-      imports: [CommonModule, PortalModule, MdRippleModule],
+      imports: [CommonModule, PortalModule, MdRippleModule, NoopAnimationsModule],
       declarations: [
         MdTabBody,
         SimpleTabBodyApp,
@@ -149,9 +150,9 @@ describe('MdTabBody', () => {
   describe('on centered', () => {
     let fixture: ComponentFixture<SimpleTabBodyApp>;
 
-    beforeEach(() => {
+    beforeEach(fakeAsync(() => {
       fixture = TestBed.createComponent(SimpleTabBodyApp);
-    });
+    }));
 
     it('should attach the content when centered and detach when not', fakeAsync(() => {
       fixture.componentInstance.position = 1;
@@ -187,7 +188,7 @@ describe('MdTabBody', () => {
 
 @Component({
   template: `
-    <template>Tab Body Content</template>
+    <ng-template>Tab Body Content</ng-template>
     <md-tab-body [content]="content" [position]="position" [origin]="origin"></md-tab-body>
   `
 })
diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts
index 416ac2ec6565..ec5bbfe90018 100644
--- a/src/lib/tabs/tab-body.ts
+++ b/src/lib/tabs/tab-body.ts
@@ -5,18 +5,20 @@ import {
   Output,
   EventEmitter,
   OnInit,
-  trigger,
-  state,
-  style,
-  animate,
-  transition,
-  AnimationTransitionEvent,
   ElementRef,
   Optional,
   ChangeDetectorRef,
   AfterViewChecked,
   AfterContentChecked,
 } from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition,
+  AnimationEvent,
+} from '@angular/animations';
 import {TemplatePortal, PortalHostDirective, Dir, LayoutDirection} from '../core';
 import 'rxjs/add/operator/map';
 
@@ -165,13 +167,13 @@ export class MdTabBody implements OnInit, AfterViewChecked, AfterContentChecked
     }
   }
 
-  _onTranslateTabStarted(e: AnimationTransitionEvent) {
+  _onTranslateTabStarted(e: AnimationEvent) {
     if (this._isCenterPosition(e.toState)) {
       this.onCentering.emit(this._elementRef.nativeElement.clientHeight);
     }
   }
 
-  _onTranslateTabComplete(e: AnimationTransitionEvent) {
+  _onTranslateTabComplete(e: AnimationEvent) {
     // If the end state is that the tab is not centered, then detach the content.
     if (!this._isCenterPosition(e.toState) && !this._isCenterPosition(this._position)) {
       this._portalHost.detach();
diff --git a/src/lib/tabs/tab-group.html b/src/lib/tabs/tab-group.html
index 07e81b31f48d..c25a37b5e7c2 100644
--- a/src/lib/tabs/tab-group.html
+++ b/src/lib/tabs/tab-group.html
@@ -12,12 +12,12 @@
        (click)="tabHeader.focusIndex = selectedIndex = i">
 
     <!-- If there is a label template, use it. -->
-    <template [ngIf]="tab.templateLabel">
-      <template [cdkPortalHost]="tab.templateLabel"></template>
-    </template>
+    <ng-template [ngIf]="tab.templateLabel">
+      <ng-template [cdkPortalHost]="tab.templateLabel"></ng-template>
+    </ng-template>
 
     <!-- If there is not a label template, fall back to the text label. -->
-    <template [ngIf]="!tab.templateLabel">{{tab.textLabel}}</template>
+    <ng-template [ngIf]="!tab.templateLabel">{{tab.textLabel}}</ng-template>
   </div>
 </md-tab-header>
 
diff --git a/src/lib/tabs/tab-group.spec.ts b/src/lib/tabs/tab-group.spec.ts
index 3ae944edcfc9..ff49c0f7ef46 100644
--- a/src/lib/tabs/tab-group.spec.ts
+++ b/src/lib/tabs/tab-group.spec.ts
@@ -297,15 +297,15 @@ describe('MdTabGroup', () => {
         (focusChange)="handleFocus($event)"
         (selectChange)="handleSelection($event)">
       <md-tab>
-        <template md-tab-label>Tab One</template>
+        <ng-template md-tab-label>Tab One</ng-template>
         Tab one content
       </md-tab>
       <md-tab>
-        <template md-tab-label>Tab Two</template>
+        <ng-template md-tab-label>Tab Two</ng-template>
         Tab two content
       </md-tab>
       <md-tab>
-        <template md-tab-label>Tab Three</template>
+        <ng-template md-tab-label>Tab Three</ng-template>
         Tab three content
       </md-tab>
     </md-tab-group>
@@ -331,7 +331,7 @@ class SimpleTabsTestApp {
         (focusChange)="handleFocus($event)"
         (selectChange)="handleSelection($event)">
       <md-tab *ngFor="let tab of tabs">
-        <template md-tab-label>{{tab.label}}</template>
+        <ng-template md-tab-label>{{tab.label}}</ng-template>
         {{tab.content}}
       </md-tab>
     </md-tab-group>
@@ -384,15 +384,15 @@ class BindedTabsTestApp {
   template: `
     <md-tab-group class="tab-group">
       <md-tab>
-        <template md-tab-label>Tab One</template>
+        <ng-template md-tab-label>Tab One</ng-template>
         Tab one content
       </md-tab>
       <md-tab disabled>
-        <template md-tab-label>Tab Two</template>
+        <ng-template md-tab-label>Tab Two</ng-template>
         Tab two content
       </md-tab>
       <md-tab>
-        <template md-tab-label>Tab Three</template>
+        <ng-template md-tab-label>Tab Three</ng-template>
         Tab three content
       </md-tab>
     </md-tab-group>
@@ -404,7 +404,7 @@ class DisabledTabsTestApp {}
   template: `
     <md-tab-group class="tab-group">
       <md-tab *ngFor="let tab of tabs | async">
-        <template md-tab-label>{{ tab.label }}</template>
+        <ng-template md-tab-label>{{ tab.label }}</ng-template>
         {{ tab.content }}
       </md-tab>
    </md-tab-group>
diff --git a/src/lib/tabs/tab.html b/src/lib/tabs/tab.html
index d3c3a8152654..398c819fa896 100644
--- a/src/lib/tabs/tab.html
+++ b/src/lib/tabs/tab.html
@@ -1,4 +1,4 @@
 <!-- Create a template for the content of the <md-tab> so that we can grab a reference to this
     TemplateRef and use it in a Portal to render the tab content in the appropriate place in the
     tab-group. -->
-<template><ng-content></ng-content></template>
+<ng-template><ng-content></ng-content></ng-template>
diff --git a/src/lib/tabs/tab.ts b/src/lib/tabs/tab.ts
index 5018bc3252db..530075c7d8af 100644
--- a/src/lib/tabs/tab.ts
+++ b/src/lib/tabs/tab.ts
@@ -13,7 +13,7 @@ import {MdTabLabel} from './tab-label';
   templateUrl: 'tab.html',
 })
 export class MdTab implements OnInit {
-  /** Content for the tab label given by <template md-tab-label>. */
+  /** Content for the tab label given by <ng-template md-tab-label>. */
   @ContentChild(MdTabLabel) templateLabel: MdTabLabel;
 
   /** Template inside the MdTab view that contains an <ng-content>. */
diff --git a/src/lib/tabs/tabs.md b/src/lib/tabs/tabs.md
index 06f6d3ee9821..e24e7a1b0a30 100644
--- a/src/lib/tabs/tabs.md
+++ b/src/lib/tabs/tabs.md
@@ -10,10 +10,10 @@ tab labels in the header.
 
 ### Events
 
-The `selectChange` output event is emitted when the active tab changes.  
+The `selectChange` output event is emitted when the active tab changes.
 
 The `focusChange` output event is emitted when the user puts focus on any of the tab labels in
-the header, usually through keyboard navigation. 
+the header, usually through keyboard navigation.
 
 ### Labels
 
@@ -37,16 +37,16 @@ For more complex labels, add a template with the `md-tab-label` directive inside
 ```html
 <md-tab-group>
   <md-tab>
-    <template md-tab-label>
+    <ng-template md-tab-label>
       The <em>best</em> pasta
-    </template>
+    </ng-template>
     <h1>Best pasta restaurants</h1>
     <p>...</p>
   </md-tab>
   <md-tab>
-    <template md-tab-label>
+    <ng-template md-tab-label>
       <md-icon>thumb_down</md-icon> The worst sushi
-    </template>
+    </ng-template>
     <h1>Terrible sushi restaurants</h1>
     <p>...</p>
   </md-tab>
@@ -58,7 +58,7 @@ For more complex labels, add a template with the `md-tab-label` directive inside
 By default, the tab group will not change its height to the height of the currently active tab. To
 change this, set the `dynamicHeight` input to true. The tab body will animate its height according
  to the height of the active tab.
- 
+
 ### Tabs and navigation
 While `<md-tab-group>` is used to switch between views within a single route, `<nav md-tab-nav-bar>`
 provides a tab-like UI for navigating between routes.
@@ -77,5 +77,5 @@ provides a tab-like UI for navigating between routes.
 ```
 
 The tab-nav-bar is not tied to any particular router; it works with normal `<a>` elements and uses
-the `active` property to determine which tab is currently active. The corresponding 
-`<router-outlet>` can be placed anywhere in the view. 
+the `active` property to determine which tab is currently active. The corresponding
+`<router-outlet>` can be placed anywhere in the view.
diff --git a/src/lib/tooltip/index.ts b/src/lib/tooltip/index.ts
index 50d1e0df12dc..61e7e5a65001 100644
--- a/src/lib/tooltip/index.ts
+++ b/src/lib/tooltip/index.ts
@@ -1,11 +1,12 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {OverlayModule, CompatibilityModule} from '../core';
 import {PlatformModule} from '../core/platform/index';
 import {MdTooltip, TooltipComponent} from './tooltip';
 
 
 @NgModule({
-  imports: [OverlayModule, CompatibilityModule, PlatformModule],
+  imports: [BrowserAnimationsModule, OverlayModule, CompatibilityModule, PlatformModule],
   exports: [MdTooltip, TooltipComponent, CompatibilityModule],
   declarations: [MdTooltip, TooltipComponent],
   entryComponents: [TooltipComponent],
diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts
index 9700e755fc21..4c416cfb7157 100644
--- a/src/lib/tooltip/tooltip.spec.ts
+++ b/src/lib/tooltip/tooltip.spec.ts
@@ -9,11 +9,12 @@ import {
 import {
   Component,
   DebugElement,
-  AnimationTransitionEvent,
   ViewChild,
   ChangeDetectionStrategy
 } from '@angular/core';
+import {AnimationEvent} from '@angular/animations';
 import {By} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {TooltipPosition, MdTooltip, MdTooltipModule, SCROLL_THROTTLE_MS} from './index';
 import {OverlayContainer} from '../core';
 import {Dir, LayoutDirection} from '../core/rtl/dir';
@@ -31,7 +32,7 @@ describe('MdTooltip', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdTooltipModule.forRoot(), OverlayModule],
+      imports: [MdTooltipModule.forRoot(), OverlayModule, NoopAnimationsModule],
       declarations: [BasicTooltipDemo, ScrollableTooltipDemo, OnPushTooltipDemo],
       providers: [
         Platform,
@@ -232,12 +233,12 @@ describe('MdTooltip', () => {
       // _afterVisibilityAnimation function, but for unknown reasons in the test infrastructure,
       // this does not occur. Manually call this and verify that doing so does not
       // throw an error.
-      tooltipInstance._afterVisibilityAnimation(new AnimationTransitionEvent({
+      tooltipInstance._afterVisibilityAnimation({
         fromState: 'visible',
         toState: 'hidden',
         totalTime: 150,
         phaseName: '',
-      }));
+      } as AnimationEvent);
     }));
 
     it('should consistently position before and after overlay origin in ltr and rtl dir', () => {
diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts
index ded39bf7ae44..e22e0c9d019c 100644
--- a/src/lib/tooltip/tooltip.ts
+++ b/src/lib/tooltip/tooltip.ts
@@ -4,12 +4,6 @@ import {
   Input,
   ElementRef,
   ViewContainerRef,
-  style,
-  trigger,
-  state,
-  transition,
-  animate,
-  AnimationTransitionEvent,
   NgZone,
   Optional,
   OnDestroy,
@@ -17,6 +11,14 @@ import {
   OnInit,
   ChangeDetectorRef
 } from '@angular/core';
+import {
+  style,
+  trigger,
+  state,
+  transition,
+  animate,
+  AnimationEvent,
+} from '@angular/animations';
 import {
   Overlay,
   OverlayState,
@@ -426,7 +428,7 @@ export class TooltipComponent {
     }
   }
 
-  _afterVisibilityAnimation(e: AnimationTransitionEvent): void {
+  _afterVisibilityAnimation(e: AnimationEvent): void {
     if (e.toState === 'hidden' && !this.isVisible()) {
       this._onHide.next();
     }
diff --git a/tools/gulp/tasks/components.ts b/tools/gulp/tasks/components.ts
index 282b83f2aada..133bc00f6719 100644
--- a/tools/gulp/tasks/components.ts
+++ b/tools/gulp/tasks/components.ts
@@ -67,7 +67,9 @@ task(':build:components:rollup', () => {
     '@angular/common': 'ng.common',
     '@angular/forms': 'ng.forms',
     '@angular/http': 'ng.http',
+    '@angular/animations': 'ng.animations',
     '@angular/platform-browser': 'ng.platformBrowser',
+    '@angular/platform-browser/animations': 'ng.platformBrowser.animations',
     '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
 
     // Rxjs dependencies