Cannot read property 'CloudinaryJQuery' of null

[Abhivendra]

"@cloudinary/angular-5.x": "^1.0.1", "cloudinary-core": "^2.5.0",

Working fine on ng build --prod --aot=false. But giving this error on ng build --prod. Tried all the solutions of https://github.com/cloudinary/cloudinary_angular/issues/92 https://github.com/cloudinary/cloudinary_angular/issues/73

Please resolve it ASAP. My app performance has reduced by 60% without ahead of time compilation.

[strausr]

@Abhivendra Can you please share with us more information on your implementation? For example, your module.ts that initialize the Cloudinary module? What tools are you using for build/deploy?

[Abhivendra]

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    SharedModule,
    ToastrModule.forRoot({
      progressBar: true,
      closeButton: true,
      preventDuplicates: true,
      progressAnimation: 'increasing',
      positionClass: 'toast-top-right',
      iconClasses: {
        error: 'toast-error',
        info: 'toast-info',
        success: 'toast-success',
        warning: 'toast-warning',
      }
    }),
    RouterModule.forRoot(AppRoutes),
    FormsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    NgbModule.forRoot(),
    SidebarModule.forRoot(),
    CloudinaryModule.forRoot(Cloudinary, {cloud_name: '<cloud here>', upload_preset: '<name here>'}),)
  ],

[Abhivendra]

ngOnInit() {
    // Create the file uploader, wire it to upload to your account
    const uploaderOptions: FileUploaderOptions = {
      url: `https://api.cloudinary.com/v1_1/${this.cloudinary.config().cloud_name}/upload`,
      // Upload files automatically upon addition to upload queue
      autoUpload: true,
      // Use xhrTransport in favor of iframeTransport
      isHTML5: true,
      // Calculate progress independently for each uploaded file
      removeAfterUpload: true,
      // XHR request headers
      headers: [
        {
          name: 'X-Requested-With',
          value: 'XMLHttpRequest'
        }
      ]
    };
    this.uploader = new FileUploader(uploaderOptions);

    this.uploader.onBuildItemForm = (fileItem: any, form: FormData): any => {
      // Add Cloudinary's unsigned upload preset to the upload form
      form.append('upload_preset', this.cloudinary.config().upload_preset);
      // Add built-in and custom tags for displaying the uploaded photo in the list
      let tags = this.schoolData.name;
      if (this.studentData.name) {
        form.append('context', `photo=${this.studentData.name}`);
        tags = `${this.schoolData.name},${this.studentData.name}`;
      }
      // Upload to a custom folder
      // Note that by default, when uploading via the API, folders are not automatically created in your Media Library.
      // In order to automatically create the folders based on the API requests,
      // please go to your account upload settings and set the 'Auto-create folders' option to enabled.
      form.append('folder', 'profile_pic');
      // Add custom tags
      form.append('tags', tags);
      // Add file to upload
      form.append('file', fileItem);
      console.log('onBuildItemForm fileItem', fileItem);
      // Use default "withCredentials" value for CORS requests
      fileItem.withCredentials = false;
      return {fileItem, form};
    };

    // Insert or update an entry in the responses array
    const upsertResponse = fileItem => {
      console.log('fileItem', fileItem);
      // Run the update in a custom zone since for some reason change detection isn't performed
      // as part of the XHR request to upload the files.
      // Running in a custom zone forces change detection
      this.zone.run(() => {
        // Update an existing entry if it's upload hasn't completed yet
        // Find the id of an existing item
        const existingId = this.responses.reduce((prev, current, index) => {
          if (current.file.name === fileItem.file.name && !current.status) {
            return index;
          }
          return prev;
        }, -1);
        if (existingId > -1) {
          // Update existing item with new data
          this.responses[existingId] = Object.assign(this.responses[existingId], fileItem);
        } else {
          // Create new response
          this.responses.push(fileItem);
        }
      });
    };
    // Update model on completion of uploading a file
    this.uploader.onCompleteItem =
      (item: any, response: string, status: number, headers: ParsedResponseHeaders) => {
        if (this.IsJsonString(response)) {
          const data = JSON.parse(response);
          console.log('onCompleteItem response', data);
          this.studentData.picturePublicId = data.public_id;
          this.studentData.picture = data.secure_url;
          this.delete_token = data.delete_token;
          return upsertResponse({
            file: item.file,
            status,
            data: data
          });
        } else {
          return upsertResponse({
            file: item.file,
            status
          });
        }
      };

    // Update model on upload progress event
    this.uploader.onProgressItem = (fileItem: any, progress: any) => {
      console.log('progress', progress);
      this.progress = progress;
      return upsertResponse({
        file: fileItem.file,
        progress,
        data: {}
      });
    };
  }

[Abhivendra]

It's working without --aot

[Abhivendra]

"dependencies": {
    "@agm/core": "1.0.0-beta.2",
    "@angular/animations": "5.0.2",
    "@angular/common": "5.0.2",
    "@angular/compiler": "5.0.2",
    "@angular/core": "5.0.2",
    "@angular/forms": "5.0.2",
    "@angular/http": "5.0.2",
    "@angular/platform-browser": "5.0.2",
    "@angular/platform-browser-dynamic": "5.0.2",
    "@angular/router": "5.0.2",
    "@cloudinary/angular-5.x": "^1.0.1",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
    "@ngx-translate/core": "8.0.0",
    "@ngx-translate/http-loader": "2.0.0",
    "@swimlane/ngx-charts": "6.1.0",
    "@swimlane/ngx-datatable": "11.0.4",
    "@types/lodash": "^4.14.108",
    "angular-calendar": "0.21.3",
    "angular-translator": "^2.4.2",
    "angular-tree-component": "5.2.1",
    "angular2-recaptcha": "^0.6.0",
    "angular2-text-mask": "8.0.4",
    "angularfire2": "^5.0.0-rc.5-next",
    "bootstrap": "4.0.0-beta",
    "chart.js": "^2.7.2",
    "classlist.js": "^1.1.20150312",
    "cloudinary-core": "^2.5.0",
    "core-js": "2.5.1",
    "d3": "^4.8.0",
    "dragula": "3.7.2",
    "firebase": "^4.13.1",
    "font-awesome": "^4.7.0",
    "intl": "^1.2.5",
    "lodash": "^4.17.10",
    "moment": "^2.22.1",
    "moment-timezone": "^0.5.16",
    "ng-sidebar": "6.0.4",
    "ng2-dragula": "1.5.0",
    "ng2-file-upload": "1.2.1",
    "ng2-validation": "4.2.0",
    "ngx-moment": "^2.0.0-rc.0",
    "ngx-toastr": "^8.4.0",
    "quill": "1.3.4",
    "raven-js": "^3.24.2",
    "resize-observer-polyfill": "^1.4.2",
    "rxjs": "5.5.2",
    "screenfull": "3.3.2",
    "spinthatshit": "1.0.4",
    "text-mask-addons": "3.7.1",
    "web-animations-js": "^2.2.5",
    "zone.js": "0.8.10"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.0",
    "@angular/compiler-cli": "5.0.2",
    "@angular/language-service": "5.0.2",
    "@types/google.analytics": "0.0.39",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }

[eitanp461]

@Abhivendra We're missing the code that sets up the module.

Please try the following:

import { Cloudinary as CloudinaryCore } from 'cloudinary-core';
...
export const cloudinary = {
  Cloudinary: CloudinaryCore
};
...

@NgModule({
  declarations: [
      ...
  ],
  imports: [
      ...
    CloudinaryModule.forRoot(cloudinary, config),
  ],
  ...
})
export class AppModule { }

[roeeba]

Closing this issue due to the time elapsed. Please feel free to either re-open the issue, contact our support at http://support.cloudinary.com or create a new ticket if you have any additional issues.

[IyiKuyoro]

Hello,

I just ran into this issue and the solution posted by @eitanp461 fixed it.

May I ask. Is it within the capacity of this team to update this documentation? https://cloudinary.com/documentation/angular_integration

[yakirp]

Hi @IyiKuyoro , I will check this with our Doc Team. Thanks :)

[dalepo]

@yakirp could you please update this, wasted an entire day :(.