Facing issue at Instascan Library in Angular 6

Question

I have imported instascan library in Index.html file ,

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

I have code in my app.component.html as below,

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

I have code in my app.component.ts as below,

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

Facing issue in Instascan, its giving error as below while compiling, Cannot find name 'Instascan'.

Answer 1

Consider using import syntax instead of using link tag.

First, install Instascan NPM package:

npm i instascan

Then import it in your component:

import Instascan from 'instascan';
...

Rest of your code will work.