如何配置angular2-dropzone-wrapper

时间:2017-02-23 09:56:10

标签: angular dropzone.js

我试图让https://github.com/zefoy/ngx-dropzone-wrapper的angular2-dropzone-wrapper工作,但遇到了麻烦。

我做了

npm install angular2-dropzone-wrapper --save

这会在我的angular2-dropzone-wrapper文件夹中生成一个名为node_modules的新文件夹。 在我的package.json我现在有"angular2-dropzone-wrapper": "^2.0.3"

在我添加的app.modules.ts

import { DropzoneModule, DropzoneConfig, DropzoneConfigInterface, DropzoneDirective } from "angular2-dropzone-wrapper";

并将DropzoneModule添加到我的

@NgModule({
  imports: [

我的页面组件ts-file我添加了

private dropZoneConfig: DropzoneConfigInterface;

在我的构造函数中,我添加了(VS2015给了我智能感知):

    this.dropZoneConfig.server = this.url;
    this.dropZoneConfig.acceptedFiles = "*.xml";

在我的HTML页面中添加

<dropzone [config]="dropZoneConfig" [message]="'Click or drag images here to upload'"></dropzone>

当我现在加载页面时,我收到此控制台错误:

GET http://localhost:3000/dropzone 404 (Not Found)
 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/dropzone
    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29)
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33)
Error loading http://localhost:3000/dropzone as "dropzone" from http://localhost:3000/node_modules/angular2-dropzone-wrapper/dist/lib/dropzone.component.js

我认为这意味着无法找到dropzone组件或者没有正确配置dropzone组件。 我一直在寻找一个工作实例的日子但却无法找到它。

有人知道出了什么问题吗?

修改 我刚做了npm update并得到了这些错误:

+-- reflect-metadata@0.1.10
+-- UNMET PEER DEPENDENCY rxjs@5.0.0-beta.12
+-- typescript@2.2.1
`-- UNMET PEER DEPENDENCY zone.js@0.6.26

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for  fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN angular2-dropzone-wrapper@2.0.3 requires a peer of rxjs@^5.0.0 but  none was installed.
npm WARN angular2-dropzone-wrapper@2.0.3 requires a peer of zone.js@^0.7.0 but none was installed.

如何解决这些问题?他们看起来与我的问题有关。 我还做了一些额外的配置更改,现在我在控制台中收到此错误:

Error: TypeError: ctorParameters.map is not a function

ctorParameters.map is not a function in angular2-mdl看起来我需要对我的依赖项的版本号做些什么,但我不确定是什么。

1 个答案:

答案 0 :(得分:0)

我发现了问题。 我还需要导入dropzone AND 我需要将我的Angular2版本从v2.0.0升级到v2.4.8

所以我的systemjs.config.js看起来像这样:

var map {
    "dropzone": "node_modules/dropzone/dist/",
    "angular2-dropzone-wrapper": "node_modules/angular2-dropzone-wrapper"
};
var packages = {
    "dropzone": { "main": "dropzone.js", "defaultExtension": "js" },
    'angular2-dropzone-wrapper': { "main": "index.js", "defaultExtension": "js" }
}

我的app.modules.ts也发生了变化:

import { DropzoneModule } from "angular2-dropzone-wrapper/dist/index";

我现在可以上传我的文件了。 我确实有关于dropzone的更多问题,但会在一个单独的问题中问他们。