CamanJs with angular 6

Question

I am trying to use camanjs with angular 6. How to add js lib and use it with angular when there are no types for it on npm. I follow many steps

• install caman using npm

• adding it to angular.json as a script using its path in node modules

• import it into the component like

import * as Caman from 'path to caman in node module'

• the in AfterViewInit I use it like

  ngAfterViewInit() {
       Caman('#image-id', function () {
            this.brightness(10);
            this.contrast(20);
          });
     }

but when start server I get this error

link to code: https://stackblitz.com/edit/angular-d5g941

Answer 1

• First do as How can i use foxTooltip with Angular?

• Then add Caman.pack.js from nodemodules _ under caman folder into assets

• Make sure your declared var in the beginning of the Component is the Same name as in Package "Caman" case senstive

Answer 2

Inside .angular-cli.json's scripts array, add the path to caman

"scripts": [
    "../node_modules/path-to-caman"
],

In case of Angular 6 in angular.json's scripts array, add the path to caman

"scripts": [
    "node_modules/path-to-caman"
],

and then, inside your Component, just declare a variable named Caman like this:

declare var Caman: any;

You don't need to do

import * as Caman from 'path-to-caman'

as your compiler will throw an error stating that:

Cannot find module 'caman'.

Just adding the script to the scripts array in .angular-cli/angular.json(in case of Angular 6) will add it to the global scope and you'll be able to access it from your components.

Also, make sure that you call any function on it inside the ngAfterViewInit lifecycle hook method as it tries to access the DOM elements by id.