Angular2: NG2-文件上传:无法使用SystemJS正确加载

Question

我使用systemJS来管理包，所以我将这些行添加到systemjs的配置文件中：

{
  map: { 'ng2-file-upload': 'node_modules/ng2-file-upload' },
  packages: {
    'ng2-file-upload': {
        main: './ng2-file-upload/ng2-file-upload.js', // also tried with './ng2-file-upload.js'
        defaultExtension: 'js'
    },
  }
}

我通过ng2-file-upload通过import { FileDrop, FileUploader } from 'ng2-file-upload';导入。

但是导入会导致我的应用程序“崩溃”：我的类型脚本编译器似乎运行良好(我可以看到由于其他代码导致的日志)，但是修改不再被转移，所以我不能运行任何东西。我没有任何与ng2-file-upload相关的错误日志(除了很多Duplicate identifiers)。

知道吗？

编辑：--我已经将这个包从node_modules中提取到一个靠近我的应用程序(vendor)的文件夹中，并且我使用了一个相对路径来导入FileDrop和FileUploader，但是systemjs无法导入：

Error: SyntaxError: Unexpected token <(…)

编辑2:这里是一些细节。我的应用程序在public下，其中包含两个子文件夹：src和build。我在src中编写ts代码(这是显而易见的)，我的tsc将被转移的文件保存到build中。目前，我不打包我的文件，因此build内部的层次结构与src的层次结构相同。

但是只有在NG2文件上传时才会发生一些奇怪的事情:在传输过程中，tsc在build中添加了一个build文件夹。这是树：

public
|-- build
|    |-- core
|    |-- modules
|    |-- styles
|    |-- node_modules
|    |    |-- ng2-file-upload
+-- src
    |-- core
    |-- modules
    |-- styes

我不知道为什么TSC会把这个包裹转过来。当然，node_modules被排除在我的tsconfig.ts中。

Answer 1

下面是我的systemjs.config，它能工作：

      var map = {
    'app': 'app', // 'dist',
    'rxjs': 'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular': 'node_modules/@angular',
    'ng2-file-upload': 'node_modules/ng2-file-upload'
};


var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'ng2-file-upload': { main: 'ng2-file-upload.js', defaultExtension: 'js' }
};

Answer 2

我会尝试这种配置：

{
  map: { 'ng2-file-upload': 'node_modules/ng2-file-upload' },
  packages: {
    'ng2-file-upload': {
      defaultExtension: 'js'
    },
    (...)
  }
}

并以下列方式进口：

import { FileDrop, FileUploader } from 'ng2-file-upload/ng2-file-upload';