feat: upgrade to angular RC5

BREAKING CHANGE:

Angular RC5 is now required

The Resizable and ResizeHandle directives are now no longer exported. Instead you must use the ResizableModule. See the readme or the demo app for an example of how to do this.

README.md

@@ -32,22 +32,32 @@ Then use it in your app like so:
 
 ```typescript
 import {Component} from '@angular/core';
-import {Resizable} from 'angular2-resizable';
+import {ResizeEvent} from 'angular2-resizable';
 
 @Component({
   selector: 'demo-app',
-  directives: [Resizable],
   // you should add some styles to the element. See the demo folder for a more fleshed out example
   template: '<div mwl-resizable (resizeEnd)="onResizeEnd($event)"></div>'
 })
-export class DemoApp {
+export class MyComponent {
 
-  onResizeEnd(event: any): void {
+  onResizeEnd(event: ResizeEvent): void {
     console.log('Element was resized', event);
   }
 
 }
 
+// now use within your apps module
+import {NgModule} from '@angular/core';
+import {ResizableModule} from 'angular2-resizable';
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [ResizableModule],
+  bootstrap: [MyComponent]
+})
+class MyModule {}
+
 ```
 
 You may also find it useful to view the [demo source](https://github.com/mattlewis92/angular2-resizable/blob/master/demo/demo.ts).

angular2-resizable.ts

@@ -1,8 +1,2 @@
-import {Resizable} from './src/resizable.directive';
-
-export * from './src/resizable.directive';
-
-// for angular-cli
-export default {
-  directives: [Resizable]
-};
+export * from './src/resizable.module';
+export {ResizeEvent} from './src/resizable.directive';

demo/demo.ts → demo/demo.component.ts

@@ -1,10 +1,8 @@
 import {Component} from '@angular/core';
-import {NgStyle} from '@angular/common';
-import {Resizable, ResizeEvent, ResizeHandle} from './../angular2-resizable';
+import {ResizeEvent} from './../angular2-resizable';
 
 @Component({
   selector: 'demo-app',
-  directives: [Resizable, ResizeHandle, NgStyle],
   styles: [`
     .rectangle {
       position: relative;
@@ -47,7 +45,7 @@ import {Resizable, ResizeEvent, ResizeHandle} from './../angular2-resizable';
     </div>
   `
 })
-export class DemoApp {
+export class Demo {
 
   public style: Object = {};
 

demo/demo.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ResizableModule} from './../angular2-resizable';
+import {Demo} from './demo.component';
+
+@NgModule({
+  declarations: [Demo],
+  imports: [BrowserModule, ResizableModule],
+  bootstrap: [Demo]
+})
+export class DemoModule {}

demo/entry.ts

@@ -1,12 +1,12 @@
 import 'reflect-metadata';
 import 'zone.js/dist/zone';
 import {enableProdMode} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser-dynamic';
-import {DemoApp} from './demo';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {DemoModule} from './demo.module';
 
 declare var ENV: string;
 if (ENV === 'production') {
   enableProdMode();
 }
 
-bootstrap(DemoApp);
+platformBrowserDynamic().bootstrapModule(DemoModule);

package.json

@@ -26,7 +26,8 @@
     "url": "git+https://github.com/mattlewis92/angular2-resizable.git"
   },
   "keywords": [
-    "angular2"
+    "angular2",
+    "resizable"
   ],
   "author": "Matt Lewis",
   "license": "MIT",
@@ -35,11 +36,11 @@
   },
   "homepage": "https://github.com/mattlewis92/angular2-resizable#readme",
   "devDependencies": {
-    "@angular/common": "2.0.0-rc.4",
-    "@angular/compiler": "2.0.0-rc.4",
-    "@angular/core": "2.0.0-rc.4",
-    "@angular/platform-browser": "2.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
+    "@angular/common": "2.0.0-rc.5",
+    "@angular/compiler": "2.0.0-rc.5",
+    "@angular/core": "2.0.0-rc.5",
+    "@angular/platform-browser": "2.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
     "chai": "~3.5.0",
     "commitizen": "~2.8.1",
     "concurrently": "~2.2.0",
@@ -78,7 +79,7 @@
     "zone.js": "~0.6.12"
   },
   "peerDependencies": {
-    "@angular/core": "2.0.0-rc.4"
+    "@angular/core": "2.0.0-rc.5"
   },
   "files": [
     "angular2-resizable.js",

src/resizable.directive.ts

@@ -288,7 +288,7 @@ export class Resizable implements OnInit, AfterViewInit {
   /**
    * @private
    */
-  constructor(private renderer: Renderer, private elm: ElementRef) {}
+  constructor(private renderer: Renderer, public elm: ElementRef) {}
 
   /**
    * @private

src/resizable.module.ts

@@ -0,0 +1,8 @@
+import {NgModule} from '@angular/core';
+import {Resizable, ResizeHandle} from './resizable.directive';
+
+@NgModule({
+  declarations: [Resizable, ResizeHandle],
+  exports: [Resizable, ResizeHandle]
+})
+export class ResizableModule {}

test/entry.ts

@@ -4,17 +4,19 @@ import 'zone.js/dist/zone';
 import 'zone.js/dist/long-stack-trace-zone';
 import 'zone.js/dist/async-test';
 import 'rxjs';
-import {setBaseTestProviders} from '@angular/core/testing';
 import {
-  TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-  TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
+  TestBed
+} from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 import {use} from 'chai';
 import * as sinonChai from 'sinon-chai';
 
 use(sinonChai);
 
-setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
+TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
 
 declare var require: any;
 const testsContext: any = require.context('./', true, /\.spec/);