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