ng2-分页错误，angular2，angular-cli答案

【问题标题】：ng2-pagination errors, angular2, angular-cling2-分页错误，angular2，angular-cli
【发布时间】：2016-07-12 03:11:14
【问题描述】：

尝试两个将 ng-pagenation 添加到我的 angular-cli 应用程序中的组件不断收到我无法诊断的错误，请大家帮忙

节点版本 4.4.5

npm 版本 3.8.7

angular-cli: 1.0.0-beta.8

**// admin component**

import { Component, OnInit,ChangeDetectionStrategy }
from'@angular/core';
import {AdminService} from '../admin.service';
import {PaginatePipe,PaginationService, PaginationControlsCmp} from

'ng2-分页';

@Component({
moduleId: module.id,
selector: 'app-admin',
templateUrl: 'admin.component.html',
styleUrls: ['admin.component.css'],
providers:[AdminService,PaginationService],
pipes:[PaginatePipe]

})

export class adminComponent implements OnInit {
public approvedPrayers;
public unApprovedPrayers;
public prayer_error:Boolean = false;
constructor(private adminService:AdminService) {}

ngOnInit() {
}}


**// index.html** 
<!doctype html>
<html>
<head>
<base href="/">

<meta charset="utf-8">
<title>Prayerbox</title>
<base href="/">
**<script src="https://rawgit.com/michaelbromley/
ng2-pagination/master/dist/ng2-pagination-bundle.js"></script>**

{{#unless environment.production}}
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>

{{/unless}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>



{{#each scripts.polyfills}}
<script src="{{.}}"></script>
{{/each}}
<script>
  System.import('system-config.js').then(function () {
    System.import('main');
  }).catch(console.error.bind(console));
</script>
</body>
</html>

//错误

    ng2-pagination-bundle.js:10 Uncaught ReferenceError: System is not 
    defined(anonymous function) @ ng2-pagination-bundle.js:10
    zone.js:461 Unhandled Promise rejection: Error: XHR error 
   (404 Not Found)loading http://localhost:4200/ng2-pagination/index.js

【问题讨论】：

可以尝试在 index.html 中 polyfills 后导入 ng2-pagination 脚本
我在系统配置中唯一做的就是这个 // 第三方桶。 'rxjs', 'ng2-分页',

标签： angular pagination

【解决方案1】：

在 system-config.ts 中删除您在 rxjs 之后添加的引用。然后在同一文件的顶部添加以下内容。

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'ng2-pagination': 'vendor/ng2-pagination' 
};

/** User packages configuration. */
const packages: any = {
    'ng2-pagination':{
    format: 'cjs'
  }
};

在 angular-cli-build.js 中包含对 ng2-paginiation 的引用

  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...,
      'ng2-pagination/dist/**/*.+(js|js.map)'
    ]
  });

同时删除 index.html 中的所有引用

【讨论】：

现在给出错误 zone.js:101 GET localhost:4200/vendor/ng2-pagination 404 (Not Found)
更新 angular-cli-build.js 文件以在供应商 npm 中复制 ng2-pagination
好的，谢谢大家

【解决方案2】：

Allans 答案有效，但您需要更改：

'ng2-pagination/dist/**/*.+(js|js.map)'

收件人：

'ng2-pagination/**/*'

【讨论】：

【解决方案3】：

我遇到了同样的问题。 Matte 和 Allan 的解决方案并不完全适合我，但为我指明了正确的方向。

这是我的解决方案：

angular-cli-build.js：

return new Angular2App(defaults, {
  vendorNpmFiles: [
    ...,
    'ng2-pagination/**/*.+(js|js.map)',
  ]
});

system-config.ts：

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  ...
  'ng2-pagination': 'vendor/ng2-pagination'
};

/** User packages configuration. */
const packages: any = {
  ...
};

packages['ng2-pagination'] = {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'index',
};

重要：编辑 angular-cli-build.js 后：

停止服务器
ng build
ng serve

没有ng build，文件不会复制到 dist/vendor 目录中。

与其他提案的不同之处：

这找不到索引文件，因为它不在 dist 目录中：

'ng2-pagination/dist/**/*.+(js|js.map)'

这会找到比需要更多的文件：

'ng2-pagination/**/*'

我之所以使用packages['ng2-pagination'] = {...}，是因为我在使用我不想接触的函数之前已经填充了 packages 数组。

但它也适用于const packages: any = {'ng2-pagination':{...}}。

但是必须添加defaultExtension: 'js' 和main: 'index'。

否则浏览器找不到模块。

【讨论】：

这对我也有用，但我没有在包中添加defaultExtension: 'js' 和main: 'index'，而是将索引文件添加为第三方桶：const barrels:string[] = ... ,'ng2-pagination', ...。