Primeng: Can't bind to 'model' since it isn't a known property of 'p-menu'.

Created on 23 Aug 2016  Â·  33Comments  Â·  Source: primefaces/primeng

When I am trying to integrate the p-menu component into the new RC-5 version of beta-13 I am getting the following error :

polyfills.js:7225 Unhandled Promise rejection: Template parse errors:
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.schema' of this component to suppress this message.
    ("
    ][model]="items">
    "): AppComponent@5:8 ; Zone: ; Task: Promise.then ; Value:

Can some body help ?

Most helpful comment

In my case, this error occured using Angular/Cli together with PrimeNG during karma unit tests. After a lot of fiddling I found that adding FormsModule within the respective tests enabled them to run properly:

add:
import { FormsModule } from '@angular/forms';

and:

TestBed.configureTestingModule({
  declarations: [
    AppComponent,
    YourComponent
  ],
  imports: [
    InputSwitchModule, // Or whatever PrimeNG Module you're attempting to use
    FormsModule
  ]
});

All 33 comments

Check to see if your issue is the same as the one in this thread.

Thanks for the reply will check and confirm.

On Aug 24, 2016 21:58, "buddyackerman" [email protected] wrote:

Check to see if your issue is the same as the one in this thread
http://forum.primefaces.org/viewtopic.php?f=35&t=46690.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/primefaces/primeng/issues/767#issuecomment-242127326,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHa_QBx_NdLlFgoK5VYrbpfx92mcxELSks5qjHFGgaJpZM4Jqq7j
.

I have the exact some problem.
Did you get a solution?

@sbox99 did you check the thread that I referenced in my post? Was your issue the result of upgrading from RC4 to a newer release?

the datatable is working fine. I think primeng group should respond what
is missing with this basic use cases.

On Sep 6, 2016 18:44, "buddyackerman" [email protected] wrote:

@sbox99 https://github.com/sbox99 did you check the thread that I
referenced in my post? Was your issue the result of upgrading from RC4 to a
newer release?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/primefaces/primeng/issues/767#issuecomment-244945875,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHa_QEH9wIEagctN88TmooaYi_dZN2K1ks5qnWdJgaJpZM4Jqq7j
.

I have a project that was with RC4 and tried to use primeng but couldn't get anything to run. To troubleshoot the issue I thought I would try a clean install and use the primeng quickstart app through npm install. Everything installed nicely and I got the primeng datatable of cars no problem. However, as soon I as I tried to add another ui object such as a I got the "Can't bind to 'model' since it isn't a known property of 'p-menu'" message. I have checked that the modules are imported correctly and all seems good. I must be missing something obvious cuz I.m pretty new to this. Any help would be much appreciated.

@sbox99 Can you create a plnkr that illustrates the problem?

RaviMovva,
Did you figure out the solution by chance? I have exact same problem.
Thanks.

Mine is:
main.ts:8 Error: Template parse errors:
Can't bind to 'model' since it isn't a known property of 'p-autocomplete'.

  1. If 'p-autocomplete' is an Angular component and it has 'model' input, then verify that it is part of this module.
  2. If 'p-autocomplete' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
    ("k">

    ][(model)]="inputText"

Do you have AutoCompleteModule in your module's imports?

I did.
Upgrading to most recent versions of Angular2 and primeng solved it.

"dependencies": {
    "@angular/core": "~2.1.0",
    "@angular/common": "~2.1.0",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",      
    "@angular/compiler": "~2.1.0",
    "@angular/upgrade": "~2.1.0",
    "@angular/router": "~3.1.1",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",

    "angular-in-memory-web-api": "~0.1.5",
    "primeng": "1.0.0-beta.20",
........................
},

I am also seeing the same issue - tried updated the versions as specified by mmlitvin but still same thing

I'm getting this error in Karma

same here

I solved it by importing both PanelMenuModule and MenuModule and adding them to the imports in TestBed.

To make it more explicit: Add the conflicting module to @NgModule’s imports, like this:

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        RouterModule.forRoot(routes),
        AccountsModule,
        Ng2PaginationModule,
        // PrimeNG
        InputTextModule, DataTableModule, ButtonModule, DialogModule,
        CheckboxModule, DataListModule, MenubarModule
    ],

This solved the problem for me.

I am using MenuModule only, still getting the same issue. PrimeNG team please reply.

Anyone get the fix?

In my case, this error occured using Angular/Cli together with PrimeNG during karma unit tests. After a lot of fiddling I found that adding FormsModule within the respective tests enabled them to run properly:

add:
import { FormsModule } from '@angular/forms';

and:

TestBed.configureTestingModule({
  declarations: [
    AppComponent,
    YourComponent
  ],
  imports: [
    InputSwitchModule, // Or whatever PrimeNG Module you're attempting to use
    FormsModule
  ]
});

@TekSiDoT good find. Was irritating having to add the Schemas: [CUSTOM_ELEMENTS_SCHEMA] for all the tests to pass. Much more concise this way.

@TekSiDoT saved my day

Not able to replicate the issue in latest versions. Please comment out for any concerns.

import following items to your module

import {StepsModule, MenuItem} from 'primeng/primeng';
@NgModule({
    imports: [....  , StepsModule],

I am running into this problem. I don't understand the solution proposed in the link above. Can someone give me the step by step instructions?

I am running on Angular 5 and primeNg 5. Tried all the solution mentioned above and still have the same problem.

I am having the same issue with Angular and PrimeNG 5

Me too!
The same issue when i try to use p-panelMenu!

Had same issue, solved it by moving the import from a sub module to imports of app.module.ts

I have a problem to PrimeNg, I am using Angular: 5.2.9. I have installed PrimeNg according to this documentation https://www.primefaces.org/primeng/#/setup

I have already added dependencies and styles as they showed and when I am using for example p-splitButton

I get such error

p-splitButton' is not a known element: or Can't bind to 'model' since it isn't a known property of 'p-splitButton'.

I can't even use the button because it's displayed as a normal grey button and I am not able to display a button with the fa-icon.

Guys if you are using Shared module then you need to add your imports directly to that module to which your components belongs, not only to app.module, in my case that was a key.

importing address has been changed from,
import { PanelModule } from 'primeng/primeng';
to,
import { PanelMenuModule } from 'primeng/panelmenu';

Same here...
Foi o primeiro componente que testei, já deu vontade de desistir...

Não desista @oarrthur. PrimeNG é incrível.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

giovannistiwes picture giovannistiwes  Â·  36Comments

cagataycivici picture cagataycivici  Â·  31Comments

luking4 picture luking4  Â·  38Comments

maplion picture maplion  Â·  47Comments

gatapia picture gatapia  Â·  42Comments