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.

Author: crisbeto

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",
@@ -106,7 +107,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"
   }

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>

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>

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>

src/demo-app/system-config.ts

@@ -14,7 +14,11 @@ 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/animations/browser': 'vendor/@angular/animations/bundles/animations-browser.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.js',
     '@angular/platform-browser-dynamic':
       'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
     '@angular/material': '@angular/material/bundles/material.umd.js'

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}}

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>

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]

src/e2e-app/system-config.ts

@@ -14,6 +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/animations/browser': 'vendor/@angular/animations/bundles/animations-browser.umd.js',
+    '@angular/platform-browser/animations':
+      'vendor/@angular/platform-browser/bundles/platform-browser-animations.umd.js',
     '@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',

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>

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>
+</ng-template>

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');

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();

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;

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;