Ionic import Camanjs - ionic-framework

Question

I'm trying to use camanjs library in my ionic v3 project. I installed it using npm install caman --save (also installed cairo, libjpg and libpng). Now in my project folder I can see a folder named caman in node_modules folder, so in my .ts I write
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Caman } from 'caman';
declare var Caman: any;
#Component({
selector: 'page-filtri',
templateUrl: 'filtri.html'
})
export class FiltriPage {
constructor(public navCtrl: NavController) {
}
addFilter(){
Caman("#image", function(){
this.sinCity();
this.render();
})
}
}
and the html file
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="addFilter()">Filtro</button>
<img id='image' src="https://firebasestorage....">
</ion-content>
but if I serve I've
ERROR ReferenceError: Caman is not defined
And that's how my node_modules folder looks like
[node_modules folder]
Can you help me?

Answer 1

Why don't you try changing your import to the following:
import * as Caman from 'caman';

Answer 2

You cannot declare both at the same time like this.
import { Caman } from 'caman';
declare var Caman: any;
you only need to use
import { Caman } from 'caman';
But you get the error "Module parse failed: ...." There is nothing wrong with the import it is because of the CamanJs Uses node-canvas. And canvas loads binary files. like "canvas.node". You need to install node-loader https://github.com/webpack-contrib/node-loader to resolve that error.