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

Question

尝试在我的angular-cli应用程序中向组件添加两次ng-pagenation，不断收到无法诊断的错误，请提供一些帮助

节点版本4.4.5

npm版本3.8.7

角度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-pagination';

@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

Answer 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中的所有引用

Answer 2

艾伦回答了作品，但您需要更改：

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

至：

'ng2-pagination/**/*'

Answer 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':{...}}也可以正常工作const packages: any = {'ng2-pagination':{...}} 。

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

否则，浏览器找不到该模块。

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

问题描述

3 个解决方案

解决方案1
0 2016-07-12 04:50:03

解决方案2
0 2016-07-15 08:45:26

解决方案3
0 2016-07-20 17:35:17

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

问题描述

3 个解决方案

解决方案1 0 2016-07-12 04:50:03

解决方案2 0 2016-07-15 08:45:26

解决方案3 0 2016-07-20 17:35:17

解决方案1
0 2016-07-12 04:50:03

解决方案2
0 2016-07-15 08:45:26

解决方案3
0 2016-07-20 17:35:17