Cannot read property 'replace' of undefined while implementing ngx-gallery

Question

I was just trying ngx-gallery in my project with a few urls from google images but every time I get the following error in the console:

ERROR TypeError: Cannot read property 'replace' of undefined at NgxGalleryHelperService.push../node_modules/ngx-gallery/bundles/ngx-gallery.umd.js.NgxGalleryHelperService.validateUrl (ngx-gallery.umd.js:121) at NgxGalleryHelperService.push../node_modules/ngx-gallery/bundles/ngx-gallery.umd.js.NgxGalleryHelperService.getBackgroundUrl (ngx-gallery.umd.js:133) at NgxGalleryImageComponent.push../node_modules/ngx-gallery/bundles/ngx-gallery.umd.js.NgxGalleryImageComponent.getSafeUrl (ngx-gallery.umd.js:367) at Object.eval [as updateRenderer] (NgxGalleryImageComponent.html:3) at Object.debugUpdateRenderer [as updateRenderer] (core.js:10872) at checkAndUpdateView (core.js:10248) at callViewAction (core.js:10484) at execEmbeddedViewsAction (core.js:10447) at checkAndUpdateView (core.js:10244) at callViewAction (core.js:10484)

Here is my component.ts

export class FefileComponent implements OnInit {
  galleryOptions: NgxGalleryOptions[];
  galleryImages: NgxGalleryImage[];

  ngOnInit(): void {
  this.galleryOptions = [
    {
      'imageArrows': true,
      'imageSwipe': false,
      'thumbnailsArrows': true,
      'thumbnailsSwipe': false,
      'previewSwipe': true,
      'thumbnailsMargin': 0,
      'thumbnailMargin': 0,
      'thumbnailsColumns': 6,
      'width': '100%',
      'height': '450px',
    },
    {
      'imageArrows': true,
      'imageSwipe': false,
      'thumbnailsArrows': true,
      'thumbnailsSwipe': false,
      'previewSwipe': true,
      'thumbnailsMargin': 0,
      'thumbnailMargin': 0,
      'thumbnailsColumns': 6,
      'width': '100%',
      'height': '450px',
    },
  ];

  this.galleryImages = [
      {
          small: 'https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350',
          big: 'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg'
      },
      {
          small: 'https://images.hindi.news18.com/ibnkhabar/uploads/459x306/jpg/2018/02/p5-1.jpg',
          big: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNWkbzIr0rgBhjLJ1OqE7gmDEU5RqOunqwW-na5kcqKfr4tZx5eg'
      }
  ];
  }
}

I have imported the Module in my module.ts properly. My html is:

<div class="container">

    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href>Angular2 File Upload</a>
        </div>
    </div>

    <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>

</div>

I have mostly worked with Node till now so not really familiar with angular that much so I'd appreciate if you could just show me the way here. Thanks in advance.

how do I check for that? I am using webpack for lazy loading — properchels, Sep 15 '18 at 06:04

score 8 · Accepted Answer · answered Sep 15 '18 at 07:05

ngx-Gallery uses URLs for all sizes(small, medium, big). but here you are just passing only the URLs for the small and big, and replace function is reading the URLs for all sizes and getting undefined for the medium URL that is why you getting this error. Try placing the medium URL also and see if it works.

score 0 · Answer 2 · answered Sep 14 '18 at 13:29

0

try to wrap your ngx-gallery with *ngIf

<div *ngIf="galleryOptions?.length && galleryImages?.length">
  <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
</div>

My guess is that your view initialized earlier than these objects get filled with data;

answered Sep 14 '18 at 13:29

Maksym Shevchenko

718
6
11

Thanks for the quick response. Yeah I tried that but to no effect. Still the same error in console. – properchels Sep 15 '18 at 04:55

Cannot read property 'replace' of undefined while implementing ngx-gallery

2 Answers2