prime ng as root angular5 - angular5

Question

i am working with project in angular5 , where i have different
modules for different entities.
i need to use primeng for component ui ,i installed it properly, test
with demo angular project with single app module :
i have following module:
app (angular generated , app.module.ts)
user(user.module.ts)
1. create user component
2 update user component
admin(admin.module.ts)
1. create admin component
2 . update user component
problem :
when i am working with multiple modules , how to set up primeng in app.module.ts file ?
i am using primeng button in createuser.component with
> <button pButton type="button" label="Click" ></button> <p-button
> label="Click" ></p-button>
i got following error
'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.
(" [ERROR
->]"): ng:///PreMeritModule/AddformComponent.html#1:0
my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { LocationStrategy, HashLocationStrategy } from '#angular/common';
//prime ng needs following modules with browser animation module and froms module
import { PanelModule } from 'primeng/components/panel/panel';
import { ButtonModule } from 'primeng/components/button/button';
import { AppComponent } from './app.component';
import { userModule } from './user/user.module';
import { adminModule } from './admin/admin.module';
// Routing Module
import { AppRoutingModule } from './app.routing';
#NgModule({
imports: [
userModule,
adminModule
BrowserModule,
FormsModule,
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
PanelModule,
ButtonModule
],
declarations: [
AppComponent,
],
providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

Modify this import:
import { NgModule } from '#angular/core';
...to add...
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '#angular/core';
...then:
#NgModule({
imports: ...
...
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
In full:
import { BrowserModule } from '#angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '#angular/core';
import { LocationStrategy, HashLocationStrategy } from '#angular/common';
//prime ng needs following modules with browser animation module and froms module
import { PanelModule } from 'primeng/components/panel/panel';
import { ButtonModule } from 'primeng/components/button/button';
import { AppComponent } from './app.component';
import { userModule } from './user/user.module';
import { adminModule } from './admin/admin.module';
// Routing Module
import { AppRoutingModule } from './app.routing';
#NgModule({
imports: [
userModule,
adminModule
BrowserModule,
FormsModule,
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
PanelModule,
ButtonModule
],
declarations: [
AppComponent,
],
providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }