I created an Angular 10 app and followed the instructions on setting up a Menu.
The code will not compile with these errors:
ERROR in src/app/app.component.html:3:1 - error NG8001: 'p-menu' is not a known element:
1. If 'p-menu' is an Angular component, then verify that it is part of this module.
2. If 'p-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3 <p-menu [model]="items"></p-menu>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:7:16
7 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
src/app/app.component.html:3:9 - error NG8002: Can't bind to 'model' since it isn't a known property of 'p-menu'.
1. If 'p-menu' is an Angular component and it has 'model' input, then verify that it is part of this module.
2. If 'p-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
3 <p-menu [model]="items"></p-menu>
See a full write up at SO:
https://stackoverflow.com/questions/639 ... rows-error
Is there something I failed to configure? Has anyone else gotten PrimeNG menu to work with Angular 10?
p-menu error with Angular 10
-
- Posts: 2
- Joined: 15 Sep 2020, 19:58
PrimeNG's Getting Started and/or Menu documentation fails to mention the following:
In the app.module.ts you need to import:
import { MenuModule } from 'primeng/menu';
import { ButtonModule } from 'primeng/button';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
and add them to the imports.
In the header of index.html add this link <link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />.
In the angular.json add a theme style "node_modules/primeng/resources/themes/saga-blue/theme.css",
In the app.component.ts update the constructor with , private primengConfig: PrimeNGConfig from 'primeng/api'.
Add this statement at the top of the ngOnInit this.primengConfig.ripple = true;
In the app.module.ts you need to import:
import { MenuModule } from 'primeng/menu';
import { ButtonModule } from 'primeng/button';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
and add them to the imports.
In the header of index.html add this link <link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />.
In the angular.json add a theme style "node_modules/primeng/resources/themes/saga-blue/theme.css",
In the app.component.ts update the constructor with , private primengConfig: PrimeNGConfig from 'primeng/api'.
Add this statement at the top of the ngOnInit this.primengConfig.ripple = true;
-
- Information
-
Who is online
Users browsing this forum: No registered users and 29 guests