如何使用angular2种子进行预处理

我曾试图建立一个angular2种子项目，现在可以工作了，但现在我想在我的环境中添加素描，但我被它卡住了

当然，我的第一步是安装primeng和primeui

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

然后我添加了一个映射@

我的组件如下所示：

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

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

我不确定前面的步骤是否正确。在我得到错误的那一刻：

异常：引用错误：未定义图表

---

啊，根据这个图表。js也应该包括在内

这个答复来得有点晚，但无论如何

我遇到的问题几乎和你一样，经过几个小时的工作，我为自己解决了。我已经按照他们告诉我们的那样完成了启动的所有步骤，但我的应用程序仍然没有运行

我发现我的问题是我的

System.JS

文件

这是我的

System.JS

，我已经准备好了。 我把我的

放在下面：

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

System.config({
defaultJSExtensions:true，
套餐：{
应用程序：{
格式：“寄存器”
}
},
地图：{
“angular2”：“节点_模块/angular2”，
“预处理”：“节点\模块/预处理”
}
});
System.import（'app/boot'）。然后（null，console.error.bind（console））；

我不确定这是否对你有帮助，但我希望如此

我无法帮助您使用Chart.js，因为我从未使用过它