Typescript 如何在WebStorm 2016.1中使用ng2文件上传器？

我必须在我的应用程序中使用ng2文件上传程序。 我遵循了这一点，但出现了此错误

PS：我对Angular2的开发还不熟悉。 这是我的密码：

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>

我的选择：

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.uploader._emitter.subscribe((data) => {
            this.onUpload.emit(data);
        });
    }

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

}

从'angular2/core'导入{Directive，ElementRef，EventEmitter}；
从“../services/ng2 uploader”导入{Ng2Uploader}；
@指示({
选择器：“[ng文件选择]”，
输入：[“选项：ng文件选择”]，
输出：['onUpload']，
主机：{'（更改）:'onFiles（）'}，
})
导出类文件选择{
上传器：NG2上传器；
选择：任何；
onUpload:EventEmitter=neweventemitter（）；
建造商（公共el:ElementRef）{
this.uploader=新的Ng2Uploader（）；
设置超时（（）=>{
this.uploader.setOptions（this.options）；
});
此.uploader.\u发射器.subscribe（（数据）=>{
this.onUpload.emit（数据）；
});
}
onFiles（）：void{
让files=this.el.nativeElement.files；
if（files.length）{
this.uploader.addFilesToQueue（文件）；
}
}
}

您的项目不理解typescript（.ts）文件-至少这是错误所在

您是否为项目正确设置了typescript？您可以使用WebStorm IDE激活它，只需进入设置-搜索typescript并启用它。但是IDETypeScript支持的问题是，只有您积极处理的文件才会被编译

那么你的构建脚本呢。。？您是否使用webpack、browserify或system.js来构建项目？我建议从一个不错的种子项目开始，它已经为您设置了所有这些，例如：

如何与Web包一起设置typescript工作流的示例：

基本上：

• 为您的项目设置网页包
• 为项目设置typescript npm模块和tsconfig.json
• 包括网页包配置的tsloader部分

享受可运行的typescript/ng2项目；）

更新

现在提供您的代码。。我想知道你的ts加载器定义对这个查询做了什么。。。我几乎不记得，当您提供“query”参数时，它只会获取由该参数定义的内容。。如果删除它，他将拾取与“test”参数匹配的所有内容，但与exclude regex匹配的内容除外

我正在使用的一个更简单：

{test: /\.ts$/, loader: 'ts-loader', exclude: [/\.(spec|e2e)\.ts$/]},

---

然后，选择项目中所有不以*.spec.ts或*.e2e.ts结尾的.ts文件-尝试一次。。如果错误仍然存在，我必须自己运行此代码以进行更深入的调查。

Hey@jebbie我使用webpack构建我的项目。我遵循了您提到的内容，但仍然没有结果。在添加ng2之前，每个想法都很好！需要更多的信息来提供实际帮助-您当前的错误是什么？您是否有代码可供查看/签出？抱歉，响应太晚；我在问题中添加了我的代码我刚刚在我的答案中添加了一个更新，我想知道你的.ts加载程序configHey@jebbie我尝试了你提到的。。现在出现此错误

异常：在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.uploader._emitter.subscribe((data) => {
            this.onUpload.emit(data);
        });
    }

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

}

{test: /\.ts$/, loader: 'ts-loader', exclude: [/\.(spec|e2e)\.ts$/]},