cl-image not compatible with Angular 10

alsoicode commented 4 years ago

Bug report for Cloudinary Angular SDK

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

Describe the bug in a sentence or two.

cli-image tag returns a syntax error

Issue Type (Can be multiple)

Behaviour - Functions aren’t working as expected (Such as generate URL)

Steps to reproduce

Add a cl-image tag and specify a valid public-id

Error screenshots

Syntax error:

ERROR SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse () at transformKeyNames (cloudinary-angular-5.x.js:68) at cloudinary-angular-5.x.js:86 at Array.forEach () at transformKeyNames (cloudinary-angular-5.x.js:80) at Cloudinary.toCloudinaryAttributes (cloudinary-angular-5.x.js:159) at CloudinaryImage.loadImage (cloudinary-angular-5.x.js:522) at CloudinaryImage.ngAfterViewInit (cloudinary-angular-5.x.js:469) at callHook (core.js:2922) at callHooks (core.js:2892)

Browsers (if issue relates to UI, else ignore)

All

Versions and Libraries (fill in the version numbers)

Angular Cloudinary SDK - 1.3.1 Angular - 10.0.4 Node - 14.5.0 NPM - 6.14.5

Config Files (Please paste the following files if possible)

{
  "name": "vilaggio",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "rimraf dist && npm run build:ssr",
    "test": "ng test --watch=false",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run vilaggio:serve-ssr",
    "serve:ssr": "node dist/vilaggio/server/main.js",
    "build:ssr": "rimraf dist && ng build --prod && npm run prerender && ng run vilaggio:server:production",
    "prerender": "ng run vilaggio:prerender",
    "postinstall": "ngcc && npm run build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "10.0.4",
    "@angular/cdk": "10.0.2",
    "@angular/common": "10.0.4",
    "@angular/compiler": "10.0.4",
    "@angular/core": "10.0.4",
    "@angular/forms": "10.0.4",
    "@angular/platform-browser": "10.0.4",
    "@angular/platform-browser-dynamic": "10.0.4",
    "@angular/platform-server": "10.0.4",
    "@angular/router": "10.0.4",
    "@cloudinary/angular": "2.1.1",
    "@cloudinary/angular-5.x": "1.3.1",
    "@contentful/rich-text-html-renderer": "14.1.1",
    "@ngrx/effects": "9.2.0",
    "@ngrx/router-store": "9.2.0",
    "@ngrx/store": "9.2.0",
    "@ngrx/store-devtools": "9.2.0",
    "@nguniversal/common": "10.0.1",
    "@nguniversal/express-engine": "10.0.1",
    "@stripe/stripe-js": "1.8.0",
    "angular2-text-mask": "9.0.0",
    "bootstrap": "4.5.0",
    "cloudinary-core": "2.10.3",
    "contentful": "7.14.5",
    "domino": "2.1.6",
    "express": "4.17.1",
    "file-saver": "2.0.2",
    "guid-typescript": "1.0.9",
    "helmet": "3.23.3",
    "jquery": "3.5.1",
    "moment": "2.27.0",
    "ng2-file-upload": "1.4.0",
    "ngx-captcha": "8.0.1",
    "ngx-stripe": "10.1.1",
    "ngx-take-until-destroy": "5.4.0",
    "ngx-toastr": "13.0.0",
    "nunjucks": "3.2.0",
    "rxjs": "6.6.0",
    "sitemap": "6.2.0",
    "tslib": "2.0.0",
    "zone.js": "0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.1000.3",
    "@angular/cli": "10.0.3",
    "@angular/compiler-cli": "10.0.4",
    "@angular/language-service": "10.0.4",
    "@ngneat/spectator": "5.12.0",
    "@nguniversal/builders": "10.0.1",
    "@types/bootstrap": "4.5.0",
    "@types/express": "4.17.7",
    "@types/jasmine": "3.5.11",
    "@types/jasminewd2": "2.0.8",
    "@types/jquery": "3.5.0",
    "@types/node": "14.0.23",
    "@types/request": "2.48.5",
    "codelyzer": "6.0.0",
    "jasmine-core": "3.5.0",
    "jasmine-marbles": "0.6.0",
    "jasmine-spec-reporter": "5.0.2",
    "karma": "5.1.0",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage-istanbul-reporter": "3.0.3",
    "karma-jasmine": "3.3.1",
    "karma-jasmine-html-reporter": "1.5.4",
    "protractor": "7.0.0",
    "rimraf": "3.0.2",
    "ts-node": "8.10.2",
    "tslint": "6.1.2",
    "typescript": "3.9.7"
  },
  "engines": {
    "node": "14.5.0",
    "npm": "6.14.5"
  }
}

Repository

Repository is private. Can't share publicly.

eyalktCloudinary commented 4 years ago

Hey @alsoicode, thanks for reaching out! We would need some additional information in order to investigate the issue - Could you reproduce the issue in a public repository we can debug? Did you follow the integration steps detailed here? I can see that you have both "@cloudinary/angular" and "@cloudinary/angular-5.x" installed on your environment. Could you try omitting the "@cloudinary/angular" installation?

"@cloudinary/angular": "2.1.1", "@cloudinary/angular-5.x": "1.3.1",

alsoicode commented 4 years ago

@eyalktCloudinary I discovered what the actual problem was after creating a working StackBlitz: https://stackblitz.com/edit/angular-ivy-fs8uaa

In my template, I had added a css class to the cl-image tag:

<cl-image *ngFor="let photo of property.photos; let i = index" [ngClass]="{ 'mr-2': i < property.photos.length - 1, 'mb-3': true }" public-id="{{ photo.publicID }}">
  <cl-transformation height="60" width="90" crop="fill"></cl-transformation>
</cl-image>

In the previous versions I was using:

cloudinary-core: 2.8.2 @cloudinary-angular-5.x: 1.2.2

this was working as expected. It's not a big deal, I can certainly add the styling differently, but as soon as I removed the [ngClass] attribute, it works. So, this issue can be closed since it does in fact work with Angular 10, but something has definitely changed either in Angular or the cl-image tag that is causing this to happen :)

cloudinary / cloudinary_angular