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

Have you imported the `Instascan` module into your app component? — Khairul Islam, Mar 04 '20 at 06:01

score 2 · Accepted Answer · answered Mar 04 '20 at 06:38

2

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.

answered Mar 04 '20 at 06:38

zmag

7,825
12
32
42

1

Hello, thank you for the help but after doing this i got the compilation error like "ERROR in ./node_modules/instascan/src/zxing.js Module not found: Error: Can't resolve 'fs', can you help me out? – Aniket Patil Mar 04 '20 at 09:16
@AniketPatil There's the same issue on Github. Hope it helpful. https://github.com/schmich/instascan/issues/95 – zmag Mar 04 '20 at 09:36

score 0 · Answer 2 · answered Mar 04 '20 at 06:19

This is a simple javascript library. If you want to use in component so you need to declare it on after Import. Like this ...

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

declare var Instascan: any;

And If this javascript library useing jQuatry then also you declare $

declare var $: any;

Facing issue at Instascan Library in Angular 6

2 Answers2