CODEWITHSUNDEEP
angulartypescripttypescamanjs
Mohamed Adel
Mohamed Adel

Reputation: 2040

CamanJs with angular 6

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

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

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

but when start server I get this error

enter image description here

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

Upvotes: 1

Views: 1562

Answers (2)

SiddAjmera
SiddAjmera

Reputation: 39482

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.

Upvotes: 1

Mohamed Adel
Mohamed Adel

Reputation: 2040

  • 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

Upvotes: 0

Related Questions