Reputation: 41
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 ->]
Upvotes: 0
Views: 1935
Reputation: 15361
Did you import ToolbarModule
inside your app.module.ts ?
import { ToolbarModule } from 'primeng/toolbar';
Upvotes: 2
Reputation: 7579
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 ]
Upvotes: 0