valor-software · valorkin · Sep 15, 2016 · Sep 6, 2016 · Sep 7, 2016 · Sep 7, 2016
diff --git a/components/file-upload/file-drop.directive.spec.ts b/components/file-upload/file-drop.directive.spec.ts
@@ -1,20 +1,27 @@
-import {Component} from '@angular/core';
-import {it, inject, beforeEachProviders} from '@angular/core/testing';
-import {ComponentFixture} from '@angular/compiler/testing';
-import {FileUploader} from './file-uploader.class';
-import {FileSelectDirective} from './file-select.directive';
+import { Component} from '@angular/core';
+import { inject, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileUploader } from './file-uploader.class';
+import { FileUploadModule } from './file-upload.module';
+
 @Component({
   selector: 'container',
-  template: `<input type="file" ng2FileSelect [uploader]="uploader" />`,
-  directives: [FileSelectDirective]
+  template: `<input type="file" ng2FileSelect [uploader]="uploader" />`
 })
 export class ContainerComponent {
   public uploader:FileUploader = new FileUploader({url: 'localhost:3000'});
 }
+
 describe('Directive: FileSelectDirective', () => {
-  beforeEachProviders(() => [
-    ContainerComponent
-  ]);
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [FileUploadModule],
+      declarations: [ContainerComponent],
+      providers: [ContainerComponent]
+    });
+  });
+
   it('should be fine', inject([ContainerComponent], (fixture:ComponentFixture<ContainerComponent>) => {
     expect(fixture).not.toBeNull();
   }));

diff --git a/components/file-upload/file-upload.module.ts b/components/file-upload/file-upload.module.ts
@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { FileDropDirective } from './file-drop.directive';
+import { FileSelectDirective } from './file-select.directive';
+
+@NgModule({
+    imports: [CommonModule],
+    declarations: [FileDropDirective, FileSelectDirective],
+    exports: [FileDropDirective, FileSelectDirective]
+})
+export class FileUploadModule {
+}
diff --git a/demo/app.component.ts b/demo/app.component.ts
@@ -0,0 +1,34 @@
+import {Component} from '@angular/core';
+
+let gettingStarted = require('./getting-started.md');
+
+@Component({
+  selector: 'app',
+  template: `
+  <main class="bd-pageheader">
+    <div class="container">
+      <h1>ng2-file-upload</h1>
+      <p>The Angular2 File Upload directives</p>
+      <a class="btn btn-primary" href="https://github.com/valor-software/ng2-file-upload">View on GitHub</a>
+      <div class="row">
+        <div class="col-lg-1"><iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-file-upload&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe></div>
+        <div class="col-lg-1"><iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-file-upload&type=fork&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe></div>
+      </div>
+    </div>
+  </main>
+
+  <div class="container">
+    <section id="getting-started">${gettingStarted}</section>
+
+    <file-upload-section class="col-md-12"></file-upload-section>
+  </div>
+
+  <footer class="footer">
+    <div class="container">
+      <p class="text-muted text-center"><a href="https://github.com/valor-software/ng2-file-upload">ng2-file-upload</a> is maintained by <a href="https://github.com/valor-software">valor-software</a>.</p>
+    </div>
+  </footer>
+  `
+})
+export class DemoComponent {
+}
diff --git a/demo/components/file-upload-section.ts b/demo/components/file-upload-section.ts
@@ -1,10 +1,5 @@
 import {Component} from '@angular/core';
-import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
-import {SimpleDemoComponent} from './file-upload/simple-demo';
-
-let name = 'File Upload';
 let doc = require('../../components/file-upload/readme.md');
 
 let tabDesc:Array<any> = [
@@ -16,62 +11,55 @@ let tabDesc:Array<any> = [
   }
 ];
 
-let tabsContent:string = ``;
-tabDesc.forEach((desc:any) => {
-  tabsContent += `
-          <tab heading="${desc.heading}" (select)="select($event)">
+@Component({
+  selector: 'file-upload-section',
+  template: `
+  <section [id]="name.toLowerCase()">
+    <div class="row">
+      <tabset>
+         <tab *ngFor="let desc of tabs" heading="{{desc.heading}}" (select)="select($event)">
           <div class="card card-block panel panel-default panel-body">
 
-            <${desc.heading.toLowerCase()}-demo *ngIf="currentHeading === '${desc.heading}'"></${desc.heading.toLowerCase()}-demo>
+            <simple-demo></simple-demo>
 
             <br>
 
             <div class="row" style="margin: 0px;">
               <tabset>
                 <tab heading="Markup">
                   <div class="card card-block panel panel-default panel-body">
-                    <pre class="language-html"><code class="language-html" ng-non-bindable>${desc.html}</code></pre>
+                    <pre class="language-html"><code class="language-html" ng-non-bindable [innerHTML]="desc.html"></code></pre>
                   </div>
                 </tab>
                 <tab heading="TypeScript">
                   <div class="card card-block panel panel-default panel-body">
-                    <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${desc.ts}</code></pre>
+                    <pre class="language-typescript"><code class="language-typescript" ng-non-bindable [innerHTML]="desc.ts"></code></pre>
                   </div>
                 </tab>
                 <tab heading="Backend Demo">
                   <div class="card card-block panel panel-default panel-body">
-                    <pre class="language-javascript"><code class="language-javascript" ng-non-bindable>${desc.js}</code></pre>
+                    <pre class="language-javascript"><code class="language-javascript" ng-non-bindable [innerHTML]="desc.js"></code></pre>
                   </div>
                 </tab>
               </tabset>
             </div>
           </div>
         </tab>
-  `;
-});
-
-@Component({
-  selector: 'file-upload-section',
-  template: `
-  <section id="${name.toLowerCase()}">
-    <div class="row">
-      <tabset>
-
-        ${tabsContent}
-
       </tabset>
     </div>
 
     <div class="row">
       <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
+      <div class="card card-block panel panel-default panel-body" [innerHTML]="doc"></div>
     </div>
   </section>
-  `,
-  directives: [SimpleDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES]
+  `
 })
 export class FileUploadSectionComponent {
+  public name:string = 'File Upload';
   public currentHeading:string = 'Simple';
+  public doc:string = doc;
+  public tabs:any = tabDesc;
 
   public select(e:any):void {
     if (e.heading) {

diff --git a/demo/components/file-upload/simple-demo.ts b/demo/components/file-upload/simple-demo.ts
@@ -1,6 +1,5 @@
-import {Component} from '@angular/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle} from '@angular/common';
-import {FILE_UPLOAD_DIRECTIVES, FileUploader} from '../../../ng2-file-upload';
+import { Component } from '@angular/core';
+import { FileUploader } from '../../../ng2-file-upload';
 
 // webpack html imports
 let template = require('./simple-demo.html');
@@ -10,8 +9,7 @@ const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';
 
 @Component({
   selector: 'simple-demo',
-  template: template,
-  directives: [FILE_UPLOAD_DIRECTIVES, NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES]
+  template: template
 })
 export class SimpleDemoComponent {
   public uploader:FileUploader = new FileUploader({url: URL});

diff --git a/demo/index.ts b/demo/index.ts
@@ -1,44 +1,4 @@
-import {bootstrap} from '@angular/platform-browser-dynamic';
-import {Component} from '@angular/core';
-import {NgClass} from '@angular/common';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { NgFileUploadDemo } from './ng2-file-upload-demo.module';
 
-import {FileUploadSectionComponent} from './components/file-upload-section';
-
-let gettingStarted = require('./getting-started.md');
-
-@Component({
-  selector: 'app',
-  template: `
-  <main class="bd-pageheader">
-    <div class="container">
-      <h1>ng2-file-upload</h1>
-      <p>The Angular2 File Upload directives</p>
-      <a class="btn btn-primary" href="https://github.com/valor-software/ng2-file-upload">View on GitHub</a>
-      <div class="row">
-        <div class="col-lg-1"><iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-file-upload&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe></div>
-        <div class="col-lg-1"><iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-file-upload&type=fork&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe></div>
-      </div>
-    </div>
-  </main>
-
-  <div class="container">
-    <section id="getting-started">${gettingStarted}</section>
-
-    <file-upload-section class="col-md-12"></file-upload-section>
-  </div>
-
-  <footer class="footer">
-    <div class="container">
-      <p class="text-muted text-center"><a href="https://github.com/valor-software/ng2-file-upload">ng2-file-upload</a> is maintained by <a href="https://github.com/valor-software">valor-software</a>.</p>
-    </div>
-  </footer>
-  `,
-  directives: [
-    NgClass,
-    FileUploadSectionComponent
-  ]
-})
-export class DemoComponent {
-}
-
-bootstrap(DemoComponent);
+platformBrowserDynamic().bootstrapModule(NgFileUploadDemo);
diff --git a/demo/ng2-file-upload-demo.module.ts b/demo/ng2-file-upload-demo.module.ts
@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
+import { FileUploadModule } from '../components/file-upload/file-upload.module';
+import { DemoComponent } from './app.component.ts';
+import { FileUploadSectionComponent } from './components/file-upload-section';
+import { SimpleDemoComponent } from './components/file-upload/simple-demo';
+
+@NgModule({
+    imports: [BrowserModule, CommonModule, FileUploadModule, Ng2BootstrapModule, FormsModule],
+    declarations: [DemoComponent, FileUploadSectionComponent, SimpleDemoComponent],
+    bootstrap: [DemoComponent]
+})
+export class NgFileUploadDemo {
+}
diff --git a/ng2-file-upload.ts b/ng2-file-upload.ts
@@ -2,13 +2,4 @@ export * from  './components/file-upload/file-select.directive';
 export * from  './components/file-upload/file-drop.directive';
 export * from  './components/file-upload/file-uploader.class';
 
-import {FileSelectDirective} from './components/file-upload/file-select.directive';
-import {FileDropDirective} from './components/file-upload/file-drop.directive';
-
-export const FILE_UPLOAD_DIRECTIVES:[any] = [FileSelectDirective, FileDropDirective];
-
-export default {
-  directives: [
-    FILE_UPLOAD_DIRECTIVES
-  ]
-};
+export { FileUploadModule } from './components/file-upload/file-upload.module';
diff --git a/package.json b/package.json
@@ -48,15 +48,16 @@
   "homepage": "https://github.com/valor-software/ng2-file-upload#readme",
   "dependencies": {},
   "peerDependencies": {
-    "@angular/common": "^2.0.0-rc.1",
-    "@angular/core": "^2.0.0-rc.1"
+    "@angular/common": "2.0.0-rc.6",
+    "@angular/core": "2.0.0-rc.6"
   },
   "devDependencies": {
-    "@angular/common": "^2.0.0-rc.1",
-    "@angular/compiler": "^2.0.0-rc.1",
-    "@angular/core": "^2.0.0-rc.1",
-    "@angular/platform-browser": "^2.0.0-rc.1",
-    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
+    "@angular/common": "2.0.0-rc.6",
+    "@angular/compiler": "2.0.0-rc.6",
+    "@angular/core": "2.0.0-rc.6",
+    "@angular/platform-browser": "2.0.0-rc.6",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
+    "@angular/forms": "2.0.0-rc.6",
     "async": "1.5.2",
     "bootstrap": "3.3.6",
     "codecov": "1.0.1",
@@ -92,7 +93,7 @@
     "lite-server": "2.2.0",
     "markdown-loader": "0.1.7",
     "marked": "0.3.5",
-    "ng2-bootstrap": "1.0.17",
+    "ng2-bootstrap": "1.1.1",
     "phantomjs-polyfill": "0.0.2",
     "phantomjs-prebuilt": "2.1.7",
     "pre-commit": "1.1.3",
@@ -101,7 +102,7 @@
     "raw-loader": "0.5.1",
     "reflect-metadata": "0.1.2",
     "require-dir": "0.3.0",
-    "rxjs": "5.0.0-beta.6",
+    "rxjs": "5.0.0-beta.11",
     "source-map-loader": "0.1.5",
     "systemjs-builder": "0.15.19",
     "ts-loader": "0.8.2",
@@ -110,7 +111,7 @@
     "typings": "0.8.1",
     "webpack": "1.13.1",
     "webpack-dev-server": "1.14.1",
-    "zone.js": "0.6.12"
+    "zone.js": "0.6.17"
   },
   "contributors": [
     {

diff --git a/test.bundle.js b/test.bundle.js
@@ -17,18 +17,21 @@ require('es6-promise');
 require('es6-shim');
 require('es7-reflect-metadata/dist/browser');
 
-// require('zone.js');
-require('zone.js/dist/zone.js');
-require('zone.js/dist/long-stack-trace-zone.js');
-require('zone.js/dist/jasmine-patch.js');
-require('zone.js/dist/async-test.js');
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/proxy');
+require('zone.js/dist/jasmine-patch');
 
 var testing = require('@angular/core/testing');
 var browser = require('@angular/platform-browser-dynamic/testing');
 
-testing.setBaseTestProviders(
-  browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-  browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
+testing.TestBed.initTestEnvironment(
+  browser.BrowserDynamicTestingModule,
+  browser.platformBrowserDynamicTesting()
+);
 
 /*
  Ok, this is kinda crazy. We can use the the context method on