将外部 JS 库导入 Angular 2 CLI @NgModule [英] Importing external JS Library to Angular 2 CLI @NgModule

问题描述

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

so I've been using this article to get Dropzone.js imported into my Angular 2 project via Angular CLI. Though this article was published a little over 2 months ago before this question, I'm noticing this person wasn't use the new Angular CLI syntax with @NgModule.

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

Is there a way I can import this Dropzone.js npm module into my project?

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

I've managed to include the Dropzone.js file into my "scripts" property in angular-cli.json here:

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

这是我的 dropzone 组件:

Here is my dropzone component:

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();

    }
}

这是我加载应用程序时遇到的错误

And here is the error I get when I load my app

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

有人对此有什么想法吗?我实际上可以访问 Dropzone 对象，因为它附加到 Window，但我无法让我的组件找到它.

Anyone have any thoughts on this? I actually can access the Dropzone object, as it's attached to the Window, but I can't get my component to find it.

推荐答案

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

TypeScript doesn't know anything about JS files, so if you have something global you still need to tell TypeScipt about it, one way or another. The easiest way would be to just declare an arbitrary variable

declare var Dropzone: any

这足以编译代码，因为 TypeScript 只是在寻找名称 Dropzone.因为我们将它输入到 any.它并不真正关心我们之后用那个符号做什么.它只是承认我们知道我们在用它做什么.

This would be enough to compile the code, as TypeScript is simply looking for a name Dropzone. And because we type it to any. it doesn't really care what we do with that symbol afterwards. It just accepts that we know what we're doing with it.

在 TypeScript 中使用 JS 库时，更倾向于使用 TypeScript 定义文件.如果库不支持开箱即用的 TypeScript(库中没有包含自己的定义文件)，对于流行的库，很可能已经有一个定义文件.Dropzone 是那些流行的库之一.

When using JS libraries with TypeScript, it's more preferred to use the TypeScript definition file though. If the library doesn't support TypeScript out the box (doesn't have it's own definition file include in the lib), for popular libraries, there is most likely already a definition file out there. Dropzone is one of those popular libraries.

npm install --save-dev @types/dropzone

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

Now you can import it wherever you need it

import Dropzone from 'dropzone'

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

Now you should get strong typing and intellisense. Note that for me, using VSCode, I had to restart the IDE for the intellisense to kick in. This should not be required, it might be a VSCode bug.

这篇关于将外部 JS 库导入 Angular 2 CLI @NgModule的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！