Exception at ZoomableImage.ngOnInit

[ilvalerione]

Hello,
I get an error using latest ionic version.

When I click on image to open the gallery I receive this exception:

Error: Cannot read property 'nativeElement' of undefined at ZoomableImage.

<ion-col *ngFor="let photo of step.photos; let i = index">
    <img src="{{photo.thumbnail_url}}" (click)="openGallery(step.photos, i)">
</ion-col>

The openGallery method:

openGallery(photos, index) {
        let modal = this.modalCtrl.create(GalleryModal, {
            photos: this.transformCollection(photos),
            initialSlide: index
        });
        modal.present();
}

private transformCollection(photos){
        return photos.map(function(item){
            return {url: item.original_url};
        });
}

My environment

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.0.0
@ionic/cli-plugin-ionic-angular : 1.0.0
Ionic Framework                 : ionic-angular 3.2.0

[michelmouallem]

Solution : , Please open node_modules => ion-gallery-modal => zoomable-image

on line 49 replace
this.scrollableElement = this.ionScrollContainer['_elementRef'].nativeElement.querySelector('.scroll-content');
TO
this.scrollableElement = document.getElementsByClassName(".scroll-content"); zoomable-image

On line 62 replace
this.scrollableElement.removeEventListener('scroll', this.scrollListener);
TO
document.removeEventListener('scroll', this.scrollableElement , (event) => {
this.scrollEvent.bind(this);
});

On line 75 replace
this.scrollableElement.addEventListener('scroll', this.scrollListener);
TO
document.addEventListener('scroll', this.scrollableElement , (event) => {
this.scrollEvent.bind(this);
});

Enjoy !!!!!

[mewehren]

@michelmouallem i did that, but still having the same exception!!

[ilvalerione]

@michelmouallem thanks a lot, works perfect now.

Do you want the codebase of the Git repository to a new version?

[nikini]

Fixed in version 0.1.0

[shareefmorayur]

i still face the issue. i just installed the plugin today. what is the wrong with my code?? the error is given below

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined
TypeError: Cannot read property 'nativeElement' of undefined
at ZoomableImage.ngOnInit (index.js:47)
at checkAndUpdateDirectiveInline (core.es5.js:10759)
at checkAndUpdateNodeInline (core.es5.js:12137)
at checkAndUpdateNode (core.es5.js:12105)
at debugCheckAndUpdateNode (core.es5.js:12734)
at debugCheckDirectivesFn (core.es5.js:12675)
at Object.eval [as updateDirectives] (GalleryModal.html:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12660)
at checkAndUpdateView (core.es5.js:12072)
at callViewAction (core.es5.js:12387)
at execEmbeddedViewsAction (core.es5.js:12359)
at checkAndUpdateView (core.es5.js:12073)
at callViewAction (core.es5.js:12387)
at execEmbeddedViewsAction (core.es5.js:12359)
at checkAndUpdateView (core.es5.js:12073)
at ZoomableImage.ngOnInit (index.js:47)
at checkAndUpdateDirectiveInline (core.es5.js:10759)
at checkAndUpdateNodeInline (core.es5.js:12137)
at checkAndUpdateNode (core.es5.js:12105)
at debugCheckAndUpdateNode (core.es5.js:12734)
at debugCheckDirectivesFn (core.es5.js:12675)
at Object.eval [as updateDirectives] (GalleryModal.html:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12660)
at checkAndUpdateView (core.es5.js:12072)
at callViewAction (core.es5.js:12387)
at execEmbeddedViewsAction (core.es5.js:12359)
at checkAndUpdateView (core.es5.js:12073)
at callViewAction (core.es5.js:12387)
at execEmbeddedViewsAction (core.es5.js:12359)
at checkAndUpdateView (core.es5.js:12073)
at g (polyfills.js:3)
at l (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (core.es5.js:4136)
at t.invokeTask (polyfills.js:3)
at n.runTask (polyfills.js:3)
at a (polyfills.js:3)
at HTMLButtonElement.invoke (polyfills.js:3)

---

Ionic Framework: 3.0.1
Ionic App Scripts: 1.3.0
Angular Core: 4.0.0
Angular Compiler CLI: 4.0.0
Node: 7.4.0
OS Platform: Linux 4.4
Navigator Platform: Linux x86_64

[nikini]

Did you install the version 0.1.0? Can you show me your package.json?

[shareefmorayur]

i fixed the issue by just editing one line of index.js:56
this.scrollableElement = this.ionScrollContainer['_scrollContent'].nativeElement;
TO
this.scrollableElement = this.ionScrollContainer._elementRef.nativeElement;

Refer the below code

ZoomableImage.prototype.ngOnInit = function() {
        var _this = this;
        // Get the scrollable element this.scrollableElement =
        // this.scrollableElement = this.ionScrollContainer['_scrollContent'].nativeElement;
        this.scrollableElement = this.ionScrollContainer._elementRef.nativeElement;
        // Attach events
        this.attachEvents();
        // Listen to parent resize
        this
            .parentSubject
            .subscribe(function(event) {
                _this.resize(event);
            });
        // Resize the zoomable image
        this.resize(false);
    };

[shareefmorayur]

yes, updated the version to 0.1.0 . pelase check the package.json

{
  "name": "####",
  "author": "####",
  "homepage": "###",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "angular2-moment": "^1.3.3",
    "ionic-angular": "3.0.1",
    "ionic-gallery-modal": "^0.1.0",
    "ionicons": "3.0.0",
    "ng2-filter-pipe": "^0.1.8",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.0",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard",
    "cordova-plugin-whitelist"
  ],
  "cordovaPlatforms": [],
  "description": "",
  "config": {
    "ionic_copy": "./scripts/copy-custom-libs.js"
  }
}

[nikini]

Try v0.1.1.

I've updated a bit more than just that line. I've tested it in the demo and it works, but I'm curious if it works for you (cause the previous version also worked for me)

[mewehren]

@shareefmoaryur @nikini nice work nikini iwas waiting that update!!
sharee i had the same problem and then tried deleting ionic gallery modal folder and reinstall it like this
"npm install ionic-gallery-modal@0.1.0 --save" then start the server again!!

[nikini]

Thanks @peluqui2010
You can also try v0.1.1 and see if it works. It's got some small change and I'm curious if it will work for you

[shareefmorayur]

Thanks @nikini . Now it is working properly. there was one problem of npm install. So i deleted the node_module folder and installed again using 'npm install'.