Angularjs 集成 PrimeNG UI 库

通过angular cli 创建项目之后,添加PrimeNG依赖:

npm install primeng --save
npm install primeicons --save

引入CSS,在angular.json中的architect中添加:

 "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ngapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.styl",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/nova-colored/theme.css",
              "node_modules/primeng/resources/primeng.min.css"
            ],
            "scripts": []
          },
        ...

或者将相应的文件复制到assets目录中,然后在index.html中的头部引入。

然后在app.module.ts中导入相应需要引入的模块:

import {ButtonModule} from 'primeng/button';
import {EditorModule} from 'primeng/editor';
import {PaginatorModule} from 'primeng/paginator';

import {ToolbarModule} from 'primeng/toolbar';
import {SplitButtonModule} from 'primeng/splitbutton';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ButtonModule,
    EditorModule,
    PaginatorModule,
    ToolbarModule,
    SplitButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }