System is not defined at Object.<anonymous> (angular2-image-popup\directives\angular2-image-popup\image-modal-popup.js)

[Nikolay-Uvarov]

Can you help me solve the problem? app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component'
..
import { PhotosComponent } from './components/photos/photos.component';
import { Title } from '@angular/platform-browser';
import { ImageModal } from 'angular2-image-popup/directives/angular2-image-popup/image-modal-popup';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        PhotosComponent,
        ImageModal,
        ..
    ],
    imports: [
        FormsModule,
        TextMaskModule,
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        ImageUploadModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'photos', component: PhotosComponent },
            { path: 'Account/Logout', redirectTo: "/Account/Logout" },
            ..
            { path: '**', redirectTo: 'home' }
        ])
    ],
    providers: [Title],
})
export class AppModule {
}

photo.componnt.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    selector: 'photos',
    template: require('./photos.component.html')
})
export class PhotosComponent {
    public photos: IPhoto[];

    constructor(http: Http) {
        http.get('/api/SampleData/Photos').subscribe(result => {
            this.photos = result.json();
        });
    }

    openModalWindow: boolean = false;
    imagePointer: number;
    images = [
        { thumb: './Files/Photo1.jpg', img: './Files/Photo1', description: 'Image 1' },
        { thumb: './Files/Photo2.jpg', img: './Files/Photo2', description: 'Image 2' },
        { thumb: './Files/Photo3.jpg', img: './Files/Photo3', description: 'Image 3' },
       ];

    OpenImageModel(imageSrc, images) {
        //alert('OpenImages');
        var imageModalPointer;
        for (var i = 0; i < images.length; i++) {
            if (imageSrc === images[i].img) {
                imageModalPointer = i;
                console.log('jhhl', i);
                break;
            }
        }
        this.openModalWindow = true;
        this.images = images;
        this.imagePointer = imageModalPointer;
    }
    cancelImageModel() {
        this.openModalWindow = false;
    }

}

interface IPhoto {
    id: number;
    path: string;
    name: string;
}

photo.component.html

<p *ngIf="!photos"><em>Loading...</em></p>
<div *ngIf="photos">
    <p> you can directly access "ImageModel" directive for both listing thumbnails and popup images</p>
    <ImageModal [modalImages]="images"></ImageModal>
    <div *ngIf="openModalWindow">
        <ImageModal [modalImages]="images" [imagePointer]="imagePointer" (cancelEvent)="cancelImageModel()"></ImageModal>
    </div>
</div>