Question

尝试在angular-cli应用中为组件添加两个ng-pagenation 继续得到我无法诊断的错误请一些帮助

node-version 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

＆＃39; NG2-分页＆＃39 ;;

@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之后添加的引用。然后在同一文件的顶部添加以下内容。

$this->com=mysql_query("update product set product_name='$name', product_price='$price', product_quantity='$quantity', product_description='$desc' where productid='$id'", $this->con);

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

/***********************************************************************************************
 * 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'
  }
};

同时删除index.html中的任何引用

Answer 2

Allans回答有效，除非您需要更改：

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

要：

'ng2-pagination/**/*'

Answer 3

我遇到了同样的问题。 Matte和Allan的解决方案对我来说并不完全有效，但我指出了正确的方向。

这是我的解决方案：

<强>角-CLI-build.js ：

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

<强>系统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'] = {...}，因为在使用我不想触摸的功能之前，我已经填充了数据包数组。

但它与const packages: any = {'ng2-pagination':{...}}一样好用。

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

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

ng2-pagination errors，angular2，angular-cli

3 个答案: