wip: angular 5 support

This is the PR to introduce Angular 5 support. I'll keep it updated and will fix any new issues as beta and RC versions are released. It should be merged once Angular 5 final is released.

Author: crisbeto

package-lock.json

@@ -25,26 +25,25 @@
     "node": ">= 5.4.1"
   },
   "dependencies": {
-    "@angular/animations": "~4.4.4",
-    "@angular/common": "~4.4.4",
-    "@angular/compiler": "~4.4.4",
-    "@angular/core": "~4.4.4",
-    "@angular/forms": "~4.4.4",
-    "@angular/http": "~4.4.4",
-    "@angular/platform-browser": "~4.4.4",
+    "@angular/animations": "~5.0.0-rc.2",
+    "@angular/common": "~5.0.0-rc.2",
+    "@angular/compiler": "~5.0.0-rc.2",
+    "@angular/core": "~5.0.0-rc.2",
+    "@angular/forms": "~5.0.0-rc.2",
+    "@angular/http": "~5.0.0-rc.2",
+    "@angular/platform-browser": "~5.0.0-rc.2",
     "core-js": "^2.4.1",
-    "rxjs": "^5.0.1",
+    "rxjs": "5.x",
     "systemjs": "0.19.43",
-    "tsickle": "^0.23.5",
+    "tsickle": "^0.24.x",
     "tslib": "^1.7.1",
     "zone.js": "^0.8.12"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "~4.4.4",
-    "@angular/platform-browser-dynamic": "~4.4.4",
-    "@angular/platform-server": "~4.4.4",
-    "@angular/router": "~4.4.4",
-    "@angular/tsc-wrapped": "~4.4.4",
+    "@angular/compiler-cli": "~5.0.0-rc.2",
+    "@angular/platform-browser-dynamic": "~5.0.0-rc.2",
+    "@angular/platform-server": "~5.0.0-rc.2",
+    "@angular/router": "~5.0.0-rc.2",
     "@google-cloud/storage": "^1.1.1",
     "@types/chalk": "^0.4.31",
     "@types/fs-extra": "^3.0.1",
@@ -56,6 +55,7 @@
     "@types/minimist": "^1.2.0",
     "@types/node": "^7.0.21",
     "@types/run-sequence": "^0.0.29",
+    "ajv": "^5.2.3",
     "autoprefixer": "^6.7.6",
     "axe-core": "^2.3.1",
     "axe-webdriverjs": "^1.1.1",
@@ -67,7 +67,7 @@
     "firebase-tools": "^3.11.0",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",
-    "google-closure-compiler": "20170409.0.0",
+    "google-closure-compiler": "20170806.0.0",
     "gulp": "^3.9.1",
     "gulp-clean": "^0.3.2",
     "gulp-clean-css": "^3.3.1",

package.json

@@ -63,17 +63,17 @@ OPTS=(
   dist/releases/material-moment-adapter/esm2015/material-moment-adapter.js
 
   # Include all Angular FESM bundles.
-  node_modules/@angular/core/@angular/core.js
-  node_modules/@angular/common/@angular/common.js
-  node_modules/@angular/compiler/@angular/compiler.js
-  node_modules/@angular/forms/@angular/forms.js
-  node_modules/@angular/http/@angular/http.js
-  node_modules/@angular/router/@angular/router.js
-  node_modules/@angular/platform-browser/@angular/platform-browser.js
-  node_modules/@angular/platform-browser/@angular/platform-browser/animations.js
-  node_modules/@angular/platform-browser-dynamic/@angular/platform-browser-dynamic.js
-  node_modules/@angular/animations/@angular/animations.js
-  node_modules/@angular/animations/@angular/animations/browser.js
+  node_modules/@angular/core/esm5/index.js
+  node_modules/@angular/common/esm5/index.js
+  node_modules/@angular/compiler/esm5/index.js
+  node_modules/@angular/forms/esm5/index.js
+  node_modules/@angular/http/esm5/index.js
+  node_modules/@angular/router/esm5/index.js
+  node_modules/@angular/platform-browser/esm5/index.js
+  node_modules/@angular/platform-browser/esm5/animations/index.js
+  node_modules/@angular/platform-browser-dynamic/esm5/index.js
+  node_modules/@angular/animations/esm5/index.js
+  node_modules/@angular/animations/esm5/browser/index.js
 
   # Include other dependencies like Zone.js, Moment.js, and RxJS
   node_modules/zone.js/dist/zone.js

scripts/closure-compiler/build-devapp-bundle.sh

@@ -67,24 +67,15 @@ describe('Scroll Dispatcher', () => {
     }));
 
     it('should not execute the global events in the Angular zone', () => {
-      const spy = jasmine.createSpy('zone unstable callback');
-      const subscription = fixture.ngZone!.onUnstable.subscribe(spy);
-
       scroll.scrolled(0).subscribe(() => {});
       dispatchFakeEvent(document, 'scroll', false);
 
-      expect(spy).not.toHaveBeenCalled();
-      subscription.unsubscribe();
+      expect(fixture.ngZone!.isStable).toBe(true);
     });
 
     it('should not execute the scrollable events in the Angular zone', () => {
-      const spy = jasmine.createSpy('zone unstable callback');
-      const subscription = fixture.ngZone!.onUnstable.subscribe(spy);
-
-      dispatchFakeEvent(fixture.componentInstance.scrollingElement.nativeElement, 'scroll', false);
-
-      expect(spy).not.toHaveBeenCalled();
-      subscription.unsubscribe();
+      dispatchFakeEvent(fixture.componentInstance.scrollingElement.nativeElement, 'scroll');
+      expect(fixture.ngZone!.isStable).toBe(true);
     });
 
     it('should be able to unsubscribe from the global scrollable', () => {

src/cdk/scrolling/scroll-dispatcher.spec.ts

@@ -141,7 +141,7 @@ export class CdkCellOutlet {
    * a handle to provide that component's cells and context. After init, the CdkCellOutlet will
    * construct the cells with the provided context.
    */
-  static mostRecentCellOutlet: CdkCellOutlet;
+  static mostRecentCellOutlet: CdkCellOutlet | null = null;
 
   constructor(public _viewContainer: ViewContainerRef) {
     CdkCellOutlet.mostRecentCellOutlet = this;

src/cdk/table/row.ts

@@ -286,7 +286,9 @@ export class CdkTable<T> implements CollectionViewer {
         .createEmbeddedView(this._headerDef.template, {cells});
 
     cells.forEach(cell => {
-      CdkCellOutlet.mostRecentCellOutlet._viewContainer.createEmbeddedView(cell.template, {});
+      if (CdkCellOutlet.mostRecentCellOutlet) {
+        CdkCellOutlet.mostRecentCellOutlet._viewContainer.createEmbeddedView(cell.template, {});
+      }
     });
 
     this._changeDetectorRef.markForCheck();
@@ -346,7 +348,10 @@ export class CdkTable<T> implements CollectionViewer {
     const cells = rowData ? this._getCellTemplatesForRow(row) : [];
 
     cells.forEach(cell => {
-      CdkCellOutlet.mostRecentCellOutlet._viewContainer.createEmbeddedView(cell.template, context);
+      if (CdkCellOutlet.mostRecentCellOutlet) {
+        CdkCellOutlet.mostRecentCellOutlet._viewContainer
+            .createEmbeddedView(cell.template, context);
+      }
     });
 
     this._changeDetectorRef.markForCheck();

src/cdk/table/table.ts

@@ -20,7 +20,7 @@
     "skipLibCheck": true,
     "types": [],
     "paths": {
-      "@angular/cdk/*": ["../../dist/packages/cdk/*/public-api"]
+      "@angular/cdk/*": ["../../dist/packages/cdk/*"]
     }
   },
   "files": [

src/cdk/tsconfig-build.json

@@ -21,7 +21,7 @@
     "skipLibCheck": true,
     "types": [],
     "paths": {
-      "@angular/cdk/*": ["../../dist/packages/cdk/*/public-api"]
+      "@angular/cdk/*": ["../../dist/packages/cdk/*"]
     }
   },
   "files": [

src/cdk/tsconfig-es5.json

@@ -15,8 +15,7 @@
     "moduleResolution": "node",
     "noEmitOnError": true,
     "noImplicitAny": true,
-    "rootDir": ".",
-    "outDir": ".",
+    "outDir": "../../../",
     "sourceMap": true,
     "target": "es5",
     "typeRoots": [

src/e2e-app/tsconfig-build.json

@@ -302,8 +302,8 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
   selector: '[matChipRemove]',
   host: {
     'class': 'mat-chip-remove',
-    '(click)': '_handleClick($event)',
-  },
+    '(click)': '_handleClick()',
+  }
 })
 export class MatChipRemove {
   constructor(protected _parentChip: MatChip) {

src/lib/chips/chip.ts

@@ -217,7 +217,7 @@ export abstract class DateAdapter<D> {
    * Checks if two dates are equal.
    * @param first The first date to check.
    * @param second The second date to check.
-   * @returns {boolean} Whether the two dates are equal.
+   * @returns Whether the two dates are equal.
    *     Null dates are considered equal to other null dates.
    */
   sameDate(first: D | null, second: D | null): boolean {

src/lib/core/datetime/date-adapter.ts

@@ -1,8 +1,8 @@
 <button mat-icon-button type="button" [attr.aria-label]="_intl.openCalendarLabel"
         [disabled]="disabled" (click)="_open($event)">
   <mat-icon>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%"
-         fill="currentColor" style="vertical-align: top" focusable="false">
+    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor"
+        style="vertical-align: top" focusable="false">
       <path d="M0 0h24v24H0z" fill="none"/>
       <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
     </svg>

src/lib/datepicker/datepicker-toggle.html

@@ -24,7 +24,7 @@ import {
 } from '@angular/core';
 import {merge} from 'rxjs/observable/merge';
 import {Subscription} from 'rxjs/Subscription';
-import {EXPANSION_PANEL_ANIMATION_TIMING, MatExpansionPanel} from './expansion-panel';
+import {MatExpansionPanel} from './expansion-panel';
 
 
 /**
@@ -64,7 +64,7 @@ import {EXPANSION_PANEL_ANIMATION_TIMING, MatExpansionPanel} from './expansion-p
     trigger('indicatorRotate', [
       state('collapsed', style({transform: 'rotate(0deg)'})),
       state('expanded', style({transform: 'rotate(180deg)'})),
-      transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
     ]),
     trigger('expansionHeight', [
       state('collapsed', style({
@@ -77,7 +77,7 @@ import {EXPANSION_PANEL_ANIMATION_TIMING, MatExpansionPanel} from './expansion-p
       }), {
         params: {expandedHeight: '64px'}
       }),
-      transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
     ]),
   ],
 })

src/lib/expansion/expansion-panel-header.ts

@@ -51,9 +51,6 @@ export const _MatExpansionPanelMixinBase = mixinDisabled(MatExpansionPanelBase);
 /** MatExpansionPanel's states. */
 export type MatExpansionPanelState = 'expanded' | 'collapsed';
 
-/** Time and timing curve for expansion panel animations. */
-export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
-
 /**
  * <mat-expansion-panel> component.
  *
@@ -84,7 +81,7 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
     trigger('bodyExpansion', [
       state('collapsed', style({height: '0px', visibility: 'hidden'})),
       state('expanded', style({height: '*', visibility: 'visible'})),
-      transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
     ]),
   ],
 })

src/lib/expansion/expansion-panel.ts

@@ -8,5 +8,5 @@
 
 export * from './grid-list-module';
 export * from './grid-list';
-export {MatGridTile} from './grid-tile';
+export * from './grid-tile';
 

src/lib/grid-list/public-api.ts

@@ -20,8 +20,8 @@
     "types": [],
     "baseUrl": ".",
     "paths": {
-      "@angular/cdk/*": ["../../dist/packages/cdk/*/public-api"],
-      "@angular/material/*": ["../../dist/packages/material/*/public-api"]
+      "@angular/cdk/*": ["../../dist/packages/cdk/*"],
+      "@angular/material/*": ["../../dist/packages/material/*"]
     }
   },
   "files": [

src/lib/tsconfig-build.json

@@ -21,8 +21,8 @@
     "types": [],
     "baseUrl": ".",
     "paths": {
-      "@angular/cdk/*": ["../../dist/packages/cdk/*/public-api"],
-      "@angular/material/*": ["../../dist/packages/material/*/public-api"]
+      "@angular/cdk/*": ["../../dist/packages/cdk/*"],
+      "@angular/material/*": ["../../dist/packages/material/*"]
     }
   },
   "files": [

src/lib/tsconfig-es5.json

@@ -10,7 +10,7 @@
     "types": ["jasmine"],
     "paths": {
       "@angular/material/*": ["./*"],
-      "@angular/cdk/*": ["../../dist/packages/cdk/*/public-api"]
+      "@angular/cdk/*": ["../../dist/packages/cdk/*"]
     }
   },
   "include": [

src/lib/tsconfig-tests.json

@@ -20,9 +20,9 @@
     "types": [],
     "baseUrl": ".",
     "paths": {
-      "@angular/material/*": ["../../dist/packages/material/*/public-api"],
-      "@angular/material": ["../../dist/packages/material/public-api"],
-      "@angular/cdk/*": ["../../dist/packages/cdk/*/public-api"]
+      "@angular/material/*": ["../../dist/packages/material/*"],
+      "@angular/material": ["../../dist/packages/material"],
+      "@angular/cdk/*": ["../../dist/packages/cdk/*"]
     }
   },
   "files": [

src/material-examples/tsconfig-build.json

@@ -20,9 +20,9 @@
     "types": [],
     "baseUrl": ".",
     "paths": {
-      "@angular/material/*": ["../../dist/packages/material/*/public-api"],
+      "@angular/material/*": ["../../dist/packages/material/*"],
       "@angular/material": ["../../dist/packages/material/public-api"],
-      "@angular/cdk/*": ["../../dist/packages/cdk/*/public-api"]
+      "@angular/cdk/*": ["../../dist/packages/cdk/*"]
     }
   },
   "files": [

src/material-examples/tsconfig-es5.json

@@ -22,9 +22,9 @@
     "skipLibCheck": true,
     "types": [],
     "paths": {
-      "@angular/material/*": ["../../dist/packages/material/*/public-api"],
+      "@angular/material/*": ["../../dist/packages/material/*"],
       "@angular/material": ["../../dist/packages/material/public-api"],
-      "@angular/cdk/*": ["../../dist/packages/cdk/*/public-api"]
+      "@angular/cdk/*": ["../../dist/packages/cdk/*"]
     }
   },
   "files": [

src/material-moment-adapter/tsconfig-build.json

@@ -23,9 +23,9 @@
     "skipLibCheck": true,
     "types": [],
     "paths": {
-      "@angular/material/*": ["../../dist/packages/material/*/public-api"],
+      "@angular/material/*": ["../../dist/packages/material/*"],
       "@angular/material": ["../../dist/packages/material/public-api"],
-      "@angular/cdk/*": ["../../dist/packages/cdk/*/public-api"]
+      "@angular/cdk/*": ["../../dist/packages/cdk/*"]
     }
   },
   "files": [

src/material-moment-adapter/tsconfig-es5.json

@@ -6,7 +6,9 @@ import {renderModuleFactory} from '@angular/platform-server';
 import {join} from 'path';
 import {readFileSync} from 'fs-extra';
 import {log} from 'gulp-util';
-import {KitchenSinkServerModuleNgFactory} from './kitchen-sink/kitchen-sink.ngfactory';
+import {
+  KitchenSinkServerModuleNgFactory
+} from './dist/packages/universal-app/kitchen-sink/kitchen-sink.ngfactory';
 
 enableProdMode();
 

src/universal-app/prerender.ts

@@ -5,7 +5,8 @@
     "declaration": true,
     "stripInternal": false,
     "experimentalDecorators": true,
-    "noUnusedParameters": true,
+    // TODO(crisbeto): disabled due to https://github.com/angular/angular/issues/17131
+    "noUnusedParameters": false,
     "strictNullChecks": true,
     "module": "commonjs",
     "moduleResolution": "node",

src/universal-app/tsconfig-build.json

@@ -10,17 +10,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.4.4",
+    "@angular/animations": "~5.0.0-rc.2",
     "@angular/cdk": "github:angular/cdk-builds",
-    "@angular/common": "^4.4.4",
-    "@angular/compiler": "^4.4.4",
-    "@angular/core": "^4.4.4",
-    "@angular/forms": "^4.4.4",
-    "@angular/http": "^4.4.4",
+    "@angular/common": "~5.0.0-rc.2",
+    "@angular/compiler": "~5.0.0-rc.2",
+    "@angular/core": "~5.0.0-rc.2",
+    "@angular/forms": "~5.0.0-rc.2",
+    "@angular/http": "~5.0.0-rc.2",
     "@angular/material": "github:angular/material2-builds",
-    "@angular/platform-browser": "^4.4.4",
-    "@angular/platform-browser-dynamic": "^4.4.4",
-    "@angular/router": "^4.4.4",
+    "@angular/platform-browser": "~5.0.0-rc.2",
+    "@angular/platform-browser-dynamic": "~5.0.0-rc.2",
+    "@angular/router": "~5.0.0-rc.2",
     "@swimlane/ngx-charts": "^6.0.0",
     "angularfire2": "^5.0.0-rc.2",
     "core-js": "^2.4.1",
@@ -31,8 +31,8 @@
   },
   "devDependencies": {
     "@angular/cli": "^1.2.0",
-    "@angular/compiler-cli": "^4.4.4",
-    "@angular/language-service": "^4.4.4",
+    "@angular/compiler-cli": "~5.0.0-rc.2",
+    "@angular/language-service": "~5.0.0-rc.2",
     "@types/jasmine": "2.5.45",
     "@types/node": "~6.0.60",
     "ts-node": "~3.0.4",