如何用angular2种子实现PrimeNG
如何用angular2种子实现PrimeNG
提问于 2016-03-26 22:54:00
我试图设置一个angular2种子项目，这个项目现在已经开始工作了，但是现在我想将PrimeNG添加到我的环境中，但是我还是坚持了下来。
当然，我的第一步是安装primeng和primeui。
npm install primeng --save
npm install primeui --save然后我添加了一个映射@ https://github.com/mgechev/angular2-seed/blob/master/tools/config/seed.config.ts#L129
我的组件看起来如下：
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>我不确定前面的步骤是否正确。在我得到错误的时候：
例外: ReferenceError:图表未定义
回答 2
Stack Overflow用户
发布于 2016-03-27 00:44:45
啊，根据这个页面，Chart.js也应该包括在内！
Stack Overflow用户
发布于 2016-04-29 12:04:57
这个答复来得有点晚，但无论如何。
我和你一样遇到了同样的问题，经过几个小时的工作，我帮我解决了这个问题。我已经完成了让PrimeNg运行的所有步骤，就像他们在PrimeNG上告诉我们的那样，但是我的应用程序仍然没有运行。
我发现我的问题是我的System.JS文件。
这是我的System.JS，我让PrimeNG用它运行。我把我的<script>放在那里：
<!-- 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>我不确定这是否对你有帮助，但我希望如此。
我不能帮你做Chart.js，因为我从未用过它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36241834
复制相关文章
相似问题
腾讯云开发者
