Angular已有工程中如何使用PrimeNG

最新推荐文章于 2025-07-23 11:38:36 发布

原创最新推荐文章于 2025-07-23 11:38:36 发布 · 737 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Angular使用各种框架

Angular 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在已有的Angular工程中如何使用PrimeNG组件库，包括通过npm安装、添加依赖、引入样式和动画模块，以及如何测试基本按钮组件。遵循文中步骤，开发者可成功将PrimeNG集成并开始使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先npm install primeng --save

npm install -save ( 会将模块依赖写入dependencies 节点，是运行时依赖，像 express 这些模块是项目运行必备的是开发时依赖。)

npm install -save -dev (会将模块依赖写入devDependencies 节点，项目部署后就不需要了，比如项目中使用的 gulp ，压缩css、js的模块）

2、npm install @angular/animations --save

3、npm install font-awesome@4.7.0 --save

安装完成后你的文件里面就会多这两个东西

4、去到文件里面引入样式

当然你也可以在这里面添加

"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"
],

都一样，随便你自己。

5、然后去到你的文件里面

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

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        //...
    ],
    //...
})
export class YourAppModule { }

引入动画模块。

然后我们用button组件测试一下primeng是不是能用了。