fix(flexbox): resolve 'renderer.setStyle()' error (#298)

* Revert back to Renderer (from Renderer2); Injecting both Renderers
causes intermittent `TypeError: _this._renderer.setStyle is not a function` errors.
*  Refactor the FxBaseDirective to use a StyleRenderer interface

Fixes #270

Author: ThomasBurleson

package.json

@@ -45,7 +45,7 @@
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.8",
     "rxjs": "^5.0.1",
-    "systemjs": "^0.19.41",
+    "systemjs": "0.19.43",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
@@ -61,81 +61,93 @@
     "@angularclass/request-idle-callback": "^1.0.7",
     "@angularclass/webpack-toolkit": "^1.3.3",
     "@types/core-js": "^0.9.34",
-    "@types/glob": "^5.0.29",
-    "@types/gulp": "^3.8.29",
-    "@types/hammerjs": "~2.0.33",
-    "@types/jasmine": "2.5.38",
-    "@types/merge2": "0.0.28",
-    "@types/minimist": "^1.1.28",
-    "@types/node": "^6.0.45",
-    "@types/run-sequence": "0.0.27",
-    "@types/rx": "^2.5.33",
+    "@types/glob": "^5.0.30",
+    "@types/gulp": "^4.0.3",
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.45",
+    "@types/merge2": "^0.3.30",
+    "@types/minimist": "^1.2.0",
+    "@types/node": "^7.0.21",
+    "@types/run-sequence": "^0.0.29",
+    "@types/rx": "2.5.33",
+
     "@types/source-map": "^0.1.27",
     "@types/uglify-js": "^2.0.27",
-    "@types/webpack": "^1.12.34",
+    "@types/webpack": "^2.2.15",
     "angular2-template-loader": "^0.6.0",
-    "assets-webpack-plugin": "^3.4.0",
-    "awesome-typescript-loader": "3.0.0-beta.9",
+    "assets-webpack-plugin": "^3.5.1",
+    "awesome-typescript-loader": "^3.1.3",
     "browserstacktunnel-wrapper": "^2.0.0",
     "clang-format": "^1.0.45",
     "concurrently": "^2.2.0",
     "conventional-changelog": "^1.1.0",
-    "copy-webpack-plugin": "^4.0.0",
-    "css-loader": "^0.25.0",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.9.0",
-    "fs-extra": "^0.26.5",
-    "glob": "^6.0.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.2",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.11.1",
+    "fs-extra": "^3.0.1",
+    "glob": "^7.1.2",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.1",
     "gulp-better-rollup": "^1.0.2",
     "gulp-clang-format": "^1.0.23",
     "gulp-clean": "^0.3.2",
-    "gulp-cli": "^1.2.2",
+    "gulp-cli": "^1.3.0",
     "gulp-conventional-changelog": "^1.1.0",
-    "gulp-server-livereload": "^1.8.2",
-    "gulp-sourcemaps": "^1.6.0",
+    "gulp-dom": "^0.9.17",
+    "gulp-flatten": "^0.3.1",
+    "gulp-highlight-files": "^0.0.4",
+    "gulp-htmlmin": "^3.0.0",
+    "gulp-if": "^2.0.2",
+    "gulp-markdown": "^1.2.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^3.1.0",
+    "gulp-sourcemaps": "^2.6.0",
+    "gulp-transform": "^2.0.0",
+    "gulp-server-livereload": "^1.9.2",
+    "gulp-transform": "^2.0.0",
     "gulp-typescript": "^2.13.6",
-    "hammerjs": "~2.0.8",
+    "hammerjs": "^2.0.8",
     "html-loader": "^0.4.3",
     "html-webpack-plugin": "^2.22.0",
-    "jasmine-core": "^2.4.1",
-    "karma": "^1.3.0",
+    "jasmine-core": "^2.6.2",
+    "karma": "^1.7.0",
     "karma-browserstack-launcher": "^1.2.0",
-    "karma-chrome-launcher": "^2.0.0",
+    "karma-chrome-launcher": "^2.1.1",
     "karma-coverage": "^1.1.1",
-    "karma-jasmine": "^1.0.2",
+    "karma-firefox-launcher": "^1.0.1",
+    "karma-jasmine": "^1.1.0",
     "karma-mocha-reporter": "^2.0.0",
     "karma-remap-coverage": "^0.1.1",
     "karma-sauce-launcher": "^1.1.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "1.8.1",
-    "madge": "^1.4.4",
-    "merge2": "^1.0.2",
+    "madge": "^1.6.0",
+    "merge2": "^1.0.3",
     "minimist": "^1.2.0",
     "opn-cli": "^3.1.0",
     "prompt-sync": "^4.1.4",
     "raw-loader": "^0.5.1",
     "reflect-metadata": "^0.1.8",
     "resolve-bin": "^0.4.0",
-    "rollup": "^0.34.13",
+    "rollup": "^0.41.6",
     "rollup-plugin-includepaths": "^0.1.6",
     "rollup-plugin-uglify": "^1.0.1",
     "run-sequence": "^1.2.2",
     "sass": "^0.5.0",
     "source-map-loader": "^0.1.5",
     "style-loader": "^0.13.1",
-    "stylelint": "^7.5.0",
+    "stylelint": "^7.10.1",
     "travis-after-modes": "0.0.7",
     "ts-helpers": "1.1.2",
-    "ts-node": "^0.7.3",
-    "tslint": "^4.2.0",
+    "ts-node": "^3.0.4",
+    "tslint": "^5.2.0",
     "tslint-loader": "^3.3.0",
-    "typescript": "^2.1.10",
+    "typescript": "~2.2.1",
     "url-loader": "^0.5.7",
-    "webpack": "2.2.0-rc.3",
+    "webpack": "2.6.1",
     "webpack-bundle-analyzer": "^2.2.0",
-    "webpack-dev-server": "^2.2.0-rc.0",
+    "webpack-dev-server": "^2.4.5",
     "webpack-livereload-plugin": "^0.9.0"
   }
-}
+}

src/lib/flexbox/api/base-adapter.ts

@@ -5,7 +5,7 @@
  * 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 {ElementRef, Renderer2} from '@angular/core';
+import {ElementRef, Renderer} from '@angular/core';
 
 import {BaseFxDirective} from './base';
 import {ResponsiveActivation} from './../responsive/responsive-activation';
@@ -48,7 +48,7 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
   constructor(protected _baseKey: string,   // non-responsive @Input property name
               protected _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
-              protected _renderer: Renderer2 ) {
+              protected _renderer: Renderer ) {
     super(_mediaMonitor, _elementRef, _renderer);
   }
 

src/lib/flexbox/api/base.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {
-  ElementRef, Renderer2, OnDestroy, SimpleChanges, OnChanges,
-  SimpleChange
+  ElementRef, OnDestroy, SimpleChanges, OnChanges,
+  SimpleChange, Renderer
 } from '@angular/core';
 
 import {applyCssPrefixes} from '../../utils/auto-prefixer';
@@ -17,6 +17,7 @@ import {ResponsiveActivation, KeyOptions} from '../responsive/responsive-activat
 import {MediaMonitor} from '../../media-query/media-monitor';
 import {MediaQuerySubscriber} from '../../media-query/media-change';
 
+
 /**
  * Definition of a css style. Either a property name (e.g. "flex-basis") or an object
  * map of property name and value (e.g. {display: 'none', flex-order: 5}).
@@ -64,11 +65,10 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
    */
   constructor(protected _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
-              protected _renderer: Renderer2) {
+              protected _renderer: Renderer) {
     this._display = this._getDisplayStyle();
   }
 
-
   // *********************************************
   // Accessor Methods
   // *********************************************
@@ -148,7 +148,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
     Object.keys(styles).forEach(key => {
       const values = Array.isArray(styles[key]) ? styles[key] : [styles[key]];
       for (let value of values) {
-        this._renderer.setStyle(element, key, value);
+        this._renderer.setElementStyle(element, key, value);
       }
     });
   }
@@ -249,4 +249,5 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
    *  Dictionary of input keys with associated values
    */
   protected _inputMap = {};
+
 }

src/lib/flexbox/api/class.ts

@@ -12,7 +12,6 @@ import {
   DoCheck,
   OnDestroy,
   Renderer,
-  Renderer2,
   IterableDiffers,
   KeyValueDiffers, SimpleChanges, OnChanges
 } from '@angular/core';
@@ -110,10 +109,9 @@ export class ClassDirective extends NgClass implements DoCheck, OnChanges, OnDes
   /* tslint:enable */
   constructor(protected monitor: MediaMonitor,
               _iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers,
-              _ngEl: ElementRef, _oldRenderer: Renderer, _renderer: Renderer2) {
+              _ngEl: ElementRef, _renderer: Renderer) {
 
-    // TODO: this should use Renderer2 as well, but NgClass hasn't switched over yet.
-    super(_iterableDiffers, _keyValueDiffers, _ngEl, _oldRenderer);
+    super(_iterableDiffers, _keyValueDiffers, _ngEl, _renderer);
 
     this._classAdapter = new BaseFxDirectiveAdapter('class', monitor, _ngEl, _renderer);
     this._ngClassAdapter = new BaseFxDirectiveAdapter('ngClass', monitor, _ngEl, _renderer);

src/lib/flexbox/api/flex-align.ts

@@ -12,7 +12,7 @@ import {
   OnInit,
   OnChanges,
   OnDestroy,
-  Renderer2,
+  Renderer,
   SimpleChanges,
 } from '@angular/core';
 
@@ -54,7 +54,7 @@ export class FlexAlignDirective extends BaseFxDirective implements OnInit, OnCha
   @Input('fxFlexAlign.gt-lg') set alignGtLg(val)  { this._cacheInput('alignGtLg', val); };
 
   /* tslint:enable */
-  constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2) {
+  constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) {
     super(monitor, elRef, renderer);
   }
 

src/lib/flexbox/api/flex-fill.ts

@@ -5,7 +5,7 @@
  * 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 {Directive, ElementRef, Renderer2} from '@angular/core';
+import {Directive, ElementRef, Renderer} from '@angular/core';
 
 import {MediaMonitor} from '../../media-query/media-monitor';
 import {BaseFxDirective} from './base';
@@ -29,7 +29,7 @@ const FLEX_FILL_CSS = {
   [fxFlexFill]
 `})
 export class FlexFillDirective extends BaseFxDirective {
-  constructor(monitor: MediaMonitor, public elRef: ElementRef, public renderer: Renderer2) {
+  constructor(monitor: MediaMonitor, public elRef: ElementRef, public renderer: Renderer) {
     super(monitor, elRef, renderer);
     this._applyStyleToElement(FLEX_FILL_CSS);
   }

src/lib/flexbox/api/flex-offset.ts

@@ -12,7 +12,7 @@ import {
   OnInit,
   OnChanges,
   OnDestroy,
-  Renderer2,
+  Renderer,
   SimpleChanges,
 } from '@angular/core';
 
@@ -53,7 +53,7 @@ export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnCh
   @Input('fxFlexOffset.gt-lg') set offsetGtLg(val) { this._cacheInput('offsetGtLg', val); };
 
   /* tslint:enable */
-  constructor(monitor: MediaMonitor,  elRef: ElementRef, renderer: Renderer2) {
+  constructor(monitor: MediaMonitor,  elRef: ElementRef, renderer: Renderer) {
     super(monitor, elRef, renderer);
   }
 

src/lib/flexbox/api/flex-order.ts

@@ -12,7 +12,7 @@ import {
   OnInit,
   OnChanges,
   OnDestroy,
-  Renderer2,
+  Renderer,
   SimpleChanges,
 } from '@angular/core';
 
@@ -52,7 +52,7 @@ export class FlexOrderDirective extends BaseFxDirective implements OnInit, OnCha
   @Input('fxFlexOrder.lt-xl') set orderLtXl(val) { this._cacheInput('orderLtXl', val); };
 
   /* tslint:enable */
-  constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2) {
+  constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) {
     super(monitor, elRef, renderer);
   }
 

src/lib/flexbox/api/flex.ts

@@ -13,7 +13,7 @@
   OnDestroy,
   OnInit,
   Optional,
-  Renderer2,
+  Renderer,
   SimpleChanges,
   SkipSelf,
 } from '@angular/core';
@@ -83,7 +83,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
   // parent flex container for this flex item.
   constructor(monitor: MediaMonitor,
               elRef: ElementRef,
-              renderer: Renderer2,
+              renderer: Renderer,
               @Optional() @SkipSelf() protected _container: LayoutDirective,
               @Optional() @SkipSelf() protected _wrap: LayoutWrapDirective) {
 

src/lib/flexbox/api/layout-align.ts

@@ -13,7 +13,7 @@ import {
   OnDestroy,
   OnInit,
   Optional,
-  Renderer2,
+  Renderer,
   SimpleChanges, Self,
 } from '@angular/core';
 import {Subscription} from 'rxjs/Subscription';
@@ -68,7 +68,7 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC
   /* tslint:enable */
   constructor(
       monitor: MediaMonitor,
-      elRef: ElementRef, renderer: Renderer2,
+      elRef: ElementRef, renderer: Renderer,
       @Optional() @Self() container: LayoutDirective) {
     super(monitor, elRef, renderer);