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

问题描述

所以我一直在使用文章，以通过Angular CLI将Dropzone.js导入到我的Angular 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中的"scripts"属性中:

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"
      ],

这是我的防空区组件:

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'.

有人对此有任何想法吗?实际上，由于附着到Window上的Dropzone对象，我实际上可以访问它，但是我无法让我的组件找到它.

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.

将JS库与TypeScript一起使用时，更可取的是使用TypeScript定义文件.如果库不支持开箱即用的TypeScript(在lib中没有它自己的定义文件)，那么对于流行的库，很可能已经有一个定义文件了. 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才能使用intellisense.这不是必需的，它可能是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屋！