angle2-seedでPrimeNGを実装する方法

Question

私は今働いているangle2-seedプロジェクトをセットアップしようとしましたが、今は自分の環境にPrimeNGを追加したいのですが、

オフコース私の最初のステップ：

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' 
     }]; 
    } 
} 

htmlファイル

：primengとその後

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

primeuiをインストールして、私は私のコンポーネントは、このようになりますhttps://github.com/mgechev/angular2-seed/blob/master/tools/config/seed.config.ts#L129

@マッピングを追加しました

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

これで十分ではありませんでした。 私はまだ以下のCSSを追加する必要があると思います& jsファイルですが、私はどこを知りません！

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

と私は以前の手順が正しいかどうかはわかりません。現時点で私はエラーを受け取りました：

EXCEPTION: ReferenceError: Chart is not defined

Answer 1

ああこれによると、page Chart.jsも一緒に入れるべきです！

Answer 2

この返信は少し遅れていますが、とにかくです。

私はあなたとほぼ同じ問題を抱えています。何時間も仕事をしても解決しました。私はPrimeNGで私たちに言ったようにPrimeNgを動かすためにすべてのステップを踏んだが、私のアプリケーションはまだ動いていなかった。

私の問題は私のSystem.JSファイルであることが分かりました。

これは私のSystem.JSです。私はPrimeNGを実行しています。私はそれはあなたを助けることができるかはわからないが、私はそう願って

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

： と私はそのような私の<script>年代を置きます。

私はChart.jsを使用したことがないので、あなたのお手伝いができません。