Angular "ERROR TypeError：Undefinedのプロパティ 'match'を読み取れません"

プロジェクトにng2-image-viewerを実装しようとしています。これまでのところ、画像のURLをこのプラグインに渡そうとすると、コンソールは奇妙なエラーをスローしますが、すべてがスムーズに機能しています。

以下は私の

showcase.component.html、

<p>{{ activatedRouteArt | json }}</p>
<div id="image-viewer-container">
    <app-image-viewer 
    [images]="[artURL]"
    [loadOnInit]="true"
    [idContainer]="'idOnHTML'"
    [showOptions]="true"
    >
    </app-image-viewer>
</div>

showcase.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { RawImportData } from 'src/app/models/common/raw-import-data';
import { Artdata } from 'src/app/models/artdata';
import { DataService } from 'src/app/services/data.service';

@Component({
  selector: 'app-showcase',
  templateUrl: './showcase.component.html',
  styleUrls: ['./showcase.component.scss']
})
export class ShowcaseComponent implements OnInit {

  activatedRouteArt: RawImportData<Artdata> = new RawImportData();
  activatedRouteID: number;
  artURL:string;

  constructor(private dataService: DataService,private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.activatedRouteID = +params.id;
    });
    this.fetchArts('all',this.activatedRouteID,'1','50');
  }
  fetchArts(route:string ='all', id:any, page:any, limit:any){
    this.dataService.getArtsAPI(route, id.toString(), page.toString(), limit.toString()).subscribe((data: RawImportData<Artdata>)=>{
      if(data) this.activatedRouteArt=data;
      this.artURL=this.dataService.dataServerURL+this.activatedRouteArt.records['0'].URL;
      console.log(this.artURL);
    }); 
  }
}

これはコンソールがスローしているエラーですが、何もしていません。つまり、私の画像はすでに表示されています。

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
ImageViewerComponent.html:1 ERROR TypeError: Cannot read property 'match' of undefined
    at ImageViewerComponent.push../node_modules/ng2-image-viewer/ng2-image-viewer.umd.js.ImageViewerComponent.isURlImagem (ng2-image-viewer.umd.js:315)
    at Object.eval [as updateRenderer] (ImageViewerComponent.html:1)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:45293)
    at checkAndUpdateView (core.js:44276)
    at callViewAction (core.js:44636)
    at execEmbeddedViewsAction (core.js:44593)
    at checkAndUpdateView (core.js:44271)
    at callViewAction (core.js:44636)
    at execEmbeddedViewsAction (core.js:44593)
    at checkAndUpdateView (core.js:44271)
View_ImageViewerComponent_17 @ ImageViewerComponent.html:1
...
showcase.component.ts:30 http://localhost/artworks/art/a/abbati/abbati1.jpg
client:52 [WDS] Live Reloading enabled.

編集

URLをstaic文字列に置き換えると、エラーはなくなります。この場合、エラーはありません

showcase.component.html

<p>{{ activatedRouteArt | json }}</p>
<div id="image-viewer-container">
    <app-image-viewer 
    [images]="['http://localhost/artworks/art/a/abbati/abbati1.jpg']"
    [loadOnInit]="true"
    [idContainer]="'idOnHTML'"
    [showOptions]="true"
    >
    </app-image-viewer>
</div>