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

Question

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

有什么方法可以将这个 Dropzone.js npm module 导入到我的项目中？

我已经成功地将 Dropzone.js 文件包含到我的 "scripts" 属性的 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（库中没有包含它自己的定义文件），对于流行的库，很可能已经有一个定义文件了。 Dropzone 是那些流行的库之一。

npm install --save-dev @types/dropzone

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

import Dropzone from 'dropzone'

现在您应该获得强类型和智能感知。请注意，对我来说，使用 VSCode，我必须重新启动 IDE 才能启动智能感知。这不是必需的，它可能是一个 VSCode 错误。

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

Importing external JS Library to Angular 2 CLI @NgModule

dropzone.js

angular-cli

angular