40999

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

<ul><li>

install caman using npm

</li> <li>

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

</li> <li>

import it into the component like

</li> </ul><blockquote>

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

</blockquote> <ul><li>the in AfterViewInit I use it like</li> </ul><blockquote> ngAfterViewInit() { Caman('#image-id', function () { this.brightness(10); this.contrast(20); }); } </blockquote>

but when start server I get this error

<a href="https://i.stack.imgur.com/zzadZ.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/zzadZ.png" data-original="https://i.stack.imgur.com/zzadZ.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

link to code: <a href="https://stackblitz.com/edit/angular-d5g941" rel="nofollow">https://stackblitz.com/edit/angular-d5g941</a>

Answer1:

<ul><li>

First do as <a href="https://stackoverflow.com/questions/51895876/how-can-i-use-foxtooltip-with-angular/51897552#51897552" rel="nofollow">How can i use foxTooltip with Angular?</a>

</li> <li>

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

</li> <li>Make sure your declared var in the beginning of the Component is the Same name as in Package "Caman" case senstive </li> </ul>

Answer2:

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 <strong>don't</strong> need to do

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

as your compiler will throw an error stating that:

<blockquote>

Cannot find module 'caman'.

</blockquote>

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.

Recommend

  • Using a normal JS librarary with Ionic2 + typescript
  • How do I append DOM to an Angular 2 component and still get encapsulated styles
  • Is there a way to set the bounds and Zoom level in AGM Map?
  • Unable to bind the data from the table row in the popup
  • “import”ing d3 and d3-cloud with webpack
  • Rabin Karp Algorithm - How is the worst case O(m*n) for the given input?
  • Not able to open a portlet in liferay dialog
  • How do I resolve type errors using angular2 and aspnet core?
  • using `ViewChild` - method is not calling the child method
  • Best practice to handle default server and ip forwarding in nginx
  • Copy Access database query into Excel spreadsheet
  • How do I resolve an “invalid quantifier” error with regexp in javascript?
  • Unable to get hold of child DOM element
  • @viewChild return undefined
  • How to use HTTP Authentication with PHP and then run the entered data against a database?
  • How to estimate the Kalman Filter with 'KFAS' R package, with an AR(1) transition equation
  • AndEngine Applying Transparancy to AndEngine View
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • How do I exclude a dependency in provided scope when running in Maven test scope?
  • Is there a perl module to validate passwords stored in “{crypt}hashedpassword” “{ssha}hashedpassword
  • Python urlparse: small issue
  • Typescript - Unable to get 'import' statement to function
  • Meteor helpers not available in Angular template
  • FileReader+canvas image loading problem
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • Updating server-side rendering client-side
  • Why winpcap requires both .lib and .dll to run?
  • Return words with double consecutive letters
  • How to delete a row from a dynamic generate table using jquery?
  • Python: how to group similar lists together in a list of lists?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • using HTMLImports.whenReady not working in chrome
  • How to stop GridView from loading again when I press back button?
  • python draw pie shapes with colour filled
  • Busy indicator not showing up in wpf window [duplicate]
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?