node.js - Angular2 + ng2-Uploader UPLOAD_DIRECTIVES 未定义

Question

我正在尝试在我的 angular2 应用程序中使用 ng2-uploader，我正在尝试在我的 View 中添加一个按钮点击上传操作，我已经尝试这样做就像文档解释的那样 https://github.com/jkuri/ng2-uploader

component.ts

import {Component} from 'angular2/core';
import {UPLOAD_DIRECTIVES} from 'ng2-uploader/ng2-uploader';

@Component({
  selector: 'demo-app',
  templateUrl: 'app/demo.html',
  directives: [UPLOAD_DIRECTIVES],
})
export class DemoApp {
  uploadFile: any;
  options: Object = {
    url: 'http://localhost:10050/upload'
  };

  handleUpload(data): void {
    if (data && data.response) {
      data = JSON.parse(data.response);
      this.uploadFile = data;
    }
  }
}

component.html

<a href="load" class="clas1" 
       [ng-file-select]="options"
       (onUpload)="handleUpload($event)">

<div>
Response: {{ uploadFile | json }}
</div>

但我在导航器中遇到了这个错误:

Error: ReferenceError: UPLOAD_DIRECTIVES is not defined(…)ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434

因此我查看了 Node 中安装的 ng2-uploader 组件，它看起来像这样:

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
import {Ng2Uploader} from './src/services/ng2-uploader';
import {NgFileSelect} from './src/directives/ng-file-select';
import {NgFileDrop} from './src/directives/ng-file-drop';

export * from './src/services/ng2-uploader';
export * from './src/directives/ng-file-select';
export * from './src/directives/ng-file-drop';

export default {
  directives: [NgFileSelect, NgFileDrop],
  providers: [Ng2Uploader]
}

export const UPLOAD_DIRECTIVES: [any] = [NgFileSelect, NgFileDrop];

所以看起来一切都是正确的，任何人都知道如何修复它，也许我应该在我的 boot.ts 或我的 index.html 中添加一些东西，但是到底是什么？？

Answer 1

我会在您的主 HTML 文件中尝试以下 SystemJS 配置:

<script>
  System.config({
    map: {
      'ng2-uploader': 'node_modules/ng2-uploader'
    },
    packages: {
      (...)   
      'ng2-uploader': {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  (...)
</script>