ng2-pagination Failed to load resource: the server responded with a status of 404 (Not Found)

Question

I am trying to Implement pagination. I called and web api and it returns more than 10 millions records. when i implement ng2-pagination its shows this error

• Failed to load resource: the server responded with a status of 404 (Not Found)

I include the ng2-pagination package and also give a reference to index.html file

eventlog.component

import {Component, OnInit} from 'angular2/core';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {PaginatePipe, PaginationService, PaginationControlsCmp, IPaginationInstance} from '../../node_modules/ng2-pagination';

export interface PagedResponse<T> {
    total: number;
    data: T[];
}

export interface DataModel {
    id: number;
    source: string;
    level: string;
    category: string;
    date: any;

}

@Component({
    templateUrl: './appScripts/layout/eventlog.html',
    selector: 'eventlog',
    providers: [HTTP_PROVIDERS, PaginationService],
    directives: [PaginationControlsCmp],
    pipes: [PaginatePipe]
})

export class EventLogComponent implements OnInit {
    private _data: Observable<DataModel[]>;
    private _page: number = 1;
    private _total: number;

    constructor(private _http: Http) {

    }
    //api calling from server
    getPage(page: number) {
        this._data = this._http.get("http://localhost:54363/api/data/" + page + "/10")
            .do((res: any) => {
                this._total = res.json().total;
                this._page = page;
            })
            .map((res: any) => res.json().data);
    }
    ngOnInit() {
        this.getPage(1);
    }
}

Dir of my node_modules

Click on a link to see image Dir image

Answer 1

You did not say, but I will assume you are using SystemJS to load your modules. If so, you need to make sure to include the file ng2-pagination-bundle.js in your index.html file, (ie in a <script> tag)

Then, when you want to import it in your component, just do

import {PaginatePipe, PaginationService, PaginationControlsCmp, IPaginationInstance} from 'ng2-pagination';

You can see a working example with SystemJS here: http://plnkr.co/edit/JVQMPvV8z2brCIzdG3N4?p=preview