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.

Answer 1

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.