ng2-pagination errors, angular2, angular-cli
Question
Trying two add ng-pagenation to a component in my angular-cli app keep getting errors that I cant diagnose please some one help
node-version 4.4.5
npm version 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-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
3 answers
solution1
0 2016-07-12 04:50:03
In system-config.ts remove the reference you added after 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
return new Angular2App(defaults, {
vendorNpmFiles: [
...,
'ng2-pagination/dist/**/*.+(js|js.map)'
]
});
Also remove any references in the index.html
solution2
0 2016-07-15 08:45:26
Allans answer works, except you need to change:
'ng2-pagination/dist/**/*.+(js|js.map)'
To:
'ng2-pagination/**/*'
solution3
0 2016-07-20 17:35:17
I had the same problem. The solutions of Matte and Allan didn't work for me completely but pointed me into the right direction.
Here's my solution:
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',
};
Important : After editing angular-cli-build.js:
- Stop the server
-
ng build -
ng serve
Without the ng build the files were not copied into the dist/vendor directory.
Differences to the other proposals:
This doesn't find the index file because it's not in the dist directory:
'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.
But it works as well with const packages: any = {'ng2-pagination':{...}} .
However it was necessary to add defaultExtension: 'js' and main: 'index' .
Otherwise the browser didn't find the module.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.