prime ng as root 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 { }

Please provide the modules code. It seems you don't have imported the ButtonModule in your module. — ochs.tobi
i know how to use primeng in single module app , the issue is how to setup is as a root and used in all other modules — Bhagvat Lande

kshetline kshetline · Accepted Answer · 2018-03-02T11:45:35

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

prime ng as root angular5

1 Answers