Question

所以我一直在使用这个article通过Angular CLI将Dropzone.js导入到我的Angular 2项目中。虽然这篇文章是在2个多月前发表在这个问题之前的，但我注意到这个人并没有在@NgModule中使用新的Angular CLI语法。

有没有办法可以将Dropzone.js npm module导入我的项目？

我设法将Dropzone.js文件包含在我的脚本中＃34; angular-cli.json中的属性：

"scripts": [
        "../node_modules/dropzone/dist/dropzone.js"
      ],

这是我的dropzone组件：

import {
    Component,
    OnInit,
    Input,
    Output,
    EventEmitter,
    ElementRef
} from '@angular/core';
import {
    Http
} from '@angular/http';

@Component({
    selector: 'dropzone',
    templateUrl: './dropzone.component.html',
    styleUrls: ['./dropzone.component.scss']
})
export class DropzoneComponent implements OnInit {

    private _dropzone: Dropzone;

    @Input()
    element: string = ".dropzoneArea";

    @Input()
    url: string = "file/post";

    @Input()
    uploadMultiple: boolean = false;

    @Input()
    maxFileSize: number = 2048;

    @Input()
    clickable: string = ".dropzoneArea";

    @Input()
    autoProcessQueue: boolean = true;

    @Input()
    addRemoveLinks: boolean = false;

    @Input()
    createImageThumbnails: boolean = false;

    @Input()
    previewTemplate: string = "<div style='display:none'></div>";

    @Input()
    acceptedFiles: string = "*";

    @Output()
    sending: EventEmitter < boolean > ;

    @Output()
    uploadprogress: EventEmitter < number > ;

    @Output()
    success: EventEmitter < any > ;

    @Output()
    error: EventEmitter < any > ;

    constructor(private _eleRef: ElementRef, private _http: Http) {

        this.sending = new EventEmitter < boolean > ();
        this.uploadprogress = new EventEmitter < number > ();
        this.success = new EventEmitter < any > ();
        this.error = new EventEmitter < any > ();

    }

    initDropzone() {

        this._http.get("api/getCsrf").subscribe(data => {

            let body = data.json();

            this._dropzone = new Dropzone(this.element, {
                url: this.url,
                uploadMultiple: this.uploadMultiple,
                maxFilesize: this.maxFileSize,
                clickable: this.clickable,
                autoProcessQueue: this.autoProcessQueue,
                addRemoveLinks: this.addRemoveLinks,
                createImageThumbnails: this.createImageThumbnails,
                previewTemplate: this.previewTemplate,
                acceptedFiles: this.acceptedFiles,
                params: {
                    _csrf: body._csrf
                }
            });

            this._dropzone.on("sending", (file, xhr, formaData) => {

                this.sending.emit(true);

            });

            this._dropzone.on("uploadprogress", (file, progress, bytesSent) => {

                this.uploadprogress.emit(progress);

            });

            this._dropzone.on("success", (file) => {

                this.success.emit(file);

            });

            this._dropzone.on("error", (file, message) => {

                this.error.emit(message);

            });

        });

    }

    ngOnInit() {

        this.initDropzone();

    }
}

这是我加载应用时出现的错误

client?93b6:76 [default] /projects/project/dropzone/dropzone.component.ts:79:33 
Cannot find name 'Dropzone'.

有人对此有任何想法吗？我实际上可以访问Dropzone对象，因为它附加到Window，但是我无法让我的组件找到它。

Answer 1

TypeScript对JS文件一无所知，所以如果你有全局的东西，你仍然需要以某种方式告诉TypeScipt。最简单的方法是声明一个任意变量

declare var Dropzone: any

这足以编译代码，因为TypeScript只是在寻找名称Dropzone。因为我们将其输入any。它并不真正关心我们之后使用该符号做什么。它只是接受我们知道我们正在做什么。

当使用带有TypeScript的JS库时，更喜欢使用TypeScript定义文件。如果库不支持TypeScript（在lib中没有自己的定义文件包含），对于流行的库，很可能已经有了定义文件。 Dropzone是其中一个受欢迎的图书馆。

npm install --save-dev @types/dropzone

现在您可以将它导入任何需要的地方

import Dropzone from 'dropzone'

现在你应该得到强大的打字和智能感知。请注意，对我来说，使用VSCode，我必须重新启动IDE才能启动intellisense。这不应该是必需的，它可能是VSCode错误。

将外部JS库导入Angular 2 CLI @NgModule

1 个答案: