Can not use PrimeNG in Angular CLI

0
votes

I try to use the PrimeNG in angular CLI but It doesn't work @@!

Component.ts

import { Component, OnInit } from '@angular/core';
import { ToolbarModule } from 'primeng/primeng';
@Component({
  selector: 'app-marketing-menu-bar',
  templateUrl: './marketing-menu-bar.component.html',
  styleUrls: ['./marketing-menu-bar.component.css']
})
export class MarketingMenuBarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

Here is the Component.html

<p-toolbar>  
<div class="ui-toolbar-group-right">
    <button pButton type="button" icon="fa-search"></button>
    <i class="fa fa-bars"></i>
    <button pButton type="button" icon="fa-refresh"></button>
    <button pButton type="button" icon="fa-trash"></button>
</div>

After I run ng serve:

Unhandled Promise rejection: Template parse errors: 'p-toolbar' is not a known element: 1. If 'p-toolbar' is an Angular component, then verify that it is part of this module. 2. If 'p-toolbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]
; Task: Promise.then ; Value: SyntaxError {_nativeError: Error: Template parse errors: 'p-toolbar' is not a known element: 1. If 'p-toolbar' is an Angular co…} Error: Template parse errors: 'p-toolbar' is not a known element: 1. If 'p-toolbar' is an Angular component, then verify that it is part of this module. 2. If 'p-toolbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]

2
angularjstypescriptprimeng

2 Answers

2
votes

Did you import ToolbarModule inside your app.module.ts ?

import { ToolbarModule } from 'primeng/toolbar';
0
votes

The error message tells you what needs to be done. In the module which declares your component, add CUSTOM_ELEMENTS_SCHEMA to your imports, eg:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

(You will already be importing NgModule from @angular/core, so just add the new import to this line, separated by a comma.)

Then add the following line somewhere within the @NgModule decorator:

schemas: [ CUSTOM_ELEMENTS_SCHEMA ]