AOT & Angular-CLI throw errors using the base example, new one here

We had a ton of issues related to missing parameters, bad constructors, etc.

First was the @injectable which I detailed on #76.

The AOT example shows how to use rollUp but Angular pushes people to use the CLI.

To use the CLI, you must include the scripts for cloudinary as a global. Inside .angular-cli.json

scripts:["../node_modules/cloudinary-core/cloudinary-core-shrinkwrap.js"]

This will insure that cloudinary is loaded into the global namespace. We used the shrinkwrap version because the lib needs lodash and the shrinkwrap version has the specific lodash bundled together.

Then in your app.module

// cloudinary.. order may be important with AOT
import { Cloudinary } from 'cloudinary-core/cloudinary-core-shrinkwrap';
import { CloudinaryModule, CloudinaryConfiguration } from '@cloudinary-angular';

const cloudConfig = {
  cloud_name: 'your-cloud'
};

const cloudinaryLib = {
  Cloudinary: Cloudinary
};

@NgModule({
  imports: [
          BrowserModule,
          BrowserAnimationsModule,
          CommonModule,
          FormsModule,
          CloudinaryModule.forRoot(cloudinaryLib, cloudConfig)
    ///rest of your code

This cleared all the errors and got everything to compile… Hope it helps!

[mrkhangtran]

For anyone still looking for the solutions, it is here (Angular 5 CLI) https://github.com/cloudinary/cloudinary_angular/tree/master/samples/angular-cli-sample

[RomainMarecat]

Hello ! I had the same issue with

@angular/cli: 1.0.0-rc.2 node: 7.7.2 os: linux x64 @angular/common: 2.4.9 @angular/compiler: 2.4.9 @angular/core: 2.4.9 @angular/forms: 2.4.9 @angular/http: 2.4.9 @angular/platform-browser: 2.4.9 @angular/platform-browser-dynamic: 2.4.9 @angular/router: 3.4.9 @angular/cli: 1.0.0-rc.2 @angular/compiler-cli: 2.4.9 @cloudinary/angular: ^2.1.1 cloudinary-core: ^2.2.0

I try all posibilities in my module : Today the best solution is the last with ng serve works ng serve -aot doesn’t work. EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'CloudinaryJQuery' of null ng build -prod doesn’t work EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'CloudinaryJQuery' of null ng build -aot doesn’t work EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'CloudinaryJQuery' of null

UPDATE 1

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

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FileUploadModule,
    CloudinaryModule.forRoot(Cloudinary, CloudinaryConfig),
  ]
})
export class UserModule {}

UPDATE 2

import * as Cloudinary from 'cloudinary-core';
import { CloudinaryModule, CloudinaryConfiguration } from '@cloudinary/angular';
import { CloudinaryConfig } from './../../shared/cloudinary.config';

const cloudinaryLib = {
  Cloudinary: Cloudinary
};

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FileUploadModule,
    CloudinaryModule.forRoot(cloudinaryLib, CloudinaryConfig),
  ]
})
export class UserModule {}

UPDATE 3

import Cloudinary from shrinkwrap doesn’t works too : import { Cloudinary } from 'cloudinary-core/cloudinary-core-shrinkwrap';

ERROR in ~/src/app/admin/user/user.module.ts (14,28): Cannot find module 'cloudinary-core/cloudinary-core-shrinkwrap'.)

UPDATE 4

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

const cloudinaryLib = {
  Cloudinary: Cloudinary
};

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FileUploadModule,
    CloudinaryModule.forRoot(cloudinaryLib, CloudinaryConfig),
  ]
})

export class UserModule {}

TypeError: cloudinaryJsLib.Cloudinary is not a constructor

UPDATE 5

// user.module.ts
import * as Cloudinary from 'cloudinary-core';
import { CloudinaryModule, CloudinaryConfiguration } from '@cloudinary/angular';
import { CloudinaryConfig } from './../../shared/cloudinary.config';

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FileUploadModule,
    CloudinaryModule.forRoot(Cloudinary, CloudinaryConfig),
  ]
})
export class UserModule {}

In .angular-cli :

"scripts": [
	"../node_modules/jquery/dist/jquery.js",
	"../node_modules/cloudinary-core/cloudinary-core-shrinkwrap.js",
],

I try to add in my packages.json typings like that with eitanp461’s typings (https://github.com/cloudinary/cloudinary_js/pull/122/commits/714d27d15b7880d21f094bdc1f674d025e7389a7), but it doesn’t work too :

{ 
  "dependencies": {
    ...
  },
  "typings": "src/cloudinary-core.d.ts"
}