ng2-pagination无法加载资源：服务器响应状态为404（未找到）

Question

我正在尝试实施分页。我打电话给web api，它返回了超过1000万条记录。当我实现ng2-pagination时，它会显示此错误

• 无法加载资源：服务器响应状态为404（未找到）

我包含了ng2-pagination包，并提供了对index.html文件的引用

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);
    }
}

我的node_modules

的目录

点击链接查看图片 Dir image

Answer 1

您没有说，但我会假设您正在使用SystemJS加载模块。如果是这样，您需要确保在ng2-pagination-bundle.js文件中包含文件index.html（例如，在<script>标记中）

然后，当您想要在组件中导入它时，只需执行

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

您可以在此处查看SystemJS的工作示例：http://plnkr.co/edit/JVQMPvV8z2brCIzdG3N4?p=preview