1.1.3-0

fixes #436

.gitignore

@@ -8,6 +8,7 @@ npm-debug.log
 
 # WebStorm
 .idea
+.vscode
 
 # ignore build and dist for now
 /bundles
@@ -19,6 +20,7 @@ npm-debug.log
 # ignore incline compiling
 /demo/**/*.js
 /demo/**/*.d.ts
+!/demo/custom-typings.d.ts
 /demo/**/*.js.map
 /components/**/*.js
 /components/**/*.d.ts
@@ -29,3 +31,8 @@ ng2-file-upload.js.map
 /logs
 
 !/demo/components/file-upload/file-catcher.js
+
+# AoT generated files
+factories
+/**/*.metadata.json
+/**/*.ngfactory.ts

.ng2-config.js

@@ -0,0 +1,29 @@
+'use strict';
+var pkg = require('./package.json');
+
+module.exports = {
+  // metadata
+  title: pkg.description,
+  baseUrl: '/',
+  // root folder name
+  src: 'demo',
+  dist: 'demo-build',
+  htmlIndexes: ['index.html'],
+  // karma bundle src
+  spec: './spec-bundle.js',
+  // webpack entry
+  entry: {
+    polyfills: './demo/polyfills.ts',
+    vendor: './demo/vendor.ts',
+    main: './demo/index.ts'
+  },
+  commonChunks: {
+    name: ['polyfills', 'vendor'].reverse()
+  },
+  // webpack alias
+  alias: {},
+  copy: [
+    {from: 'demo/favicon.ico', to: 'favicon.ico'},
+    {from: 'demo/assets', to: 'assets'}
+  ]
+};

.npmignore

@@ -22,3 +22,6 @@ webpack.config.js
 /components/**/*.ts
 !/components/**/*.d.ts
 
+# AoT generated files
+factories
+/**/*.ngfactory.ts

.travis.yml

@@ -3,11 +3,10 @@ node_js:
   - "6"
 
 script:
-  - npm run flow.install:typings
   - npm test
 
 after_success:
-  - ./node_modules/.bin/codecov
+  - ./node_modules/.bin/codecov  -f coverage/coverage-final.json
 
 addons:
   # sauce labs tunel connector (read more https://docs.travis-ci.com/user/sauce-connect/ )

CHANGELOG.md

@@ -1,3 +1,64 @@
+<a name="1.1.3-0"></a>
+## [1.1.3-0](https://github.com/valor-software/ng2-file-upload/compare/v1.1.2...v1.1.3-0) (2016-10-19)
+
+
+### Bug Fixes
+
+* **typing:** added authTokenHeader property to options and file upload class ([b55c852](https://github.com/valor-software/ng2-file-upload/commit/b55c852))
+
+
+### Features
+
+* **build:** added support for AoT and ng-cli ([f0b2879](https://github.com/valor-software/ng2-file-upload/commit/f0b2879)), closes [#436](https://github.com/valor-software/ng2-file-upload/issues/436)
+* **file-upload:** Add the possibility of set the token header ([#213](https://github.com/valor-software/ng2-file-upload/issues/213)) ([282295c](https://github.com/valor-software/ng2-file-upload/commit/282295c))
+
+
+
+<a name="1.1.2"></a>
+## [1.1.2](https://github.com/valor-software/ng2-file-upload/compare/v1.1.1...v1.1.2) (2016-10-17)
+
+
+### Features
+
+* **package:** allow of ng2 v2.0.* and v2.*.* ([87395e6](https://github.com/valor-software/ng2-file-upload/commit/87395e6))
+
+
+
+<a name="1.1.1"></a>
+## [1.1.1](https://github.com/valor-software/ng2-file-upload/compare/v1.0.3...v1.1.1) (2016-10-17)
+
+
+### Bug Fixes
+
+* **uploader:** Add the ability to upload files via PUT instead of POST ([#239](https://github.com/valor-software/ng2-file-upload/issues/239)) ([e068511](https://github.com/valor-software/ng2-file-upload/commit/e068511))
+* **zone.js:**  error in Safari, Added Typings ([#221](https://github.com/valor-software/ng2-file-upload/issues/221)) ([db77e89](https://github.com/valor-software/ng2-file-upload/commit/db77e89))
+
+
+### Features
+
+* **multipart:** Create disableMultipart option in FileUploader ([#224](https://github.com/valor-software/ng2-file-upload/issues/224)) ([22307d2](https://github.com/valor-software/ng2-file-upload/commit/22307d2))
+* **package:** angular ~2.0.1 stable release ([#425](https://github.com/valor-software/ng2-file-upload/issues/425)) ([3fec385](https://github.com/valor-software/ng2-file-upload/commit/3fec385))
+* **package:** updated to typescript 2 ([4fef496](https://github.com/valor-software/ng2-file-upload/commit/4fef496))
+
+
+
+<a name="1.1.0"></a>
+# [1.1.0](https://github.com/valor-software/ng2-file-upload/compare/v1.0.3...v1.1.0) (2016-09-21)
+
+
+### Bug Fixes
+
+* **uploader:** Add the ability to upload files via PUT instead of POST ([#239](https://github.com/valor-software/ng2-file-upload/issues/239)) ([e068511](https://github.com/valor-software/ng2-file-upload/commit/e068511))
+* **zone.js:**  error in Safari, Added Typings ([#221](https://github.com/valor-software/ng2-file-upload/issues/221)) ([db77e89](https://github.com/valor-software/ng2-file-upload/commit/db77e89))
+
+
+### Features
+
+* **multipart:** Create disableMultipart option in FileUploader ([#224](https://github.com/valor-software/ng2-file-upload/issues/224)) ([22307d2](https://github.com/valor-software/ng2-file-upload/commit/22307d2))
+* **package:** updated to typescript 2 ([4fef496](https://github.com/valor-software/ng2-file-upload/commit/4fef496))
+
+
+
 <a name="1.0.3"></a>
 ## [1.0.3](https://github.com/valor-software/ng2-file-upload/compare/v1.0.2...v1.0.3) (2016-05-12)
 

README.md

@@ -37,10 +37,12 @@ Follow me [![twitter](https://img.shields.io/twitter/follow/valorkin.svg?style=s
 
   - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts)
 
-  Parameters that supported by this object:
+  Parameters supported by this object:
 
   1. `url` - URL of File Uploader's route
   2. `authToken` - Auth token that will be applied as 'Authorization' header during file send.
+  3. `disableMultipart` - If 'true', disable using a multipart form for file upload and instead stream the file. Some APIs (e.g. Amazon S3) may expect the file to be streamed rather than sent via a form. Defaults to false.
+  4. `itemAlias` - item alias (form name redefenition)
 
 ### Events
 

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();
   }));

components/file-upload/file-drop.directive.ts

@@ -6,9 +6,10 @@ import { FileUploader } from './file-uploader.class';
 export class FileDropDirective {
   @Input() public uploader:FileUploader;
   @Output() public fileOver:EventEmitter<any> = new EventEmitter();
-  @Output() public onFileDrop:EventEmitter<File[]> = new EventEmitter();
+  @Output() public onFileDrop:EventEmitter<File[]> = new EventEmitter<File[]>();
 
   private element:ElementRef;
+
   public constructor(element:ElementRef) {
     this.element = element;
   }
@@ -80,12 +81,13 @@ export class FileDropDirective {
       return false;
     }
   }
-/*
-  _addOverClass(item:any):any {
-    item.addOverClass();
-  }
 
-  _removeOverClass(item:any):any {
-    item.removeOverClass();
-  }*/
+  /*
+   _addOverClass(item:any):any {
+   item.addOverClass();
+   }
+
+   _removeOverClass(item:any):any {
+   item.removeOverClass();
+   }*/
 }

components/file-upload/file-item.class.ts

@@ -1,14 +1,12 @@
-import {NgZone} from '@angular/core';
-
-import {FileLikeObject} from './file-like-object.class';
-import {FileUploader} from './file-uploader.class';
+import { FileLikeObject } from './file-like-object.class';
+import { FileUploader, ParsedResponseHeaders, FileUploaderOptions } from './file-uploader.class';
 
 export class FileItem {
   public file:FileLikeObject;
   public _file:File;
-  public alias:string = 'file';
+  public alias:string;
   public url:string = '/';
-  public method:string = 'POST';
+  public method:string;
   public headers:any = [];
   public withCredentials:boolean = true;
   public formData:any = [];
@@ -20,28 +18,32 @@ export class FileItem {
   public isError:boolean = false;
   public progress:number = 0;
   public index:number = void 0;
-  private _zone:NgZone;
+  public _xhr:XMLHttpRequest;
+  public _form:any;
 
   private uploader:FileUploader;
-  private some:any;
-  private options:any;
+  private some:File;
+  private options:FileUploaderOptions;
 
-  public constructor(uploader:FileUploader, some:any, options:any) {
+  public constructor(uploader:FileUploader, some:File, options:FileUploaderOptions) {
     this.uploader = uploader;
     this.some = some;
     this.options = options;
     this.file = new FileLikeObject(some);
     this._file = some;
+    if (uploader.options) {
+      this.method = uploader.options.method || 'POST';
+      this.alias = uploader.options.itemAlias || 'file';
+    }
     this.url = uploader.options.url;
-    this._zone = new NgZone({ enableLongStackTrace: false });
   }
 
   public upload():void {
     try {
       this.uploader.uploadItem(this);
     } catch (e) {
-      this.uploader._onCompleteItem(this, '', 0, []);
-      this.uploader._onErrorItem(this, '', 0, []);
+      this.uploader._onCompleteItem(this, '', 0, {});
+      this.uploader._onErrorItem(this, '', 0, {});
     }
   }
 
@@ -65,20 +67,20 @@ export class FileItem {
     return {progress};
   }
 
-  public onSuccess(response:any, status:any, headers:any):any {
-    return {response,status,headers};
+  public onSuccess(response:string, status:number, headers:ParsedResponseHeaders):any {
+    return {response, status, headers};
   }
 
-  public onError(response:any, status:any, headers:any):any {
-    return {response,status,headers};
+  public onError(response:string, status:number, headers:ParsedResponseHeaders):any {
+    return {response, status, headers};
   }
 
-  public onCancel(response:any, status:any, headers:any):any {
-    return {response,status,headers};
+  public onCancel(response:string, status:number, headers:ParsedResponseHeaders):any {
+    return {response, status, headers};
   }
 
-  public onComplete(response:any, status:any, headers:any):any {
-    return {response,status,headers};
+  public onComplete(response:string, status:number, headers:ParsedResponseHeaders):any {
+    return {response, status, headers};
   }
 
   public _onBeforeUpload():void {
@@ -97,13 +99,11 @@ export class FileItem {
   }
 
   public _onProgress(progress:number):void {
-    this._zone.run(() => {
-      this.progress = progress;
-    });
+    this.progress = progress;
     this.onProgress(progress);
   }
 
-  public _onSuccess(response:any, status:any, headers:any):void {
+  public _onSuccess(response:string, status:number, headers:ParsedResponseHeaders):void {
     this.isReady = false;
     this.isUploading = false;
     this.isUploaded = true;
@@ -115,7 +115,7 @@ export class FileItem {
     this.onSuccess(response, status, headers);
   }
 
-  public _onError(response:any, status:any, headers:any):void {
+  public _onError(response:string, status:number, headers:ParsedResponseHeaders):void {
     this.isReady = false;
     this.isUploading = false;
     this.isUploaded = true;
@@ -127,7 +127,7 @@ export class FileItem {
     this.onError(response, status, headers);
   }
 
-  public _onCancel(response:any, status:any, headers:any):void {
+  public _onCancel(response:string, status:number, headers:ParsedResponseHeaders):void {
     this.isReady = false;
     this.isUploading = false;
     this.isUploaded = false;
@@ -139,7 +139,7 @@ export class FileItem {
     this.onCancel(response, status, headers);
   }
 
-  public _onComplete(response:any, status:any, headers:any):void {
+  public _onComplete(response:string, status:number, headers:ParsedResponseHeaders):void {
     this.onComplete(response, status, headers);
 
     if (this.uploader.options.removeAfterUpload) {

components/file-upload/file-like-object.class.ts

@@ -23,7 +23,7 @@ export class FileLikeObject {
     this.name = path.slice(path.lastIndexOf('/') + path.lastIndexOf('\\') + 2);
   }
 
-  public _createFromObject(object:{size: number, type: string, name: string}):void {
+  public _createFromObject(object:{size:number, type:string, name:string}):void {
     // this.lastModifiedDate = copy(object.lastModifiedDate);
     this.size = object.size;
     this.type = object.type;

components/file-upload/file-select.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, ElementRef, Input, HostListener } from '@angular/core';
 
-import {FileUploader} from './file-uploader.class';
+import { FileUploader } from './file-uploader.class';
 
 // todo: filters
 
@@ -9,6 +9,7 @@ export class FileSelectDirective {
   @Input() public uploader:FileUploader;
 
   private element:ElementRef;
+
   public constructor(element:ElementRef) {
     this.element = element;
   }

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 {
+}

components/file-upload/file-uploader.class.ts

@@ -1,6 +1,6 @@
-import {FileLikeObject} from './file-like-object.class';
-import {FileItem} from './file-item.class';
-import {FileType} from './file-type.class';
+import { FileLikeObject } from './file-like-object.class';
+import { FileItem } from './file-item.class';
+import { FileType } from './file-type.class';
 
 function isFile(value:any):boolean {
   return (File && value instanceof File);
@@ -11,45 +11,57 @@ export interface Headers {
   value:string;
 }
 
+export type ParsedResponseHeaders = {[headerFieldName:string]:string};
+
+export type FilterFunction = {name:string, fn:(item?:FileLikeObject, options?:FileUploaderOptions)=>boolean};
+
 export interface FileUploaderOptions {
   allowedMimeType?:Array<string>;
   allowedFileType?:Array<string>;
   autoUpload?:boolean;
   isHTML5?:boolean;
-  filters?:Array<any>;
+  filters?:Array<FilterFunction>;
   headers?:Array<Headers>;
+  method?:string;
+  authToken?:string;
   maxFileSize?:number;
   queueLimit?:number;
   removeAfterUpload?:boolean;
   url?:string;
+  disableMultipart?:boolean;
+  itemAlias?: string;
+  authTokenHeader?: string;
 }
 
 export class FileUploader {
 
   public authToken:string;
   public isUploading:boolean = false;
-  public queue:Array<any> = [];
+  public queue:Array<FileItem> = [];
   public progress:number = 0;
   public _nextIndex:number = 0;
   public autoUpload:any;
+  public authTokenHeader: string;
 
   public options:FileUploaderOptions = {
     autoUpload: false,
     isHTML5: true,
     filters: [],
-    removeAfterUpload: false
+    removeAfterUpload: false,
+    disableMultipart: false
   };
 
   private _failFilterIndex:number;
 
-  public constructor(options:any) {
+  public constructor(options:FileUploaderOptions) {
     this.setOptions(options);
   }
 
-  public setOptions(options:any):void {
+  public setOptions(options:FileUploaderOptions):void {
     this.options = Object.assign(this.options, options);
 
     this.authToken = options.authToken;
+    this.authTokenHeader = options.authTokenHeader || 'Authorization';
     this.autoUpload = options.autoUpload;
     this.options.filters.unshift({name: 'queueLimit', fn: this._queueLimitFilter});
 
@@ -65,18 +77,21 @@ export class FileUploader {
       this.options.filters.unshift({name: 'mimeType', fn: this._mimeTypeFilter});
     }
 
+    for(let i = 0; i < this.queue.length; i++) {
+      this.queue[i].url = this.options.url;
+    }
     // this.options.filters.unshift({name: 'folder', fn: this._folderFilter});
   }
 
-  public addToQueue(files:any[], options?:any, filters?:any):void {
-    let list:any[] = [];
+  public addToQueue(files:File[], options?:FileUploaderOptions, filters?:FilterFunction[]|string):void {
+    let list:File[] = [];
     for (let file of files) {
       list.push(file);
     }
     let arrayOfFilters = this._getFilters(filters);
     let count = this.queue.length;
-    let addedFileItems:any[] = [];
-    list.map((some:any) => {
+    let addedFileItems:FileItem[] = [];
+    list.map((some:File) => {
       if (!options) {
         options = this.options;
       }
@@ -102,7 +117,7 @@ export class FileUploader {
     }
   }
 
-  public removeFromQueue(value:any):void {
+  public removeFromQueue(value:FileItem):void {
     let index = this.getIndexOfItem(value);
     let item = this.queue[index];
     if (item.isUploading) {
@@ -131,27 +146,27 @@ export class FileUploader {
     (this as any)[transport](item);
   }
 
-  public cancelItem(value:any):void {
+  public cancelItem(value:FileItem):void {
     let index = this.getIndexOfItem(value);
     let item = this.queue[index];
-    let prop = this.options.isHTML5 ? '_xhr' : '_form';
+    let prop = this.options.isHTML5 ? item._xhr : item._form;
     if (item && item.isUploading) {
-      item[prop].abort();
+      prop.abort();
     }
   }
 
   public uploadAll():void {
-    let items = this.getNotUploadedItems().filter((item:any) => !item.isUploading);
+    let items = this.getNotUploadedItems().filter((item:FileItem) => !item.isUploading);
     if (!items.length) {
       return;
     }
-    items.map((item:any) => item._prepareToUploading());
+    items.map((item:FileItem) => item._prepareToUploading());
     items[0].upload();
   }
 
   public cancelAll():void {
     let items = this.getNotUploadedItems();
-    items.map((item:any) => item.cancel());
+    items.map((item:FileItem) => item.cancel());
   }
 
   public isFile(value:any):boolean {
@@ -167,12 +182,12 @@ export class FileUploader {
   }
 
   public getNotUploadedItems():Array<any> {
-    return this.queue.filter((item:any) => !item.isUploaded);
+    return this.queue.filter((item:FileItem) => !item.isUploaded);
   }
 
   public getReadyItems():Array<any> {
     return this.queue
-      .filter((item:any) => (item.isReady && !item.isUploading))
+      .filter((item:FileItem) => (item.isReady && !item.isUploading))
       .sort((item1:any, item2:any) => item1.index - item2.index);
   }
 
@@ -189,23 +204,23 @@ export class FileUploader {
     return {fileItems};
   }
 
-  public onBuildItemForm(fileItem:any, form:any):any {
+  public onBuildItemForm(fileItem:FileItem, form:any):any {
     return {fileItem, form};
   }
 
-  public onAfterAddingFile(fileItem:any):any {
+  public onAfterAddingFile(fileItem:FileItem):any {
     return {fileItem};
   }
 
-  public onWhenAddingFileFailed(item:any, filter:any, options:any):any {
+  public onWhenAddingFileFailed(item:FileLikeObject, filter:any, options:any):any {
     return {item, filter, options};
   }
 
-  public onBeforeUploadItem(fileItem:any):any {
+  public onBeforeUploadItem(fileItem:FileItem):any {
     return {fileItem};
   }
 
-  public onProgressItem(fileItem:any, progress:any):any {
+  public onProgressItem(fileItem:FileItem, progress:any):any {
     return {fileItem, progress};
   }
 
@@ -213,19 +228,19 @@ export class FileUploader {
     return {progress};
   }
 
-  public onSuccessItem(item:any, response:any, status:any, headers:any):any {
+  public onSuccessItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any {
     return {item, response, status, headers};
   }
 
-  public onErrorItem(item:any, response:any, status:any, headers:any):any {
+  public onErrorItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any {
     return {item, response, status, headers};
   }
 
-  public onCancelItem(item:any, response:any, status:any, headers:any):any {
+  public onCancelItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any {
     return {item, response, status, headers};
   }
 
-  public onCompleteItem(item:any, response:any, status:any, headers:any):any {
+  public onCompleteItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any {
     return {item, response, status, headers};
   }
 
@@ -233,25 +248,25 @@ export class FileUploader {
     return void 0;
   }
 
-  public _mimeTypeFilter(item:any):boolean {
+  public _mimeTypeFilter(item:FileLikeObject):boolean {
     return !(this.options.allowedMimeType && this.options.allowedMimeType.indexOf(item.type) === -1);
   }
 
-  public _fileSizeFilter(item:any):boolean {
+  public _fileSizeFilter(item:FileLikeObject):boolean {
     return !(this.options.maxFileSize && item.size > this.options.maxFileSize);
   }
 
-  public _fileTypeFilter(item:any):boolean {
+  public _fileTypeFilter(item:FileLikeObject):boolean {
     return !(this.options.allowedFileType &&
     this.options.allowedFileType.indexOf(FileType.getMimeClass(item)) === -1);
   }
 
-  public _onErrorItem(item:any, response:any, status:any, headers:any):void {
+  public _onErrorItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):void {
     item._onError(response, status, headers);
     this.onErrorItem(item, response, status, headers);
   }
 
-  public _onCompleteItem(item:any, response:any, status:any, headers:any):void {
+  public _onCompleteItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):void {
     item._onComplete(response, status, headers);
     this.onCompleteItem(item, response, status, headers);
     let nextItem = this.getReadyItems()[0];
@@ -265,8 +280,8 @@ export class FileUploader {
     this._render();
   }
 
-  protected _headersGetter(parsedHeaders:any):any {
-    return (name:any) => {
+  protected _headersGetter(parsedHeaders:ParsedResponseHeaders):any {
+    return (name:any):any => {
       if (name) {
         return parsedHeaders[name.toLowerCase()] || void 0;
       }
@@ -274,9 +289,9 @@ export class FileUploader {
     };
   }
 
-  protected _xhrTransport(item:any):any {
+  protected _xhrTransport(item:FileItem):any {
     let xhr = item._xhr = new XMLHttpRequest();
-    let form = new FormData();
+    let sendable:any;
     this._onBeforeUploadItem(item);
     // todo
     /*item.formData.map(obj => {
@@ -287,9 +302,15 @@ export class FileUploader {
     if (typeof item._file.size !== 'number') {
       throw new TypeError('The file specified is no longer valid');
     }
-    this._onBuildItemForm(item, form);
+    if (!this.options.disableMultipart) {
+      sendable = new FormData();
+      this._onBuildItemForm(item, sendable);
+
+      sendable.append(item.alias, item._file, item.file.name);
+    } else {
+      sendable = item._file;
+    }
 
-    form.append(item.alias, item._file, item.file.name);
     xhr.upload.onprogress = (event:any) => {
       let progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0);
       this._onProgressItem(item, progress);
@@ -326,9 +347,9 @@ export class FileUploader {
       }
     }
     if (this.authToken) {
-      xhr.setRequestHeader('Authorization', this.authToken);
+      xhr.setRequestHeader(this.authTokenHeader, this.authToken);
     }
-    xhr.send(form);
+    xhr.send(sendable);
     this._render();
   }
 
@@ -343,7 +364,7 @@ export class FileUploader {
     return Math.round(uploaded * ratio + current);
   }
 
-  private _getFilters(filters:any):any {
+  private _getFilters(filters:FilterFunction[]|string):FilterFunction[] {
     if (!filters) {
       return this.options.filters;
     }
@@ -363,7 +384,7 @@ export class FileUploader {
     // todo: ?
   }
 
-  // private _folderFilter(item:any):boolean {
+  // private _folderFilter(item:FileItem):boolean {
   //   return !!(item.size || item.type);
   // }
 
@@ -371,20 +392,20 @@ export class FileUploader {
     return this.options.queueLimit === undefined || this.queue.length < this.options.queueLimit;
   }
 
-  private _isValidFile(file:any, filters:any, options:any):boolean {
+  private _isValidFile(file:FileLikeObject, filters:FilterFunction[], options:FileUploaderOptions):boolean {
     this._failFilterIndex = -1;
-    return !filters.length ? true : filters.every((filter:any) => {
+    return !filters.length ? true : filters.every((filter:FilterFunction) => {
       this._failFilterIndex++;
       return filter.fn.call(this, file, options);
     });
   }
 
-  private _isSuccessCode(status:any):boolean {
+  private _isSuccessCode(status:number):boolean {
     return (status >= 200 && status < 300) || status === 304;
   }
 
   /* tslint:disable */
-  private _transformResponse(response:any, headers:any):any {
+  private _transformResponse(response:string, headers:ParsedResponseHeaders):string {
     // todo: ?
     /*var headersGetter = this._headersGetter(headers);
      forEach($http.defaults.transformResponse, (transformFn) => {
@@ -394,7 +415,7 @@ export class FileUploader {
   }
 
   /* tslint:enable */
-  private _parseHeaders(headers:any):any {
+  private _parseHeaders(headers:string):ParsedResponseHeaders {
     let parsed:any = {};
     let key:any;
     let val:any;
@@ -413,15 +434,15 @@ export class FileUploader {
     return parsed;
   }
 
-  /*private _iframeTransport(item:any) {
+  /*private _iframeTransport(item:FileItem) {
    // todo: implement it later
    }*/
 
-  private _onWhenAddingFileFailed(item:any, filter:any, options:any):void {
+  private _onWhenAddingFileFailed(item:FileLikeObject, filter:any, options:any):void {
     this.onWhenAddingFileFailed(item, filter, options);
   }
 
-  private _onAfterAddingFile(item:any):void {
+  private _onAfterAddingFile(item:FileItem):void {
     this.onAfterAddingFile(item);
   }
 
@@ -429,17 +450,17 @@ export class FileUploader {
     this.onAfterAddingAll(items);
   }
 
-  private _onBeforeUploadItem(item:any):void {
+  private _onBeforeUploadItem(item:FileItem):void {
     item._onBeforeUpload();
     this.onBeforeUploadItem(item);
   }
 
-  private _onBuildItemForm(item:any, form:any):void {
+  private _onBuildItemForm(item:FileItem, form:any):void {
     item._onBuildForm(form);
     this.onBuildItemForm(item, form);
   }
 
-  private _onProgressItem(item:any, progress:any):void {
+  private _onProgressItem(item:FileItem, progress:any):void {
     let total = this._getTotalProgress(progress);
     this.progress = total;
     item._onProgress(progress);
@@ -449,13 +470,13 @@ export class FileUploader {
   }
 
   /* tslint:disable */
-  private _onSuccessItem(item:any, response:any, status:any, headers:any):void {
+  private _onSuccessItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):void {
     item._onSuccess(response, status, headers);
     this.onSuccessItem(item, response, status, headers);
   }
 
   /* tslint:enable */
-  private _onCancelItem(item:any, response:any, status:any, headers:any):void {
+  private _onCancelItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):void {
     item._onCancel(response, status, headers);
     this.onCancelItem(item, response, status, headers);
   }

components/file-upload/readme.md

@@ -1,6 +1,6 @@
 ### Usage
 ```typescript
-import {FileSelectDirective, FileDropDirective, FileUploader} from 'ng2-file-upload/ng2-file-upload';
+import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload';
 ```
 
 ### Annotations
@@ -20,10 +20,11 @@ import {FileSelectDirective, FileDropDirective, FileUploader} from 'ng2-file-upl
 
   - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts)
 
-  Parameters that supported by this object:
+  Parameters supported by this object:
 
   1. `url` - URL of File Uploader's route
   2. `authToken` - auth token that will be applied as 'Authorization' header during file send.
+  3. `disableMultipart` - If 'true', disable using a multipart form for file upload and instead stream the file. Some APIs (e.g. Amazon S3) may expect the file to be streamed rather than sent via a form. Defaults to false.
 
 ## FileDrop API
 

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 {
+}

demo/components/file-upload-section.ts

@@ -1,10 +1,5 @@
-import {Component} from '@angular/core';
-import {CORE_DIRECTIVES} from '@angular/common';
+import { Component } from '@angular/core';
 
-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,13 +11,16 @@ 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>
 
@@ -30,48 +28,38 @@ tabDesc.forEach((desc:any) => {
               <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) {

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});

demo/components/file-upload/zs-file-demo/demo.ts

@@ -1,5 +1,5 @@
-import {Component, ElementRef, Renderer, Input, HostListener, HostBinding, OnInit} from '@angular/core';
-import {FileUploader, FileUploaderOptions} from '../../../../ng2-file-upload';
+import { Component, ElementRef, Renderer, Input, HostListener, HostBinding, OnInit } from '@angular/core';
+import { FileUploader, FileUploaderOptions } from '../../../../ng2-file-upload';
 
 @Component({
   selector: 'demo-file-upload',

demo/custom-typings.d.ts

@@ -0,0 +1 @@
+declare const ENV:string;

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);

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 {
+}

demo/polyfills.ts

@@ -0,0 +1,28 @@
+// Polyfills
+// (these modules are what are in 'angular2/bundles/angular2-polyfills' so don't use that here)
+
+// import 'ie-shim'; // Internet Explorer
+// import 'es6-shim';
+// import 'es6-promise';
+// import 'es7-reflect-metadata';
+
+// Prefer CoreJS over the polyfills above
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+require('zone.js/dist/zone');
+require('reflect-metadata');
+
+// Typescript emit helpers polyfill
+import 'ts-helpers';
+
+if ('production' === ENV) {
+  // Production
+
+} else {
+  // Development
+
+  (Error as any).stackTraceLimit = Infinity;
+
+  require('zone.js/dist/long-stack-trace-zone');
+
+}

demo/vendor.ts

@@ -0,0 +1,23 @@
+// For vendors for example jQuery, Lodash, angular2-jwt just import them here unless you plan on
+// chunking vendors files for async loading. You would need to import the async loaded vendors
+// at the entry point of the async loaded file. Also see custom-typings.d.ts as you also need to
+// run `typings install x` where `x` is your module
+
+// Angular 2
+import '@angular/common';
+import '@angular/core';
+import '@angular/forms';
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+
+// RxJS
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/mergeMap';
+
+if ('production' === ENV) {
+  // Production
+
+} else {
+  // Development
+
+}

gulp-tasks/lint.js

@@ -2,17 +2,20 @@
 
 const gulp = require('gulp');
 const tslint = require('gulp-tslint');
-const paths = gulp.paths;
+const gitignore = require('gitignore-to-glob')();
+
+gitignore.push('**/*.ts');
 
 gulp.task('tslint', () =>
-gulp
-  .src(paths.tssrc)
-  .pipe(tslint())
-  .pipe(tslint.report('prose', {
-    emitError: true,
-    summarizeFailureOutput: true,
-    reportLimit: 50
-  }))
+  gulp
+    .src(gitignore)
+    .pipe(tslint({
+      formatter: 'verbose',
+      emitError: true,
+      summarizeFailureOutput: true,
+      reportLimit: 50
+    }))
+    .pipe(tslint.report())
 );
 
 gulp.task('lint', ['tslint']);

gulpfile.js

@@ -2,15 +2,6 @@
 
 const gulp = require('gulp');
 
-gulp.paths = {
-  tssrc: [
-    '**/*.ts',
-    '!**/*.d.ts',
-    '!node_modules/**/*',
-    '!bundles/**/*',
-    '!typings/**/*']
-};
-
 require('require-dir')('./gulp-tasks');
 
 gulp.task('default', () => {

karma.conf.js

@@ -1,101 +1,5 @@
 'use strict';
 
-const path = require('path');
-const cwd = process.cwd();
+const config = require('./.ng2-config');
 
-module.exports = config => {
-  config.set({
-    // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: '',
-
-    // frameworks to use
-    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['jasmine'],
-
-    // list of files / patterns to load in the browser
-    files: [
-      {pattern: 'test.bundle.js', watched: false}
-    ],
-
-    // list of files to exclude
-    exclude: [],
-
-    // preprocess matching files before serving them to the browser
-    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-    preprocessors: {
-      'test.bundle.js': ['coverage', 'webpack', 'sourcemap']
-    },
-
-    webpack: {
-      resolve: {
-        root: [path.resolve(cwd)],
-        modulesDirectories: ['node_modules', 'demo', 'components', 'test', '.'],
-        extensions: ['', '.ts', '.js', '.css']
-      },
-      module: {
-        loaders: [
-          {test: /\.ts$/, loader: 'ts-loader', exclude: [/node_modules/]}
-        ],
-        postLoaders: [
-          // instrument only testing sources with Istanbul
-          {
-            test: /\.(js|ts)$/,
-            include: root('components'),
-            loader: 'istanbul-instrumenter-loader',
-            exclude: [
-              /\.e2e\.ts$/,
-              /node_modules/
-            ]
-          }
-        ]
-      },
-      stats: {
-        colors: true,
-        reasons: true
-      },
-      watch: true,
-      debug: true
-    },
-
-    coverageReporter: {
-      dir: 'coverage/',
-      reporters: [
-        {type: 'text'},
-        {type: 'json'},
-        {type: 'html'}
-      ]
-    },
-    webpackServer: {noInfo: true},
-
-    // test results reporter to use
-    // possible values: 'dots', 'progress'
-    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['spec', 'coverage'],
-
-    // web server port
-    port: 9876,
-
-    // enable / disable colors in the output (reporters and logs)
-    colors: true,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR ||
-    // config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    // enable / disable watching file and executing tests whenever any file changes
-    autoWatch: false,
-
-    // start these browsers
-    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['PhantomJS'],
-
-    // Continuous Integration mode
-    // if true, Karma captures browsers, runs the tests and exits
-    singleRun: true
-  });
-};
-
-function root(partialPath) {
-  return path.join(__dirname, partialPath);
-}
+module.exports = require('ng2-webpack-config').karma(config);

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';

package.json

@@ -1,21 +1,20 @@
 {
   "name": "ng2-file-upload",
-  "version": "1.0.3",
+  "version": "1.1.3-0",
   "description": "angular2 file upload directives",
   "scripts": {
-    "flow.install:typings": "./node_modules/.bin/typings install",
-    "flow.compile": "npm run flow.install:typings && npm run flow.compile:common && npm run flow.compile:system ",
-    "flow.compile:common": "./node_modules/.bin/tsc",
+    "flow.compile": "npm run flow.compile:common && npm run flow.compile:system",
+    "flow.compile:common": "./node_modules/.bin/ngc -p tsconfig.publish.json",
     "flow.compile:system": "./.config/bundle-system.js",
     "flow.copy:src": "./node_modules/.bin/cpy ng2-file-upload.ts \"components/*.ts\" ts --parents",
-    "flow.clean": "./node_modules/.bin/del bundles coverage demo-build typings \"components/**/*.+(js|d.ts|js.map)\" dist \"ng2-file-upload.+(js|d.ts|js.map)\"",
+    "flow.clean": "./node_modules/.bin/del bundles coverage demo-build \"components/**/*.+(js|d.ts|js.map)\" dist \"ng2-file-upload.+(js|d.ts|js.map)\"",
     "flow.deploy:gh-pages": "npm run flow.build:prod && ./node_modules/.bin/gh-pages -d demo-build",
     "flow.eslint": "./node_modules/.bin/eslint --ignore-path .gitignore  --ext js --fix . .config",
     "flow.tslint": "./node_modules/.bin/gulp lint",
     "flow.lint": "npm run flow.eslint && npm run flow.tslint",
     "flow.changelog": "./node_modules/.bin/conventional-changelog -i CHANGELOG.md -s -p angular -v",
     "flow.github-release": "./node_modules/.bin/conventional-github-releaser -p angular",
-    "flow.build:prod": "NODE_ENV=production ./node_modules/.bin/webpack --progress --color",
+    "flow.build:prod": "NODE_ENV=production ./node_modules/.bin/webpack --progress --color --display-error-details --display-cached",
     "flow.build:dev": "./node_modules/.bin/webpack --progress --color",
     "flow.serve:dev": "./node_modules/.bin/webpack-dev-server --hot --inline --colors --display-error-details --display-cached",
     "flow.serve:prod": "NODE_ENV=production ./node_modules/.bin/webpack-dev-server --hot --inline --colors --display-error-details --display-cached",
@@ -24,9 +23,10 @@
     "start": "npm run flow.serve:dev",
     "pretest": "npm run flow.lint",
     "test": "NODE_ENV=test ./node_modules/.bin/karma start",
+    "test:watch": "NODE_ENV=test ./node_modules/.bin/karma start --auto-watch --no-single-run",
     "preversion": "npm test",
     "version": "npm run flow.changelog && git add -A",
-    "postversion": "git push origin master && git push --tags"
+    "postversion": "git push origin development && git push --tags"
   },
   "main": "ng2-file-upload.js",
   "typings": "ng2-file-upload.d.ts",
@@ -34,7 +34,9 @@
     "angular2",
     "bootstrap",
     "angularjs",
-    "twitter-bootstrap"
+    "twitter-bootstrap",
+    "file-upload",
+    "angular-file-upload"
   ],
   "author": "Vyacheslav Chub <vyacheslav.chub@valor-software.com>",
   "license": "MIT",
@@ -48,68 +50,53 @@
   "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",
+    "@angular/compiler": "^2.0.0",
+    "@angular/core": "^2.0.0",
+    "@angular/forms": "^2.0.0"
   },
   "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",
-    "async": "1.5.2",
-    "bootstrap": "3.3.6",
+    "@angular/common": "2.1.0",
+    "@angular/compiler": "^2.1.0",
+    "@angular/compiler-cli": "2.1.0",
+    "@angular/core": "2.1.0",
+    "@angular/forms": "2.1.0",
+    "@angular/platform-browser": "2.1.0",
+    "@angular/platform-browser-dynamic": "2.1.0",
+    "@angular/platform-server": "2.1.0",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "@types/webpack": "1.12.35",
+    "async": "2.1.2",
+    "bootstrap": "3.3.7",
     "codecov": "1.0.1",
-    "compression-webpack-plugin": "0.3.1",
     "conventional-changelog-cli": "1.2.0",
-    "conventional-github-releaser": "1.1.2",
-    "copy-webpack-plugin": "2.1.3",
-    "cpy-cli": "1.0.0",
+    "conventional-github-releaser": "1.1.3",
+    "cpy-cli": "1.0.1",
     "del-cli": "0.2.0",
-    "es6-promise": "3.1.2",
-    "es6-shim": "0.35.0",
+    "es6-promise": "4.0.5",
+    "es6-shim": "0.35.1",
     "es7-reflect-metadata": "1.6.0",
-    "eslint-config-valorsoft": "0.0.11",
-    "exports-loader": "0.6.3",
-    "file-loader": "0.8.5",
+    "eslint-config-valorsoft": "0.1.0",
     "gh-pages": "0.11.0",
+    "gitignore-to-glob": "0.2.1",
     "gulp": "3.9.1",
     "gulp-size": "2.1.0",
-    "gulp-tslint": "5.0.0",
-    "html-loader": "0.4.3",
-    "html-webpack-plugin": "2.16.1",
-    "istanbul-instrumenter-loader": "0.2.0",
-    "jasmine": "2.4.1",
-    "karma": "0.13.22",
-    "karma-chrome-launcher": "1.0.1",
-    "karma-coverage": "1.0.0",
-    "karma-jasmine": "1.0.2",
-    "karma-phantomjs-launcher": "1.0.0",
-    "karma-sourcemap-loader": "0.3.7",
-    "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "1.7.0",
-    "lite-server": "2.2.0",
-    "markdown-loader": "0.1.7",
-    "marked": "0.3.5",
-    "ng2-bootstrap": "1.0.16",
-    "phantomjs-polyfill": "0.0.2",
-    "phantomjs-prebuilt": "2.1.7",
+    "gulp-tslint": "6.1.2",
+    "lite-server": "2.2.2",
+    "marked": "0.3.6",
+    "ng2-bootstrap": "1.1.14",
+    "ng2-webpack-config": "0.0.5",
     "pre-commit": "1.1.3",
-    "prismjs": "1.4.1",
-    "prismjs-loader": "0.0.3",
-    "raw-loader": "0.5.1",
-    "reflect-metadata": "0.1.2",
-    "require-dir": "0.3.0",
-    "rxjs": "5.0.0-beta.6",
-    "source-map-loader": "0.1.5",
-    "systemjs-builder": "0.15.16",
-    "ts-loader": "0.8.2",
-    "tslint-config-valorsoft": "1.0.3",
-    "typescript": "1.8.10",
-    "typings": "0.8.1",
-    "webpack": "1.13.0",
-    "webpack-dev-server": "1.14.1",
-    "zone.js": "0.6.12"
+    "prismjs": "1.5.1",
+    "prismjs-loader": "0.0.4",
+    "reflect-metadata": "0.1.8",
+    "require-dir": "0.3.1",
+    "rxjs": "5.0.0-beta.12",
+    "systemjs-builder": "0.15.32",
+    "tslint-config-valorsoft": "1.1.1",
+    "typescript": "2.0.3",
+    "zone.js": "0.6.26"
   },
   "contributors": [
     {
@@ -121,6 +108,16 @@
       "name": "Dmitriy Shekhovtsov",
       "email": "valorkin@gmail.com",
       "url": "https://github.com/valorkin"
+    },
+    {
+      "name": "Adrian Faciu",
+      "email": "adrian.faciu@gmail.com",
+      "url": "https://github.com/adrianfaciu"
+    },
+    {
+      "name": "Oleksandr Telnov",
+      "email": "otelnov@gmail.com",
+      "url": "https://github.com/otelnov"
     }
   ]
 }

protractor.conf.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const config = require('./.ng2-config');
+
+module.exports.config = require('ng2-webpack-config').protractor(config);

spec-bundle.js

@@ -0,0 +1,65 @@
+/* eslint no-var: 0, vars-on-top: 0 */
+/**
+ * @author: @AngularClass
+ */
+
+/*
+ * When testing with webpack and ES6, we have to do some extra
+ * things to get testing to work right. Because we are gonna write tests
+ * in ES6 too, we have to compile those as well. That's handled in
+ * karma.conf.js with the karma-webpack plugin. This is the entry
+ * file for webpack test. Just like webpack will create a bundle.js
+ * file for our client, when we run test, it will compile and bundle them
+ * all here! Crazy huh. So we need to do some setup
+ */
+'use strict';
+Error.stackTraceLimit = Infinity;
+
+require('core-js');
+
+// Typescript emit helpers polyfill
+require('ts-helpers');
+
+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');
+
+// RxJS
+require('rxjs/Rx');
+
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
+
+testing.TestBed.initTestEnvironment(
+  browser.BrowserDynamicTestingModule,
+  browser.platformBrowserDynamicTesting()
+);
+
+Object.assign(global, testing);
+
+/*
+ * Ok, this is kinda crazy. We can use the the context method on
+ * require that webpack created in order to tell webpack
+ * what files we actually want to require or import.
+ * Below, context will be an function/object with file names as keys.
+ * using that regex we are saying look in ./src/app and ./test then find
+ * any file that ends with spec.js and get its path. By passing in true
+ * we say do this recursively
+ */
+var testContext = require.context('./components', true, /\.spec\.ts/);
+
+/*
+ * get all the files, for each file, call the context function
+ * that will require the file and load it up here. Context will
+ * loop and require those spec files here
+ */
+function requireAll(requireContext) {
+  return requireContext.keys().map(requireContext);
+}
+
+// requires and returns all modules that match
+requireAll(testContext);

test.bundle.js

@@ -1,47 +0,0 @@
-'use strict';
-
-/* eslint vars-on-top:0 no-var:0 */
-// @AngularClass
-/*
- * When testing with webpack and ES6, we have to do some extra
- * things get testing to work right. Because we are gonna write test
- * in ES6 to, we have to compile those as well. That's handled in
- * karma.conf.js with the karma-webpack plugin. This is the entry
- * file for webpack test. Just like webpack will create a bundle.js
- * file for our client, when we run test, it well compile and bundle them
- * all here! Crazy huh. So we need to do some setup
- */
-Error.stackTraceLimit = Infinity;
-require('phantomjs-polyfill');
-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');
-
-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);
-
-/*
- Ok, this is kinda crazy. We can use the the context method on
- require that webpack created in order to tell webpack
- what files we actually want to require or import.
- Below, context will be an function/object with file names as keys.
- using that regex we are saying look in ./src/app and ./test then find
- any file that ends with spec.js and get its path. By passing in true
- we say do this recursively
- */
-var testContext = require.context('./components', true, /\.spec\.ts/);
-
-// get all the files, for each file, call the context function
-// that will require the file and load it up here. Context will
-// loop and require those spec files here
-testContext.keys().forEach(testContext);

tsconfig.json

@@ -2,21 +2,34 @@
   "compilerOptions": {
     "target": "es5",
     "module": "commonjs",
-    "moduleResolution": "node",
     "sourceMap": false,
     "declaration": true,
-    "removeComments": false,
+    "removeComments": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "noImplicitAny": true,
     "listFiles": false,
-    "noLib": false
+    "noLib": false,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "skipLibCheck": true,
+    "stripInternal": true,
+    "lib": [
+      "dom",
+      "es6"
+    ],
+    "types": [
+      "jasmine",
+      "node",
+      "webpack"
+    ]
   },
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "bundles",
+    "dist"
   ],
   "files": [
-    "./typings/browser.d.ts",
-    "./ng2-file-upload.ts"
+    "./ng2-file-upload.ts",
+    "./demo/custom-typings.d.ts"
   ]
-}
+}

tsconfig.publish.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "sourceMap": false,
+    "noEmitHelpers": false,
+    "noImplicitAny": true,
+    "declaration": true,
+    "skipLibCheck": true,
+    "stripInternal": true,
+    "lib": [
+      "dom",
+      "es6"
+    ],
+    "types": [
+      "jasmine",
+      "node",
+      "webpack"
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    "bundles",
+    "dist"
+  ],
+  "files": [
+    "./demo/custom-typings.d.ts",
+    "./ng2-file-upload.ts"
+  ]
+}

tslint.json

@@ -1,4 +1,8 @@
 {
   "extends": "tslint-config-valorsoft",
-  "rulesDirectory": "./node_modules/codelyzer"
+  "rulesDirectory": "./node_modules/codelyzer",
+  "rules": {
+    "component-selector-name": [false, ""],
+    "only-arrow-functions": false
+  }
 }

typings.json

@@ -1,12 +0,0 @@
-{
-  "dependencies": {
-    "moment": "registry:npm/moment#2.10.5+20160211003958",
-    "webpack": "registry:npm/webpack#1.12.9+20160219013405"
-  },
-  "devDependencies": {},
-  "ambientDependencies": {
-    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
-    "jasmine": "registry:dt/jasmine#2.2.0+20160317120654",
-    "require": "registry:dt/require#2.1.20+20160316155526"
-  }
-}

webpack.config.js

@@ -1,15 +1,12 @@
-/* eslint global-require: 0 */
+/* eslint no-process-env: 0, global-require:0 */
+/**
+ * @author: @AngularClass
+ */
 'use strict';
 
-const path = require('path');
-const marked = require('marked');
-const webpack = require('webpack');
 const reqPrism = require('prismjs');
-const CompressionPlugin = require('compression-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const marked = require('marked');
 
-// marked renderer hack
 marked.Renderer.prototype.code = function renderCode(code, lang) {
   const out = this.options.highlight(code, lang);
   const classMap = this.options.langPrefix + lang;
@@ -20,159 +17,35 @@ marked.Renderer.prototype.code = function renderCode(code, lang) {
   return `<pre class="${classMap}"><code class="${classMap}">${out}\n</code></pre>\n`;
 };
 
-/*eslint no-process-env:0, camelcase:0*/
-const isProduction = (process.env.NODE_ENV || 'development') === 'production';
-const devtool = process.env.NODE_ENV === 'test' ? 'inline-source-map' : 'source-map';
-const dest = 'demo-build';
-const absDest = root(dest);
+// Look in ./config folder for webpack.dev.js
+const conf = getWebpackConfig(process.env.NODE_ENV, require('./.ng2-config'));
 
-const config = {
-  // isProduction ? 'source-map' : 'evale',
-  devtool,
-  debug: false,
+conf.markdownLoader = {
+  langPrefix: 'language-',
+  highlight(code, lang) {
+    const language = !lang || lang === 'html' ? 'markup' : lang;
+    const Prism = global.Prism || reqPrism;
 
-  verbose: true,
-  displayErrorDetails: true,
-  context: __dirname,
-  stats: {
-    colors: true,
-    reasons: true
-  },
-
-  resolve: {
-    cache: false,
-    root: __dirname,
-    extensions: ['', '.ts', '.js', '.json']
-  },
-
-  entry: {
-    angular2: [
-      // Angular 2 Deps
-      'es6-shim',
-      'es6-promise',
-      'zone.js',
-      'reflect-metadata',
-      '@angular/common',
-      '@angular/core'
-    ],
-    'angular2-bootstrap': ['ng2-file-upload'],
-    'angular2-bootstrap-demo': 'demo'
-  },
-
-  output: {
-    path: absDest,
-    filename: '[name].js',
-    sourceMapFilename: '[name].js.map',
-    chunkFilename: '[id].chunk.js'
-  },
-
-  // our Development Server configs
-  devServer: {
-    inline: true,
-    colors: true,
-    historyApiFallback: true,
-    contentBase: dest,
-    //publicPath: dest,
-    outputPath: dest,
-    watchOptions: {aggregateTimeout: 300, poll: 1000}
-  },
-
-  markdownLoader: {
-    langPrefix: 'language-',
-    highlight(code, lang) {
-      const language = !lang || lang === 'html' ? 'markup' : lang;
-      const Prism = global.Prism || reqPrism;
-
-      if (!Prism.languages[language]) {
-        require(`prismjs/components/prism-${language}.js`);
-      }
-      return Prism.highlight(code, Prism.languages[language]);
+    if (!Prism.languages[language]) {
+      require(`prismjs/components/prism-${language}.js`);
     }
-  },
-  module: {
-    loaders: [
-      // support markdown
-      {test: /\.md$/, loader: 'html?minimize=false!markdown'},
-      // Support for *.json files.
-      {test: /\.json$/, loader: 'json'},
-      // Support for CSS as raw text
-      {test: /\.css$/, loader: 'raw'},
-      // support for .html as raw text
-      {test: /\.html$/, loader: 'raw'},
-      // Support for .ts files.
-      {
-        test: /\.ts$/,
-        loader: 'ts',
-        query: {
-          compilerOptions: {
-            removeComments: true,
-            noEmitHelpers: false
-          }
-        },
-        exclude: [/\.(spec|e2e)\.ts$/]
-      }
-    ],
-    noParse: [
-      /rtts_assert\/src\/rtts_assert/,
-      /reflect-metadata/,
-      /zone\.js\/dist\/zone-microtask/
-    ]
-  },
-
-  plugins: [
-    //new Clean([dest]),
-    new webpack.optimize.DedupePlugin(),
-    new webpack.optimize.OccurenceOrderPlugin(true),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'angular2',
-      minChunks: Infinity,
-      filename: 'angular2.js'
-    }),
-    // static assets
-    new CopyWebpackPlugin([{from: 'demo/favicon.ico', to: 'favicon.ico'}]),
-    new CopyWebpackPlugin([{from: 'demo/assets', to: 'assets'}]),
-    // generating html
-    new HtmlWebpackPlugin({template: 'demo/index.html'})
-  ],
-  pushPlugins() {
-    if (!isProduction) {
-      return;
-    }
-    const plugins = [
-      //production only
-      new webpack.optimize.UglifyJsPlugin({
-        beautify: false,
-        mangle: false,
-        comments: false,
-        compress: {
-          screw_ie8: true
-          //warnings: false,
-          //drop_debugger: false
-        }
-        //verbose: true,
-        //beautify: false,
-        //quote_style: 3
-      }),
-      new CompressionPlugin({
-        asset: '{file}.gz',
-        algorithm: 'gzip',
-        regExp: /\.js$|\.html|\.css|.map$/,
-        threshold: 10240,
-        minRatio: 0.8
-      })
-    ];
-
-    this
-      .plugins
-      .push
-      .apply(plugins);
+    return Prism.highlight(code, Prism.languages[language]);
   }
 };
 
-config.pushPlugins();
+module.exports = conf;
 
-module.exports = config;
-
-function root(partialPath) {
-  return path.join(__dirname, partialPath);
+function getWebpackConfig(env, config) {
+  switch (env) {
+  case 'prod':
+  case 'production':
+    return require('ng2-webpack-config').webpack.prod(config);
+  case 'test':
+  case 'testing':
+    return require('ng2-webpack-config').webpack.test(config);
+  case 'dev':
+  case 'development':
+  default:
+    return require('ng2-webpack-config').webpack.dev(config);
+  }
 }