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

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

回答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

回答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.

来源：https://stackoverflow.com/questions/52206640/camanjs-with-angular-6

标签

angular

typescript

types

camanjs