CODEWITHSUNDEEP
angularangular-clicloudinary
Demiro-FE-Architect
Demiro-FE-Architect

Reputation: 3740

Angular(5) cli - Cloudinary - <cl-image> error

So,

I am trying to implement cloudinary on our website Following instructions I have this:

app.module

...
import { CloudinaryModule } from '@cloudinary/angular-4.x';
import { Cloudinary } from 'cloudinary-core/cloudinary-core-shrinkwrap';
...


const cloudinaryLib = {
  Cloudinary: Cloudinary
}
...
@NgModule({
  declarations: [AppComponent],
  imports: [
    CloudinaryModule.forRoot(cloudinaryLib, {cloud_name: 'mycloudname'})
    ...
  ]
  ...
});

and then in my view I have

<cl-image public-id="id-to-the-asset"></cl-image>

while doing ng serve I am getting an error

ERROR in Error at C:/DEVELOPMENT/app1/src/app/pages/a/a-page.component.html(10,3):  ("
  ></div>

  [ERROR ->]<cl-image public-id="site-assets/aaa"></cl-image>

  <div class="container">
")

Any ideas why? The error says nothing to why

I am using

"@angular/core": "^5.0.0-rc.8",
...
"cloudinary-core": "^2.3.0",
"@cloudinary/angular-4.x": "^1.0.0",
...
"@angular/cli": "^1.5.0-rc.6",

Also, noticed that if I remove cl-image from the view and let the cli build the page I get these warnings:

WARNING in ./node_modules/@cloudinary/angular-4.x/node_modules/@angular/core/@angular/core.es5.js 5659:15-36 Critical dependency: the request of a dependency is an expression at ImportLazyContextDependency.getWarnings (C:/DEVELOPMENT/app1\node_modules\webpack\lib\dependencies\ContextDependency.js:39:18) at Compilation.reportDependencyErrorsAndWarnings (C:/DEVELOPMENT/app1\node_modules\webpack\lib\Compilation.js:703:24) at Compilation.finish (C:/DEVELOPMENT/app1\node_modules\webpack\lib\Compilation.js:561:9) at applyPluginsParallel.err (C:/DEVELOPMENT/app1\node_modules\webpack\lib\Compiler.js:506:17) at C:/DEVELOPMENT/app1\node_modules\tapable\lib\Tapable.js:289:11 at _addModuleChain (C:/DEVELOPMENT/app1\node_modules\webpack\lib\Compilation.js:507:11) at processModuleDependencies.err (C:/DEVELOPMENT/app1\node_modules\webpack\lib\Compilation.js:477:14) at _combinedTickCallback (internal/process/next_tick.js:73:7) at process._tickCallback (internal/process/next_tick.js:104:9) @ ./node_modules/@cloudinary/angular-4.x/node_modules/@angular/core/@angular/core.es5.js @ ./node_modules/@cloudinary/angular-4.x/src/cloudinary-image-source.directive.js @ ./node_modules/@cloudinary/angular-4.x/src/cloudinary.module.js @ ./src/app/app.module.ngfactory.js @ ./src/main.ts @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

WARNING in ./node_modules/@cloudinary/angular-4.x/node_modules/@angular/core/@angular/core.es5.js 5675:15-102 Critical dependency: the request of a dependency is an expression at ImportLazyContextDependency.getWarnings (C:/DEVELOPMENT/app1\node_modules\webpack\lib\dependencies\ContextDependency.js:39:18) at Compilation.reportDependencyErrorsAndWarnings (C:/DEVELOPMENT/app1\node_modules\webpack\lib\Compilation.js:703:24) at Compilation.finish (C:/DEVELOPMENT/app1\node_modules\webpack\lib\Compilation.js:561:9) at applyPluginsParallel.err (C:/DEVELOPMENT/app1\node_modules\webpack\lib\Compiler.js:506:17) at C:/DEVELOPMENT/app1\node_modules\tapable\lib\Tapable.js:289:11 at _addModuleChain (C:/DEVELOPMENT/app1\node_modules\webpack\lib\Compilation.js:507:11) at processModuleDependencies.err (C:/DEVELOPMENT/app1\node_modules\webpack\lib\Compilation.js:477:14) at _combinedTickCallback (internal/process/next_tick.js:73:7) at process._tickCallback (internal/process/next_tick.js:104:9) @ ./node_modules/@cloudinary/angular-4.x/node_modules/@angular/core/@angular/core.es5.js @ ./node_modules/@cloudinary/angular-4.x/src/cloudinary-image-source.directive.js @ ./node_modules/@cloudinary/angular-4.x/src/cloudinary.module.js @ ./src/app/app.module.ngfactory.js @ ./src/main.ts @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

EDITED

I downgraded to latest 4.x angular version and don't get build errors nor warnings... but I do get

'cl-image' is not a known element:

so, still not working

Upvotes: 0

Views: 760

Answers (1)

Richard Matsen
Richard Matsen

Reputation: 23483

It works for me. I'd suggest you need

import * as cloudinary from 'cloudinary-core/cloudinary-core-shrinkwrap';

and

CloudinaryModule.forRoot(cloudinary,
  {
    cloud_name: 'ccloudd'
  } as CloudinaryConfiguration),

Upvotes: 1

Related Questions