Angular9 + Primeng手动搭建项目

项目需要使用Angular+Primeng开发页面,并对样式及控件功能有特殊要求，所以下载Primeng源码，在源码基础上进行二次开发。本人为初学者，还不知其中原理，下面过程如有问题请多多指教！！！

一、参考Angular官网搭建Angular环境

搭建本地开发环境和工作空间
1.安装node.js
安装过程网上有很多，可以参考。
验证是否安装成功
在window命令窗口输入
node -v,按回车键，查看node.js版本；
npm -v 查看node.js内置的npm版本

2.全局安装 Angular CLI
在window命令窗口输入
npm install -g @angular/cli
验证是否安装成功
在window命令窗口输入 ng version

3.使用Visual Studio Code开发工具，创建Angular项目
运行 CLI 命令 ng new + 项目名称

PS E:\angularSpace\angularProject> ng new angularProject

4.项目创建完成后，进入项目目录，运行项目

PS E:\angularSpace\angularProject> cd .\angularProject\
PS E:\angularSpace\angularProject> ng serve       

5.浏览器中访问http://localhost:4200/

以上，Angular环境搭建，项目测试成功。

二、手动整合Primeng

1.下载primeng源码：https://github.com/primefaces/primeng/tags
    本文下载版本为primeng-9.1.3
    在项目node_modules同级目录下新建文件夹primeng，然后把primeng-9.1.3的核心代码复制到primeng文件夹中。
注：primeng\app\components为primeng核心代码，其余文件包含式样、demo等，可作为开发参考文件。本手顺是把所有代码复制到angular项目中了。


2.修改配置文件
    angularSpace\angularProject\tsconfig.json
    path配置是从下载的primeng的项目中tsconfig.json参考而来的，如果不配置paths,primeng\app\components中组件引用路径会发生错误，不能编译通过。

3.安装相关依赖库

npm install @angular/cdk
npm install @angular/animations
npm install font-awesome

    修改配置文件追加primeng式样，项目开发共通样式src/styles.css放在下方便于覆盖primeng式样。

4.导出primeng中所有组件到共同文件中，便于后续开发引用
    在项目node_modules同级目录下新建文件@primeng.ts，然后把primeng-9.1.3/src/app/components/public_api.ts中的内容复制到@primeng.ts中。

5.测试primeng组件是否可用
以button为例，从primeng官网https://primefaces.org/primeng/showcase/#/button复制代码，放入app.component.html文件中。

引入ButtonModule

启动服务，浏览器访问测试

以上是Angular+Primeng搭建过程，便于Primeng二次个性化开发。本人为初学者，以上过程如有问题请多多指教！！！