Как я могу использовать компоненты PrimeNG в Ionic 4?

Question

Я хотел бы использовать компоненты PrimeNG в приложении Ionic 4. Я поступил следующим образом. Я создал пустое приложение Ionic 4:

 ionic start myApp blank

Далее я скачал PrimeNG в проект:

 npm install primeng@7.0.0 --save
 npm install primeicons@1.0.0 --save

Далее я импортирую первый компонент PrimeNG UI (ButtonModule) в виде модулей в app.module.ts:

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';

 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';

 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';

 import {ButtonModule} from 'primeng/button';

 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
   imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ButtonModule],
   providers: [
     StatusBar,
     SplashScreen,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
   ],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

Затем я добавил элемент p-button в home.page.html:

 <ion-header>
   <ion-toolbar>
     <ion-title>
       Ionic Blank
     </ion-title>
   </ion-toolbar>
 </ion-header>

 <ion-content padding>
   <p-button label="Click"></p-button>
 </ion-content>

Когда я запускаю приложение с

 ng serve

Я получаю следующую ошибку на консоли:

 ERROR Error: "Uncaught (in promise): Error: Template parse errors:
 'p-button' is not a known element:
 1. If 'p-button' is an Angular component, then verify that it is part of this module.
 2. If 'p-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
   [ERROR ->]<p-button label="Click"></p-button>
 </ion-content>
 "): ng:///HomePageModule/HomePage.html@11:2
 syntaxError@http://localhost:4200/vendor.js:8787:17

Спасибо за любую помощь.

Answer 1

Вы должны добавить primeng css в свой angular.json внутри блока стилей, например:

"styles": [                           
  {
    "input": "src/theme/variables.scss"                
  },
  {
    "input": "src/global.scss"
  },
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css"
],

, а затем импортировать каждый модуль, который вам нужен в вашем модуле страницы, для примера внутри home.module.ts:

import {ButtonModule} from 'primeng/button';
@NgModule({
  imports: [
    ButtonModule,
    //..
],
//..

Answer 2

Я считаю, что у вас есть home.module.ts, если у вас есть файл, вы должны объявить в нем модуль PrimeNG, что-то вроде этого:

дом / home.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { HomePage } from './home';

import {ButtonModule} from 'primeng/button';

@NgModule({
  imports: [
    IonicModule,
    ButtonModule
  ],
  declarations: [HomePage],
  entryComponents: [HomePage]
})
export class HomePageModule {}

Я создал функциональный пример здесь

Answer 3

Пожалуйста, убедитесь, что ваш home.page компонент является частью AppModule или импортируйте ButtonModule в тот же модуль home.page component.

Answer 4

Вам нужно будет импортировать все компоненты модуля, которые вы собираетесь использовать под этим модулем при импорте.

пример:

imports: [
        BrowserModule,
        FormsModule,
        AppRoutes,
        HttpModule,
        BrowserAnimationsModule,
        AccordionModule,
        AutoCompleteModule,
        BreadcrumbModule,
        ButtonModule,
        CalendarModule,
        CarouselModule,
        ChartModule,
        CheckboxModule,
        ChipsModule,
        CodeHighlighterModule,
        ConfirmDialogModule,
        ColorPickerModule,
        SharedModule,
        ContextMenuModule,
        DataGridModule,
        DataListModule,
        DataScrollerModule,
        DataTableModule,
        DialogModule,
        DragDropModule]

Это должно работать