2016-07-12 9 views
0

Der Versuch, zwei Add ng-pagenation auf eine Komponente in meinem Winkel-cli App werden immer Fehler, die ich bitte jemand helfenNG2-Paginierung Fehler, angular2, eckig-cli

Knoten-Version diagnostizieren kippe 4.4 .5

npm Version 3.8.7

Winkel-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-Paginierung';

@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> 

// Fehler

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 
+0

Können Sie versuchen, importieren ng2-Paginierung Skripte nach Polyfills in index.html –

+0

die einzige Sache, die ich in Systemkonfiguration war diese // Thirdparty Barrel. 'rxjs', 'ng2-pagination', – user2674150

Antwort

0

In-System-config.ts entfernen Sie den Verweis Sie nach rxjs hinzugefügt. Fügen Sie dann am Anfang derselben Datei Folgendes hinzu.

/*********************************************************************************************** 
* 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 den Winkel-cli-build.js einen Verweis auf NG2-paginiation

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

auch alle Verweise in der index.html entfernen

+0

jetzt gibt es Fehler zone.js: 101 GET http: // localhost: 4200/Kreditor/ng2-Paginierung 404 (nicht gefunden) – user2674150

+0

Update eckig-cli-build.js file to copy ng2-pagination im vendor npm –

+0

Ok werde es versuchen danke Jungs – user2674150

0

Allans Werke beantworten, es sei denn Sie brauchen zu ändern:

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

an:

'ng2-pagination/**/*' 
0

Ich hatte das gleiche Problem. Die Lösungen von Matte und Allan funktionierten nicht für mich, sondern zeigten mir die richtige Richtung.

Hier ist meine Lösung:

Winkel-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', 
}; 

Wichtige: Nach Editing eckig-cli-build. js:

  1. Halten Sie den Server
  2. ng build
  3. ng serve

Ohne die ng build die Dateien nicht in den dist/vendor Verzeichnis kopiert wurden.

Unterschiede zu den anderen Vorschlägen:

die Index-Datei wird dadurch nicht finden, weil es nicht in dem dist-Verzeichnis ist:

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

Diese weiteren Dateien findet als nötig:

'ng2-pagination/**/*' 

Ich tat packages['ng2-pagination'] = {...}, weil ich das Paketarray gefüllt habe, bevor ich eine Funktion benutzte, die ich nicht berühren möchte .

Aber es funktioniert auch mit const packages: any = {'ng2-pagination':{...}}.

Es war jedoch notwendig, defaultExtension: 'js' und hinzuzufügen.

Sonst hat der Browser das Modul nicht gefunden.

+0

Das funktionierte für mich auch, aber anstatt die 'defaultExtension: 'js'' und' main:' index'' hinzuzufügen In den Paketen habe ich die Indexdatei einfach als Third-Party-Lauf hinzugefügt: 'const barrels: string [] = ..., 'ng2-pagination', ...'. –