Comment implémenter PrimeNG avec angulaire2-graine

Question

J'ai essayé d'installer un projet angulaire à 2 graines qui fonctionne maintenant mais maintenant je veux ajouter PrimeNG à mon environnement mais je suis resté coincé avec lui.

hors cours de ma première étape: l'installation primeng et primeui

npm install primeng --save 
npm install primeui --save 

Puis j'ai ajouté un mapping @https://github.com/mgechev/angular2-seed/blob/master/tools/config/seed.config.ts#L129

Mon élément ressemble à ceci:

import {Component} from 'angular2/core'; 
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common'; 
import {PieChart} from 'primeng/primeng'; 

@Component({ 
    selector: 'sd-stats', 
    moduleId: module.id, 
    templateUrl: './stats.component.html', 
    styleUrls: ['./stats.component.css'], 
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, PieChart] 
}) 

export class StatsComponent { 

    data: any[]; 

    constructor() { 
     this.data = [{ 
      value: 300, 
      color: '#F7464A', 
      highlight: '#FF5A5E', 
      label: 'Red' 
     }, 
      { 
      value: 50, 
      color: '#46BFBD', 
      highlight: '#5AD3D1', 
      label: 'Green' 
     }, 
     { 
      value: 100, 
      color: '#FDB45C', 
      highlight: '#FFC870', 
      label: 'Yellow' 
     }]; 
    } 
} 

fichier html

<p-pieChart [value]="data" width="300" height="300"></p-pieChart> 

Tout cela ne suffisait pas: Je pense que j'ai encore besoin d'ajouter les fichiers css suivants & js mais je ne sais pas où!

<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/delta/theme.css" /> 
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.css" /> 
<script src="node_modules/primeui/primeui-ng-all.js"></script> 

et je ne suis pas sûr si les étapes précédentes étaient également correctes. Au moment où je suis l'erreur:

EXCEPTION: ReferenceError: Chart is not defined

Answer 1

Ah selon cette page Chart.js doivent également figurer aussi bien!

Answer 2

Cette réponse arrive un peu tard mais de toute façon.

J'ai eu presque les mêmes problèmes que vous et après de nombreuses heures de travail je l'ai résolu pour moi. J'ai fait toutes les démarches pour que PrimeNg fonctionne comme on nous l'a dit au PrimeNG mais mon application ne fonctionnait toujours pas.

J'ai compris que mon problème était mon fichier System.JS.

Ceci est mon System.JS et j'ai eu PrimeNG fonctionnant avec cela. Et je placé mes s <script> de » comme ça:

<!-- CSS for PrimeUI --> 
<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/bluesky/theme.css" /> 
<link rel="stylesheet" href="font-awesome.min.css" /> 
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" /> 

<script src="node_modules/es6-shim/es6-shim.min.js"></script> 
<script src="node_modules/systemjs/dist/system-polyfills.js"></script> 

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 
<script src="node_modules/angular2/bundles/router.dev.js"></script> 

<!-- JS for NG-Prime--> 
<script src="node_modules/primeui/primeui-ng-all.min.js"></script> 

<script> 
    System.config({ 
     defaultJSExtensions: true, 
     packages: { 
      app: { 
     format: 'register' 
      } 
     }, 
     map: { 
      'angular2': 'node_modules/angular2', 
      'primeng': 'node_modules/primeng' 
     } 
    }); 
    System.import('app/boot').then(null, console.error.bind(console)); 
</script> 

<script src="node_modules/rxjs/bundles/Rx.js"></script> 
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> 

Je ne sais pas si cela peut vous aider, mais je l'espère.

Je ne peux pas vous aider avec Chart.js parce que je ne l'ai jamais utilisé.