Angularjs 集成 PrimeNG UI 库

Question

通过 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 { }