I am implementing the ng2-file-uploader in my application. I have referred to this Github project but encountered an error.

Note: I am new to Angular2 development.

Using the latest version of webstorm (2016.1) and Typescript 1.8.2


ERROR in ./~/ng2-file-upload/components/file-upload/file-uploader.ts
Module parse failed: C:\Users\...\Desktop\FrontEndSkilify\skilify-front\node_modules\tslintloader\index.js!C:\Users\...\Desktop\FrontEndSkilify\skilify-front\node_modules\ng2-file-upload\components\file-upload\file-uploader.ts Line 1: Unexpected token
    You may need an appropriate loader to handle this file type.
    | import {FileLikeObject} from './file-like-object';
    | import {FileItem} from './file-item';
    |
     @ ./~/ng2-file-upload/ng2-file-upload.js 6:9-58

Below is my code :

demo.ts :

import {Component, NgZone} from 'angular2/core';
import {Http} from "angular2/http";
import {UPLOAD_DIRECTIVES} from 'ng2-uploader/ng2-uploader';
import {NgFileSelect} from 'ng2-uploader/src/directives/ng-file-select';

let styles = require('./demo.css')
let template = require('./demo.html');
@Component({
    selector: 'demo',
    template: template,
    styles: [styles],
    providers: [],
    directives: [UPLOAD_DIRECTIVES,NgFileSelect],
    pipes: []

})


export class Demo {
    file:File;
    zone: NgZone;
    options: Object = {
        url: 'http://ng2-uploader.com:10050/upload'
    };
    basicProgress: number = 0;
    basicResp: Object;
    multipleProgress: number = 0;
    multipleResp: any[] = [];
    dropProgress: number = 0;
    dropResp: any[] = [];

    response : string;
    constructor(public http: Http){

        this.zone = new NgZone({ enableLongStackTrace: false });
    }

    handleBasicUpload(data): void {
        this.basicResp = data;
        this.zone.run(() => {
            this.basicProgress = data.progress.percent;
        });
        /* return this.http.post(API + '/api/upload',JSON.stringify(name),{ headers: contentHeaders })
         .subscribe(res => {console.log(res)},
         error=>{this.response = error.text()}

         );*/

    }

}

my demo.html:

<div class="columns">
    <div class="column is-4">
        <div class="message is-danger">
            <div class="message-header">Basic Example</div>
            <div class="message-body">
                <div class="content">
                    <label class="tag btn is-danger">
                        <i class="fa fa-upload icon is-small"></i> Choose file
                        <input type="file" [ng-file-select]="options" (onUpload)="handleBasicUpload($event)">
                    </label>
                    <div class="progress">
                        <div class="progress-bar" [style.width]="basicProgress + '%'"></div>
                        <span class="percent">{{ basicProgress }}%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="message resp">
        <div class="message-header">Response</div>
        <div class="message-body">
            <p>
                {{ basicResp | json }}
            </p>
    </div>
    </div>
</div>

my webpack.js ;

var sliceArgs = Function.prototype.call.bind(Array.prototype.slice);
var toString  = Function.prototype.call.bind(Object.prototype.toString);
var path = require('path');
var webpack = require('webpack');
// Webpack Plugins
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;

module.exports = {
devtool: 'source-map',
// devtool: 'eval',

//
entry: {
'vendor': [
// Polyfills
'es6-shim',
'es6-promise',
'reflect-metadata',
'zone.js/dist/zone-microtask',
'zone.js/dist/long-stack-trace-zone',
// Angular2
'angular2/platform/browser',
'angular2/platform/common_dom',
'angular2/core',
'angular2/router',
'angular2/http',
// RxJS
'rxjs',
// Other
'angular2-jwt'
],
'app': [
'./src/index'
]
},

// Config for our build files
output: {
path: root('build'),
filename: '[name].js',
// filename: '[name].[hash].js',
sourceMapFilename: '[name].js.map',
chunkFilename: '[id].chunk.js'
// publicPath: 'http://mycdn.com/'
},

resolve: {
root: __dirname,
extensions: [
'',
'.ts',
'.js',
'.json',
'.css',
'.html'
]
},

module: {
preLoaders: [ { test: /\.ts$/, loader: 'tslint-loader' } ],
loaders: [
// Support for .ts files.
{
test: /\.ts$/,
loader: 'ts-loader',
query: {
'ignoreDiagnostics': [
2403, // 2403 -> Subsequent variable declarations
2300, // 2300 Duplicate identifier
2374, // 2374 -> Duplicate number index signature
2375 // 2375 -> Duplicate string index signature
]
},
exclude: [ /\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/ ]
},

// Support for *.json files.
{ test: /\.json$/, loader: 'json-loader' },

// Support for CSS as raw text
{ test: /\.css$/, loader: 'raw-loader' },

// support for .html as raw text
{ test: /\.html$/, loader: 'raw-loader' },
],
noParse: [
/zone\.js\/dist\/.+/,
/reflect-metadata/,
/es(6|7)-.+/,
]
},

plugins: [
new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js', minChunks: Infinity }),
new CommonsChunkPlugin({ name: 'common', filename: 'common.js', minChunks: 2, chunks: ['app', 'vendor'] })
],

// Other module loader config
tslint: {
emitErrors: false,
failOnHint: false
},

// our Development Server configs
// our Webpack Development Server config
devServer: {
historyApiFallback: true,
publicPath: '/build'
}
};

function getBanner() {
return 'This is a sample that shows how to add authentication to an Angular 2 (ng2) app by @auth0';
}

function root(args) {
args = sliceArgs(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}
function rootNode(args) {
args = sliceArgs(arguments, 0);
return root.apply(path, ['node_modules'].concat(args));
}

My NgFileSelect :

import {Directive, ElementRef, EventEmitter} from 'angular2/core';
import {Ng2Uploader} from '../services/ng2-uploader';

@Directive({
selector: '[ng-file-select]',
inputs: ['options: ng-file-select'],
outputs: ['onUpload'],
host: {'(change)': 'onFiles()'},
})
export class NgFileSelect {
uploader:Ng2Uploader;
options:any;
onUpload:EventEmitter<any> = new EventEmitter();

constructor(public el:ElementRef) {
this.uploader = new Ng2Uploader();
setTimeout(() => {
this.uploader.setOptions(this.options);
});

this.eplouader._emitter.subscribe((data) => {
this.onUpload.emit(data);
});
}

onFiles():void {
let files = this.el.nativeElement.files;
if (files.length) {
this.uploader.addFilesToQueue(files);
}
}

}