Browser keep crashing with @cloudinary/ng when try use it inside loop in Angular

[BechkoB]

New issue for cloudinary/frontend-frameworks

Before proceeding, please update to the latest version and test if the issue persists

For which package is this issue?

@cloudinary/ng

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK [ ] Performance - Performance issues [ x] Behaviour - Functions aren’t working as expected [ ] Documentation - Inconsistency between the docs and behaviour [ ] Incorrect Types [ ] Other (Specify)

Steps to reproduce

In my Angular App I get an Array with image details from Database with publicId field for example: images = [ { publicId : "something", cratedAt: "...", updatedAt: ".."}, etc.. ] . And in my component I'm trying to loop over them and get the images from Cloudinary: <advanced-image [cldImg]="getImg(image.publicId)">

The method looks like that: getImg(publicId: string): CloudinaryImage { console.log(publicId, 'publicId') const cld = new Cloudinary({ cloud: { cloudName: environment.cloudinary.cloud_name, }, }) return cld.image(publicId) }

when I start the app, my browser crashes all the time. How can I fix this ? It was working before with angular 14 and the depreciated package @cloudinary/angular-5.x . I updated the project to Angular 16.

Browsers (if issue relates to UI, else ignore)

[ ] Chrome [ ] Firefox [ ] Safari [ ] Other (Specify) [x ] All

Versions and Libraries (fill in the version numbers)

@cloudinary/ng: "^2.0.0", Node - v18.17.0 NPM - 9.4.0