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

Question

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

有没有办法可以将这个Dropzone.js npm模块导入到我的项目中？

我已经设法将Dropzone.js文件包含在angular-cli.json中的"scripts"属性中:

"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错误.