chore(versions): update to Angular v5.2 and update peer dep requirements

* Update travis to node 8 and npm latest
* Update to Angular v5.2 and TypeScript v2.6
* Update build config to conform with angular/components#9355
* Bring package build patterns in line with angular/material2
* Enable strictNullChecks and refactor as necessary

Closes #560.
Fixes #566, #559.

Author: CaerusKaru

.travis.yml

@@ -26,11 +26,14 @@ jobs:
     - env: "MODE=lint"
     - env: "MODE=aot"
     - env: "MODE=prerender"
+    # Closure Compiler CI check is temporarily disabled until a new version of
+    # the tool is released with https://github.com/google/closure-compiler/pull/2600
+    # - env: "MODE=closure-compiler"
     - env: "MODE=saucelabs_required"
     - env: "MODE=browserstack_required"
     - env: "MODE=travis_required"
     - stage: Deploy
-      env: "DEPLOY_MODE=build-artifacts"
+    - env: "DEPLOY_MODE=build-artifacts"
 env:
   global:
   - LOGS_DIR=/tmp/flex-layout-build/logs
@@ -43,7 +46,6 @@ env:
 
 before_install:
   - source ./scripts/ci/env.sh
-  - npm i -g npm@^5.3
 
 install:
   - npm install
@@ -56,4 +58,4 @@ script:
 
 cache:
   directories:
-    - $HOME/.npm
+    - ./node_modules/

build-config.js

@@ -9,8 +9,11 @@ const package = require('./package.json');
 /** Current version of the project*/
 const buildVersion = package.version;
 
-/** Required Angular version for the project. */
-const angularVersion = package.dependencies['@angular/core'];
+/**
+ * Required Angular version for all Angular Layout packages. This version will be used
+ * as the peer dependency version for Angular in all release packages.
+ */
+const angularVersion = '^5.0.0';
 
 /** License that will be placed inside of all created bundles. */
 const buildLicense = `/**

package-lock.json

@@ -26,10 +26,10 @@
     "node": ">= 5.4.1"
   },
   "dependencies": {
-    "@angular/core": "~5.1.0",
-    "@angular/common": "~5.1.0",
-    "@angular/compiler": "~5.1.0",
-    "@angular/platform-browser": "~5.1.0",
+    "@angular/core": "~5.2.0",
+    "@angular/common": "~5.2.0",
+    "@angular/compiler": "~5.2.0",
+    "@angular/platform-browser": "~5.2.0",
     "core-js": "^2.4.1",
     "rxjs": "^5.5.5",
     "systemjs": "0.19.43",
@@ -38,15 +38,15 @@
     "zone.js": "^0.8.18"
   },
   "devDependencies": {
-    "@angular/animations": "~5.1.0",
+    "@angular/animations": "~5.2.0",
     "@angular/cdk": "^5.0.1",
-    "@angular/compiler-cli": "~5.1.0",
-    "@angular/forms": "~5.1.0",
-    "@angular/http": "~5.1.0",
+    "@angular/compiler-cli": "~5.2.0",
+    "@angular/forms": "~5.2.0",
+    "@angular/http": "~5.2.0",
     "@angular/material": "^5.0.1",
-    "@angular/platform-browser-dynamic": "~5.1.0",
-    "@angular/platform-server": "~5.1.0",
-    "@angular/router": "~5.1.0",
+    "@angular/platform-browser-dynamic": "~5.2.0",
+    "@angular/platform-server": "~5.2.0",
+    "@angular/router": "~5.2.0",
     "@angular/tsc-wrapped": "^4.4.6",
     "@google-cloud/storage": "^1.4.0",
     "@types/chalk": "^0.4.31",
@@ -123,7 +123,7 @@
     "tsconfig-paths": "^2.3.0",
     "tslint": "^5.8.0",
     "tsutils": "^2.13.0",
-    "typescript": "^2.4.2",
+    "typescript": "^2.6.2",
     "uglify-js": "^2.8.14"
   }
 }

package.json

@@ -25,8 +25,8 @@ else
 fi
 
 # Check if tests can be skipped
-if [[ ${fileDiff} =~ ^(.*\.md\s*)*$ ]] && (is_e2e || is_unit); then
-  echo "Skipping e2e and unit tests since only markdown files changed"
+if [[ ${fileDiff} =~ ^(.*\.md\s*)*$ ]]; then
+  echo "Skipping tests since only markdown files changed."
   exit 0
 fi
 
@@ -41,9 +41,8 @@ elif is_unit; then
   $(npm bin)/gulp ci:test
 elif is_prerender; then
   $(npm bin)/gulp ci:prerender
-# Temporarily disabled due to Material Beta.11 package restructures
-#elif is_closure_compiler; then
-#  ./scripts/closure-compiler/build-devapp-bundle.sh
+elif is_closure_compiler; then
+  ./scripts/closure-compiler/build-devapp-bundle.sh
 fi
 
 teardown_tunnel

scripts/ci/travis-testing.sh

@@ -19,9 +19,6 @@ $(npm bin)/tsc -p src/demo-app/tsconfig-build.json --target ES2015 --module ES20
 # Create a list of all RxJS source files.
 rxjsSourceFiles=$(find node_modules/rxjs/ -name '*.js');
 
-# List of entry points in the CDK package. Exclude "testing" since it's not an entry point.
-cdkEntryPoints=($(find node_modules/@angular/cdk -maxdepth 1 -mindepth 1 -type d -not -name testing -not -name typings -not -name esm5 -not -name esm2015 -not -name bundles -not -name cdk -exec basename {} \;))
-
 OPTS=(
   "--language_in=ES6_STRICT"
   "--language_out=ES5"
@@ -39,9 +36,9 @@ OPTS=(
   "--js_module_root=dist/releases/flex-layout"
   "--js_module_root=node_modules/@angular/core"
   "--js_module_root=node_modules/@angular/common"
+  "--js_module_root=node_modules/@angular/common/http"
   "--js_module_root=node_modules/@angular/compiler"
   "--js_module_root=node_modules/@angular/forms"
-  "--js_module_root=node_modules/@angular/http"
   "--js_module_root=node_modules/@angular/router"
   "--js_module_root=node_modules/@angular/platform-browser"
   "--js_module_root=node_modules/@angular/platform-browser/animations"
@@ -55,23 +52,24 @@ OPTS=(
   "--formatting=PRETTY_PRINT"
   "--debug"
 
-  # Include the Material and CDK FESM bundles
+  # Include the Flex Layout FESM bundles
   dist/releases/flex-layout/esm2015/flex-layout.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/material/esm2015/material.js
-  node_modules/@angular/cdk/esm2015/cdk.js
+  node_modules/@angular/core/esm5/index.js
+  node_modules/@angular/common/esm5/index.js
+  node_modules/@angular/common/esm5/http.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
+  node_modules/@angular/material/esm5/material.js
+  node_modules/@angular/cdk/esm5/cdk.js
 
   # Include other dependencies like Zone.js and RxJS
   node_modules/zone.js/dist/zone.js
@@ -84,12 +82,6 @@ OPTS=(
   "--dependency_mode=STRICT"
 )
 
-# Walk through every entry-point of the CDK and add it to closure options.
-for i in "${cdkEntryPoints[@]}"; do
-  OPTS+=("--js_module_root=node_modules/@angular/cdk/${i}")
-  OPTS+=("node_modules/@angular/cdk/esm2015/${i}.js")
-done
-
 # Write closure flags to a closure flagfile.
 closureFlags=$(mktemp)
 echo ${OPTS[*]} > $closureFlags

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

@@ -17,19 +17,19 @@ import {ObservableMedia} from '@angular/flex-layout';
         <div class="containerX">
 
           <div class="colorNested box" fxLayout="row" *ngIf="isVisible">
-            <div [fxLayout]="firstCol"
-                 [fxLayout.xs]="firstColXs"
-                 [fxLayout.md]="firstColMd"
-                 [fxLayout.lg]="firstColLg"
-                 [fxLayout.gt-lg]="firstColGtLg"
+            <div [fxLayout]="cols.firstCol"
+                 [fxLayout.xs]="cols.firstColXs"
+                 [fxLayout.md]="cols.firstColMd"
+                 [fxLayout.lg]="cols.firstColLg"
+                 [fxLayout.gt-lg]="cols.firstColGtLg"
                  fxFlex="50%"
                  fxFlex.gt-sm="25"
                  fxHide.md
                  (click)="toggleLayoutFor(1)" style="cursor: pointer;">
               <div fxFlex>Col #1: First item in row</div>
               <div fxFlex>Col #1: Second item in row</div>
             </div>
-            <div [fxLayout]="secondCol" fxFlex (click)="toggleLayoutFor(2)"
+            <div [fxLayout]="cols.secondCol" fxFlex (click)="toggleLayoutFor(2)"
                  style="cursor: pointer;">
               <div fxFlex>Col #2: First item in column</div>
               <div fxFlex>Col #2: Second item in column</div>
@@ -39,10 +39,10 @@ import {ObservableMedia} from '@angular/flex-layout';
       </mat-card-content>
       <mat-card-footer style="width:95%; font-size: 0.9em; padding-left: 25px;">
         <div fxLayout="row" class="hint" fxLayoutAlign="space-around">
-          <div>&lt;div fxLayout="{{ firstCol }}" fxFlex="50%" fxFlex.gt-sm="25%" fxHide.md &gt;
+          <div>&lt;div fxLayout="{{ cols.firstCol }}" fxFlex="50%" fxFlex.gt-sm="25%" fxHide.md &gt;
           </div>
           <div fxFlex></div>
-          <div>&lt;div fxLayout="{{ secondCol }}" fxFlex &gt;</div>
+          <div>&lt;div fxLayout="{{ cols.secondCol }}" fxFlex &gt;</div>
         </div>
       </mat-card-footer>
     </mat-card>
@@ -52,13 +52,14 @@ export class DemoResponsiveRows implements OnDestroy {
   private _activeMQC: MediaChange;
   private _watcher: Subscription;
 
-  firstCol = 'row';
-  firstColXs = 'column';
-  firstColMd = 'column';
-  firstColLg = 'invalid';
-  firstColGtLg = 'column';
-
-  secondCol = 'column';
+  cols: {[key: string]: string} = {
+    firstCol: 'row',
+    firstColXs: 'column',
+    firstColMd: 'column',
+    firstColLg: 'invalid',
+    firstColGtLg: 'column',
+    secondCol: 'column'
+  };
 
   isVisible = true;
 
@@ -73,17 +74,17 @@ export class DemoResponsiveRows implements OnDestroy {
     this._watcher.unsubscribe();
   }
 
-  toggleLayoutFor(col) {
+  toggleLayoutFor(col: number) {
     switch (col) {
       case 1:
 
-        col = `firstCol${this._activeMQC ? this._activeMQC.suffix : ''}`;
-        this[col] = (this[col] === 'column') ? 'row' : 'column';
+        const set1 = `firstCol${this._activeMQC ? this._activeMQC.suffix : ''}`;
+        this.cols[set1] = (this.cols[set1] === 'column') ? 'row' : 'column';
         break;
 
       case 2:
-        col = 'secondCol';
-        this[col] = (this[col] == 'row') ? 'column' : 'row';
+        const set2 = 'secondCol';
+        this.cols[set2] = (this.cols[set2] == 'row') ? 'column' : 'row';
         break;
     }
   }

src/demo-app/app/docs-layout-responsive/responsiveRowColumns.demo.ts

@@ -38,7 +38,7 @@ export class SplitDirective implements AfterContentInit, OnDestroy {
    * While dragging, continually update the `flex.activatedValue` for each area
    * managed by the splitter.
    */
-  onDrag({x, y}): void {
+  onDrag({x, y}: {x: number, y: number}): void {
     const dragAmount = (this.direction === 'row') ? x : y;
 
     this.areas.forEach((area, i) => {
@@ -56,7 +56,7 @@ export class SplitDirective implements AfterContentInit, OnDestroy {
    * Use the pixel delta change to recalculate the area size (%)
    * Note: flex value may be '', %, px, or '<grow> <shrink> <basis>'
    */
-  calculateSize(value, delta) {
+  calculateSize(value: string|number, delta: number) {
     const containerSizePx = this.elementRef.nativeElement.clientWidth;
     const elementSizePx = Math.round(this.valueToPixel(value, containerSizePx));
 

src/demo-app/app/github-issues/splitter/split.directive.ts

@@ -10,13 +10,13 @@ article, nav, aside, header, footer {
   border-radius: 7px;
 }
 
-#main > article {
+.main > article {
   border-color: #cccc33;
   background: #dddd88;
   cursor: pointer;
 }
 
-#main > nav, #main > aside {
+.main > nav, .main > aside {
   border-color: #8888bb;
   background: #ccccff;
 }

src/demo-app/app/stack-overflow/mozHolyGrail.demo.css

@@ -28,7 +28,7 @@ import {Component} from '@angular/core';
         <div class="containerX">
           <div class="colorNested box" fxLayout="column">
             <header>header</header>
-            <div id="main" [fxLayout]="direction" fxLayout.xs="column" fxFlex
+            <div class="main" [fxLayout]="direction" fxLayout.xs="column" fxFlex
                  (click)="toggleDirection()">
               <nav fxFlex="1 6 20%" fxFlexOrder fxFlexOrder.xs="2"> nav</nav>
               <article fxFlex="3 1 60%" fxFlexOrder fxFlexOrder.xs="1"> article</article>

src/demo-app/app/stack-overflow/mozHolyGrail.demo.ts

@@ -1,3 +1,11 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
 import {ApplicationRef, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

src/demo-app/demo-app-module.ts

@@ -1 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
 declare var module: { id: string };

src/demo-app/demo-app-types.d.ts

@@ -1,3 +1,11 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
 /**
  * This is the main entry-point for the AOT compilation. File will be used to test AOT support.
  */

src/demo-app/main-aot.ts

@@ -1,3 +1,11 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {DemoAppModule} from './demo-app-module';