Импорт внешней библиотеки JS в Angular 2 CLI @NgModule

Question

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

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

Я сумел включить в Dropzone.js файл в мои "сценарии" свойство в угловой-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, поскольку он прикреплен к окну, но я не могу заставить его компонент найти его.

Answer 1

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

declare var Dropzone: any 

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

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

npm install --save-dev @types/dropzone 

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

import Dropzone from 'dropzone' 

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