CODEWITHSUNDEEP
angulartypescriptcloudinary
Julien
Julien

Reputation: 4163

Cloudinary & Angular: 'cl-transformation' is not known element

I would like to add a cl-transformation to an image but I get this error :

'cl-transformation' is not known element

Here is what I tried so far:

in intro.html :

<cl-image public-id="sample" cloud-name="test" >
    <cl-transformation effect="shadow"><cl-transformation>
</cl-image>

in intro.module.ts :

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { IntroPage } from './intro';
import {FileUploadModule } from 'ng2-file-upload';
import { Ng2CloudinaryModule } from 'ng2-cloudinary';

@NgModule({
  declarations: [
      IntroPage,
  ],
  imports: [
      IonicPageModule.forChild(IntroPage),
      FileUploadModule,
      Ng2CloudinaryModule    => seems necessary for cl-image
   ]
})
export class IntroPageModule {}

Result (OKAY): 

<cl-image public-id="sample" cloud-name="test" >
</cl-image>

but with "cl-transformation" then I get this error:

enter image description here

I also tried :

in app.module.ts :

import { CloudinaryModule, CloudinaryConfiguration } from '@cloudinary/angular';
import { Cloudinary } from 'cloudinary-core';

...
imports:[
   CloudinaryModule.forRoot({Cloudinary}, { cloud_name: 'test' } as CloudinaryConfiguration),
]

but I get :

OpaqueToken is not a constructor

What I finally tried also:

in intro.ts:

import {CloudinaryImageComponent} from 'ng2-cloudinary';

(the doc says : This directive allows displaying Cloudinary image and apply transformations )

but it still doesn't work...

Any idea?

Upvotes: 1

Views: 820

Answers (2)

Mohamad Al Asmar
Mohamad Al Asmar

Reputation: 1177

Simply use these newer packages, more advanced and updated to angular 5+

cloudinary_angular

cloudinary-core

Upvotes: 0

Matt Greene
Matt Greene

Reputation: 434

It looks like you're mixing Cloudinary's SDK with another external one (https://github.com/ekito/ng2-cloudinary). The external one probably doesn't have a component at all.

If you're using Cloudinary's SDK it should be (assuming Angular 5) import { CloudinaryModule, CloudinaryConfiguration } from '@cloudinary/angular-5.x';

Upvotes: 1

Related Questions