[英]ng2-pagination errors, angular2, angular-cli
Trying two add ng-pagenation to a component in my angular-cli app keep getting errors that I cant diagnose please some one help 尝试在我的angular-cli应用程序中向组件添加两次ng-pagenation,不断收到无法诊断的错误,请提供一些帮助
node-version 4.4.5 节点版本4.4.5
npm version 3.8.7 npm版本3.8.7
angular-cli: 1.0.0-beta.8 角度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'; '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>
// error //错误
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
In system-config.ts remove the reference you added after rxjs. 在system-config.ts中,删除您在rxjs之后添加的引用。 Then add the following at the top of the same file. 然后将以下内容添加到同一文件的顶部。
/***********************************************************************************************
* 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'
}
};
In the angular-cli-build.js include a reference to ng2-paginiation 在angular-cli-build.js中包含对ng2-paginiation的引用
return new Angular2App(defaults, {
vendorNpmFiles: [
...,
'ng2-pagination/dist/**/*.+(js|js.map)'
]
});
Also remove any references in the index.html 同时删除index.html中的所有引用
Allans answer works, except you need to change: 艾伦回答了作品,但您需要更改:
'ng2-pagination/dist/**/*.+(js|js.map)'
To: 至:
'ng2-pagination/**/*'
I had the same problem. 我有同样的问题。 The solutions of Matte and Allan didn't work for me completely but pointed me into the right direction. Matte和Allan的解决方案并未完全为我服务,但为我指明了正确的方向。
Here's my solution: 这是我的解决方案:
angular-cli-build.js : angular-cli-build.js :
return new Angular2App(defaults, {
vendorNpmFiles: [
...,
'ng2-pagination/**/*.+(js|js.map)',
]
});
system-config.ts : 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',
};
Important : After editing angular-cli-build.js: 重要提示 :编辑angular-cli-build.js之后:
ng build
ng serve
Without the ng build
the files were not copied into the dist/vendor directory. 没有ng build
,文件不会复制到dist / vendor目录。
Differences to the other proposals: 与其他建议的区别:
This doesn't find the index file because it's not in the dist directory: 找不到索引文件,因为它不在dist目录中:
'ng2-pagination/dist/**/*.+(js|js.map)'
This finds more files than needed: 找到的文件超出了所需的数量:
'ng2-pagination/**/*'
I did packages['ng2-pagination'] = {...}
because I've filled the packages array before using a function that I don't want to touch. 我做了packages['ng2-pagination'] = {...}
因为在使用我不想触摸的函数之前,我已经填充了packages数组。
But it works as well with const packages: any = {'ng2-pagination':{...}}
. 但是它与const packages: any = {'ng2-pagination':{...}}
也可以正常工作const packages: any = {'ng2-pagination':{...}}
。
However it was necessary to add defaultExtension: 'js'
and main: 'index'
. 但是,必须添加defaultExtension: 'js'
和main: 'index'
。
Otherwise the browser didn't find the module. 否则,浏览器找不到该模块。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.