將外部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錯誤。