Возникла проблема в библиотеке Instascan в Angular 6

Question

Я импортировал instascan библиотеку в Индекс. html файл,

<script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"> </script>

У меня есть код в моем app.component. html как ниже,

<video id="preview"></video>

У меня есть код в моем app.component.ts, как показано ниже,

let scanner = new Instascan.Scanner({                                                           
 video: document.getElementById('preview'),                                                    
 mirror: false,
 facingMode: { exact: 'environment' }});

 Instascan.Camera.getCameras().then(cameras => {
    if (cameras.length > 0) {
        this.scanner.start(cameras[1]);
    } else {
        alert("Camera Permission denied");
        window.location.reload();
    }
}).catch(error => {
    console.log(error);
    window.location.reload();
})

Возникла проблема в Instascan , ошибка выдачи, как показано ниже, пока компиляция, Не удается найти имя 'Instascan' .

Answer 1

Попробуйте использовать синтаксис import вместо тега link.

Сначала установите пакет Instascan NPM:

npm i instascan

Затем импортируйте его в свой компонент:

import Instascan from 'instascan';
...

Остальная часть вашего кода будет работать.

Answer 2

Это простая javascript библиотека. Если вы хотите использовать компонент, вам нужно declare включить его после Import. Вот так ...

import { Component, OnInit} from '@angular/core';

declare var Instascan: any;

И если эта javascript библиотека использует jQuatry, то и вы declare $

declare var $: any;