Блог

итак, я использовал эту статью, чтобы получить Dropzone.js импортирован в мой проект Angular 2 с помощью Angular CLI. Хотя эта статья была опубликована чуть более 2 месяцев назад до этого вопроса, я заметил, что этот человек не использовал новый синтаксис Angular CLI с @NgModule.

Есть ли способ импортировать это Dropzone.js модуль npm в мой проект?

Мне удалось включить 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, поскольку он прикреплен к окну, но я не могу заставить свой компонент найти его.

TypeScript ничего не знает о файлах JS, поэтому, если у вас есть что-то глобальное, вам все равно нужно так или иначе сообщить об этом TypeScipt. Самым простым способом было бы просто объявить произвольную переменную

 declare var Dropzone: any
  

Этого было бы достаточно для компиляции кода, поскольку TypeScript просто ищет имя Dropzone . И потому, что мы вводим его в any . на самом деле не важно, что мы делаем с этим символом впоследствии. Он просто признает, что мы знаем, что мы с ним делаем.

Однако при использовании библиотек JS с TypeScript более предпочтительно использовать файл определения TypeScript. Если библиотека не поддерживает TypeScript из коробки (не имеет собственного файла определения, включенного в библиотеку), для популярных библиотек, скорее всего, уже существует файл определения. Dropzone — одна из таких популярных библиотек.

 npm install --save-dev @types/dropzone
  

Теперь вы можете импортировать ее везде, где вам это нужно

 import Dropzone from 'dropzone'
  

Теперь вы должны получить строгую типизацию и intellisense. Обратите внимание, что для меня, используя VSCode, мне пришлось перезапустить IDE для запуска intellisense. Это не должно быть обязательным, это может быть ошибка VSCode.