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

Question

所以我一直在使用这篇文章来通过Angular CLI将Dropzone.js导入到我的Angular 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错误。