[聚合文章] primeNG组件库在Angular2上的使用

其中Location是项目将要保存的问题，Node interpreter是node.js安装的位置，Angular CLI:是angular CLI安装的位置，我安装在全局global路径下。一般第一项需要指定路径之外，其余不需要改变。然后点击create就可以。

2、生成的文件如下：

angular-cli.json ：angular-cli的配置文件，

测试配置文件：karma.conf.js，

typescript的lin：t配置文件，

端到端的测试配置文件：protractor.conf.js，

导入es6模块的配置文件：polyfills.ts，

angular工程的main.ts引导启动文件，

全局样式style.css，

typescript配置文件：ts.config.json;

typescript的声明文件：typings.d.ts,

angular组建 app.components相关的css，html，ts。

3、当需要创建新的组件的时候可直接在点击一的app文件夹，

直接可新建一个组件，并且会自动配置好CSS，html 和ｔｓ文件，同时在app.modul.ts文件中会自动导入（如果要删除，需要手动删除该文件中导入的包）.

第二： 开始搭建使用prime NG环境

4、至此已经新建完成一个完整的angular2项目，下面开始搭建如何使用primeNG

cd 到项目所在目录，

使用以下命令依次安装：

npm install primeng --save

npm install @angular/animations --save

npm install font-awesome@4.7.0 --save

安装过程中可能会出现错，根据提示信息进行修改。一般都能解决

5、修改：angular-cli.json文件中的“styles”: 如下：

"styles": [

"styles.css",

"../node_modules/primeng/resources/primeng.min.css",

"../node_modules/primeng/resources/themes/omega/theme.css",

"../node_modules/font-awesome/css/font-awesome.min.css"

],

如图：

6、在app.module.ts中添加以下模块（如果有其他需要，还可以添加）

import {FormsModule} from "@angular/forms";

import {HttpModule} from "@angular/http";

import {BrowserAnimationsModule} from "@angular/platform-browser/animations";

import {ButtonModule, InputTextModule} from "primeng/primeng";

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

FormsModule,

HttpModule,

BrowserAnimationsModule,

InputTextModule,

ButtonModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

注意：不要重复添加，上下要一致

我在使用过程中添加了其他组件

7、在app.component.ts中添加

import {Component} from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

constructor( ) { }

name: string;

message: string;

onClick() {

this.message = "Hello , " + this.name;

}

}

8、在app.component.html中添加

第三：进行测试

在以上都完成之后，npm install  ，然后，npm start  本地环境通过localhost:4200，一般是4200 ，在浏览器进行查看就可以

当需要其他primeNG组件（引用了其组件，但是没有导入相应的包，会报错），找到相应组件，然后导入依赖包就可以