add javascript libary with jquery dependency to angular 9

Question

I want to use watermark.js in my angular app to add watermarks to images before uploading them.

from what i remember, what I did should suffice to make this work:

download

npm i --save watermark.js

add to scripts tag in angular.json

 "scripts":[
    "./node_modules/jquery/dist/jquery.min.js",
    "./node_modules/watermark/dist/jquery.watermark.min.js"
],

use it in a Component

declare var watermark: any;
...
watermark(args)

but i get

ERROR ReferenceError: watermark is not defined

I also tried to declare it as a module by creating src/@types/watermark/index.d.ts and including src/@types it in tsconfig->typeRoots .

declare module 'watermark'

and then importing

import * as w from 'watermark';

But with this the build fails because it cannot find the module 'watermark'.

doing the same with jquery works

import * as $ from 'jquery';
...    
$(window).ready(console.log('test'))

any ideas?

Answer 1

According to watermark page: https://lelinhtinh.github.io/watermark/

$(function() {
  $('.img_awesome').watermark();
});

so in your component get a handle on a dom element with jQuery then:

$(<selector>).watermark();

for this you need to: declare var $:any;