Skip to content

Commit f662a7d

Browse files
crisbetocrisbeto
committed
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.
1 parent 3ad6ff0 commit f662a7d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+317
-243
lines changed

‎package.json

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,23 @@
2525
"node": ">= 5.4.1 < 7"
2626
},
2727
"dependencies": {
28-
"@angular/common": "^2.3.0",
29-
"@angular/compiler": "^2.3.0",
30-
"@angular/core": "^2.3.0",
31-
"@angular/forms": "^2.3.0",
32-
"@angular/http": "^2.3.0",
33-
"@angular/platform-browser": "^2.3.0",
28+
"@angular/animations": "^4.0.0-rc.5",
29+
"@angular/common": "^4.0.0-rc.5",
30+
"@angular/compiler": "^4.0.0-rc.5",
31+
"@angular/core": "^4.0.0-rc.5",
32+
"@angular/forms": "^4.0.0-rc.5",
33+
"@angular/http": "^4.0.0-rc.5",
34+
"@angular/platform-browser": "^4.0.0-rc.5",
3435
"core-js": "^2.4.1",
3536
"rxjs": "^5.0.1",
3637
"systemjs": "0.19.43",
37-
"zone.js": "^0.7.2"
38+
"zone.js": "^0.8.4"
3839
},
3940
"devDependencies": {
40-
"@angular/compiler-cli": "^2.3.0",
41-
"@angular/platform-browser-dynamic": "^2.3.0",
42-
"@angular/platform-server": "^2.3.0",
43-
"@angular/router": "^3.3.0",
41+
"@angular/compiler-cli": "^4.0.0-rc.5",
42+
"@angular/platform-browser-dynamic": "^4.0.0-rc.5",
43+
"@angular/platform-server": "^4.0.0-rc.5",
44+
"@angular/router": "^4.0.0-rc.5",
4445
"@types/chalk": "^0.4.31",
4546
"@types/fs-extra": "0.0.37",
4647
"@types/glob": "^5.0.30",
@@ -106,7 +107,7 @@
106107
"ts-node": "^2.1.0",
107108
"tslint": "^4.4.2",
108109
"tslint-no-unused-var": "0.0.6",
109-
"typescript": "~2.0.10",
110+
"typescript": "~2.1.6",
110111
"uglify-js": "^2.8.7",
111112
"web-animations-js": "^2.2.2"
112113
}

‎src/demo-app/dialog/dialog-demo.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,6 @@ <h2>Other options</h2>
6767

6868
<p>Last close result: {{lastCloseResult}}</p>
6969

70-
<template>
70+
<ng-template>
7171
I'm a template dialog. I've been opened {{numTemplateOpens}} times!
72-
</template>
72+
</ng-template>

‎src/demo-app/overlay/overlay-demo.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,16 @@
1515
Open menu
1616
</button>
1717

18-
<template cdk-connected-overlay [origin]="trigger" [width]="500" hasBackdrop [open]="isMenuOpen"
18+
<ng-template cdk-connected-overlay [origin]="trigger" [width]="500" hasBackdrop [open]="isMenuOpen"
1919
(backdropClick)="isMenuOpen=false">
2020
<div style="background-color: mediumpurple" >
2121
This is the menu panel.
2222
</div>
23-
</template>
23+
</ng-template>
2424

2525
<!-- Template to load into an overlay. -->
26-
<template cdk-portal>
26+
<ng-template cdk-portal>
2727
<p class="demo-fusilli"> Fusilli </p>
28-
</template>
28+
</ng-template>
2929

3030
<button (click)="openPanelWithBackdrop()">Backdrop panel</button>

‎src/demo-app/portal/portal-demo.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<h2> The portal host is here: </h2>
22
<div class="demo-portal-host">
3-
<template [cdkPortalHost]="selectedPortal"></template>
3+
<ng-template [cdkPortalHost]="selectedPortal"></ng-template>
44
</div>
55

66
<button type="button" (click)="selectedPortal = programmingJoke">
@@ -15,15 +15,15 @@ <h2> The portal host is here: </h2>
1515
Science joke
1616
</button>
1717

18-
<!-- Template vars on <template> elements can't be accessed _in_ the template because Angular
18+
<!-- Template vars on <ng-template> elements can't be accessed _in_ the template because Angular
1919
doesn't support grabbing the instance / TemplateRef this way because the variable may be
2020
referring to something *in* the template (such as #item in ngFor). As such, the component
2121
has to use @ViewChild / @ViewChildren to get these references.
2222
See https://github.com/angular/angular/issues/7158 -->
23-
<template cdk-portal>
23+
<ng-template cdk-portal>
2424
<p> - Why don't jokes work in octal?</p>
2525
<p> - Because 7 10 11.</p>
26-
</template>
26+
</ng-template>
2727

2828
<div *cdk-portal>
2929
<p> - Did you hear about this year's Fibonacci Conference? </p>

‎src/demo-app/system-config.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ System.config({
1414
'@angular/http': 'vendor/@angular/http/bundles/http.umd.js',
1515
'@angular/forms': 'vendor/@angular/forms/bundles/forms.umd.js',
1616
'@angular/router': 'vendor/@angular/router/bundles/router.umd.js',
17+
'@angular/animations': 'vendor/@angular/animations/bundles/animations.umd.js',
18+
'@angular/animations/browser': 'vendor/@angular/animations/bundles/animations-browser.umd.js',
1719
'@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
20+
'@angular/platform-browser/animations':
21+
'vendor/@angular/platform-browser/bundles/platform-browser-animations.umd.js',
1822
'@angular/platform-browser-dynamic':
1923
'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
2024
'@angular/material': '@angular/material/bundles/material.umd.js'

‎src/demo-app/tabs/tabs-demo.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ <h1>Tab Group Demo - Dynamic Tabs</h1>
4848

4949
<md-tab-group class="demo-tab-group" dynamicHeight [(selectedIndex)]="activeTabIndex">
5050
<md-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
51-
<template md-tab-label>{{tab.label}}</template>
51+
<ng-template md-tab-label>{{tab.label}}</ng-template>
5252
<div class="tab-content">
5353
{{tab.content}}
5454
<br>
@@ -100,7 +100,7 @@ <h1>Tab Group Demo - Dynamic Height</h1>
100100

101101
<md-tab-group class="demo-tab-group" dynamicHeight>
102102
<md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
103-
<template md-tab-label>{{tab.label}}</template>
103+
<ng-template md-tab-label>{{tab.label}}</ng-template>
104104
<div class="tab-content">
105105
{{tab.content}}
106106
<br>
@@ -146,7 +146,7 @@ <h1>Tab Group Demo - Fixed Height</h1>
146146

147147
<md-tab-group class="demo-tab-group" style="height: 220px">
148148
<md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
149-
<template md-tab-label>{{tab.label}}</template>
149+
<ng-template md-tab-label>{{tab.label}}</ng-template>
150150
<div class="tab-content">
151151
{{tab.content}}
152152
<br>
@@ -191,7 +191,7 @@ <h1>Stretched Tabs</h1>
191191

192192
<md-tab-group class="demo-tab-group" style="height: 200px" md-stretch-tabs>
193193
<md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
194-
<template md-tab-label>{{tab.label}}</template>
194+
<ng-template md-tab-label>{{tab.label}}</ng-template>
195195
<div class="tab-content">
196196
{{tab.content}}
197197
</div>
@@ -203,7 +203,7 @@ <h1>Async Tabs</h1>
203203

204204
<md-tab-group class="demo-tab-group">
205205
<md-tab *ngFor="let tab of asyncTabs | async; let i = index" [disabled]="i == 1">
206-
<template md-tab-label>{{tab.label}}</template>
206+
<ng-template md-tab-label>{{tab.label}}</ng-template>
207207

208208
<div class="tab-content">
209209
{{tab.content}}

‎src/e2e-app/dialog/dialog-e2e.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
<button id="disabled" (click)="openDisabled()">DISABLED</button>
33
<button id="template" (click)="openTemplate()">TEMPLATE</button>
44

5-
<template><div class="my-template-dialog">my template dialog</div></template>
5+
<ng-template><div class="my-template-dialog">my template dialog</div></ng-template>

‎src/e2e-app/e2e-app-module.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {NgModule} from '@angular/core';
2-
import {BrowserModule, AnimationDriver} from '@angular/platform-browser';
2+
import {BrowserModule} from '@angular/platform-browser';
3+
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
34
import {RouterModule} from '@angular/router';
45
import {SimpleCheckboxes} from './checkbox/checkbox-e2e';
56
import {E2EApp, Home} from './e2e-app/e2e-app';
@@ -23,6 +24,7 @@ import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
2324
BrowserModule,
2425
RouterModule.forRoot(E2E_APP_ROUTES),
2526
MaterialModule.forRoot(),
27+
NoopAnimationsModule,
2628
],
2729
declarations: [
2830
E2EApp,
@@ -45,7 +47,6 @@ import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
4547
],
4648
bootstrap: [E2EApp],
4749
providers: [
48-
{provide: AnimationDriver, useValue: AnimationDriver.NOOP},
4950
{provide: OverlayContainer, useClass: FullscreenOverlayContainer}
5051
],
5152
entryComponents: [TestDialog, TestDialogFullScreen]

‎src/e2e-app/system-config.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ System.config({
1414
'@angular/http': 'vendor/@angular/http/bundles/http.umd.js',
1515
'@angular/forms': 'vendor/@angular/forms/bundles/forms.umd.js',
1616
'@angular/router': 'vendor/@angular/router/bundles/router.umd.js',
17+
'@angular/animations': 'vendor/@angular/animations/bundles/animations.umd.js',
18+
'@angular/animations/browser': 'vendor/@angular/animations/bundles/animations-browser.umd.js',
19+
'@angular/platform-browser/animations':
20+
'vendor/@angular/platform-browser/bundles/platform-browser-animations.umd.js',
1721
'@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
1822
'@angular/platform-browser/testing':
1923
'vendor/@angular/platform-browser/bundles/platform-browser-testing.umd.js',

‎src/e2e-app/tabs/tabs-e2e.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<section>
22
<md-tab-group>
33
<md-tab>
4-
<template md-tab-label>One</template>
4+
<ng-template md-tab-label>One</ng-template>
55
First tab's content
66
</md-tab>
77
<md-tab>
8-
<template md-tab-label>Two</template>
8+
<ng-template md-tab-label>Two</ng-template>
99
Second tab's content
1010
</md-tab>
1111
<md-tab>
12-
<template md-tab-label>Three</template>
12+
<ng-template md-tab-label>Three</ng-template>
1313
Third tab's content
1414
</md-tab>
1515
</md-tab-group>

‎src/lib/autocomplete/autocomplete.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<template>
1+
<ng-template>
22
<div class="mat-autocomplete-panel" role="listbox" [id]="id" [ngClass]="_getClassList()" #panel>
33
<ng-content></ng-content>
44
</div>
5-
</template>
5+
</ng-template>

‎src/lib/checkbox/checkbox.spec.ts

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ describe('MdCheckbox', () => {
113113
expect(inputElement.indeterminate).toBe(false);
114114
});
115115

116-
it('should set indeterminate to false when set checked', () => {
116+
it('should set indeterminate to false when set checked', async(() => {
117117
testComponent.isIndeterminate = true;
118118
fixture.detectChanges();
119119

@@ -124,27 +124,34 @@ describe('MdCheckbox', () => {
124124
testComponent.isChecked = true;
125125
fixture.detectChanges();
126126

127-
expect(checkboxInstance.checked).toBe(true);
128-
expect(inputElement.indeterminate).toBe(false);
129-
expect(inputElement.checked).toBe(true);
130-
expect(testComponent.isIndeterminate).toBe(false);
127+
fixture.whenStable().then(() => {
128+
fixture.detectChanges();
129+
expect(checkboxInstance.checked).toBe(true);
130+
expect(inputElement.indeterminate).toBe(false);
131+
expect(inputElement.checked).toBe(true);
132+
expect(testComponent.isIndeterminate).toBe(false);
131133

132-
testComponent.isIndeterminate = true;
133-
fixture.detectChanges();
134+
testComponent.isIndeterminate = true;
135+
fixture.detectChanges();
134136

135-
expect(checkboxInstance.indeterminate).toBe(true);
136-
expect(inputElement.indeterminate).toBe(true);
137-
expect(inputElement.checked).toBe(true);
138-
expect(testComponent.isIndeterminate).toBe(true);
137+
expect(checkboxInstance.indeterminate).toBe(true);
138+
expect(inputElement.indeterminate).toBe(true);
139+
expect(inputElement.checked).toBe(true);
140+
expect(testComponent.isIndeterminate).toBe(true);
139141

140-
testComponent.isChecked = false;
141-
fixture.detectChanges();
142+
testComponent.isChecked = false;
143+
fixture.detectChanges();
142144

143-
expect(checkboxInstance.checked).toBe(false);
144-
expect(inputElement.indeterminate).toBe(false);
145-
expect(inputElement.checked).toBe(false);
146-
expect(testComponent.isIndeterminate).toBe(false);
147-
});
145+
fixture.whenStable().then(() => {
146+
fixture.detectChanges();
147+
expect(checkboxInstance.checked).toBe(false);
148+
expect(inputElement.indeterminate).toBe(false);
149+
expect(inputElement.checked).toBe(false);
150+
expect(testComponent.isIndeterminate).toBe(false);
151+
});
152+
});
153+
154+
}));
148155

149156
it('should change native element checked when check programmatically', () => {
150157
expect(inputElement.checked).toBe(false);
@@ -169,7 +176,7 @@ describe('MdCheckbox', () => {
169176
expect(checkboxInstance.checked).toBe(false);
170177
});
171178

172-
it('should change from indeterminate to checked on click', () => {
179+
it('should change from indeterminate to checked on click', async(() => {
173180
testComponent.isChecked = false;
174181
testComponent.isIndeterminate = true;
175182
fixture.detectChanges();
@@ -179,15 +186,17 @@ describe('MdCheckbox', () => {
179186

180187
checkboxInstance._onInputClick(<Event>{stopPropagation: () => {}});
181188

182-
expect(checkboxInstance.checked).toBe(true);
183-
expect(checkboxInstance.indeterminate).toBe(false);
189+
fixture.whenStable().then(() => {
190+
expect(checkboxInstance.checked).toBe(true);
191+
expect(checkboxInstance.indeterminate).toBe(false);
184192

185-
checkboxInstance._onInputClick(<Event>{stopPropagation: () => {}});
186-
fixture.detectChanges();
193+
checkboxInstance._onInputClick(<Event>{stopPropagation: () => {}});
194+
fixture.detectChanges();
187195

188-
expect(checkboxInstance.checked).toBe(false);
189-
expect(checkboxInstance.indeterminate).toBe(false);
190-
});
196+
expect(checkboxInstance.checked).toBe(false);
197+
expect(checkboxInstance.indeterminate).toBe(false);
198+
});
199+
}));
191200

192201
it('should add and remove disabled state', () => {
193202
expect(checkboxInstance.disabled).toBe(false);
@@ -219,16 +228,18 @@ describe('MdCheckbox', () => {
219228
expect(checkboxInstance.checked).toBe(false);
220229
});
221230

222-
it('should overwrite indeterminate state when checked is re-set', () => {
231+
it('should overwrite indeterminate state when checked is re-set', async(() => {
223232
testComponent.isIndeterminate = true;
224233
fixture.detectChanges();
225234

226235
testComponent.isChecked = true;
227236
fixture.detectChanges();
228237

229-
expect(checkboxInstance.checked).toBe(true);
230-
expect(checkboxInstance.indeterminate).toBe(false);
231-
});
238+
fixture.whenStable().then(() => {
239+
expect(checkboxInstance.checked).toBe(true);
240+
expect(checkboxInstance.indeterminate).toBe(false);
241+
});
242+
}));
232243

233244
it('should preserve the user-provided id', () => {
234245
expect(checkboxNativeElement.id).toBe('simple-check');

‎src/lib/checkbox/checkbox.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -225,8 +225,10 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro
225225
set checked(checked: boolean) {
226226
if (checked != this.checked) {
227227
if (this._indeterminate) {
228-
this._indeterminate = false;
229-
this.indeterminateChange.emit(this._indeterminate);
228+
Promise.resolve().then(() => {
229+
this._indeterminate = false;
230+
this.indeterminateChange.emit(this._indeterminate);
231+
});
230232
}
231233
this._checked = checked;
232234
this._changeDetectorRef.markForCheck();

‎src/lib/core/overlay/overlay-directives.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -268,14 +268,14 @@ describe('Overlay directives', () => {
268268
@Component({
269269
template: `
270270
<button cdk-overlay-origin #trigger="cdkOverlayOrigin">Toggle menu</button>
271-
<template cdk-connected-overlay [open]="isOpen" [width]="width" [height]="height"
271+
<ng-template cdk-connected-overlay [open]="isOpen" [width]="width" [height]="height"
272272
[origin]="trigger"
273273
[hasBackdrop]="hasBackdrop" backdropClass="mat-test-class"
274274
(backdropClick)="backdropClicked=true" [offsetX]="offsetX" [offsetY]="offsetY"
275275
(positionChange)="positionChangeHandler($event)" (attach)="attachHandler()"
276276
(detach)="detachHandler()" [minWidth]="minWidth" [minHeight]="minHeight">
277277
<p>Menu content</p>
278-
</template>`,
278+
</ng-template>`,
279279
})
280280
class ConnectedOverlayDirectiveTest {
281281
isOpen = false;

‎src/lib/core/overlay/overlay.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,7 @@ class PizzaMsg { }
307307

308308

309309
/** Test-bed component that contains a TempatePortal and an ElementRef. */
310-
@Component({template: `<template cdk-portal>Cake</template>`})
310+
@Component({template: `<ng-template cdk-portal>Cake</ng-template>`})
311311
class TestComponentWithTemplatePortals {
312312
@ViewChild(TemplatePortalDirective) templatePortal: TemplatePortalDirective;
313313

0 commit comments

Comments
 (0)