CODEWITHSUNDEEP
angularprimeng
S_developer
S_developer

Reputation: 262

angular 2 error : zone.js:484 Unhandled Promise rejection: Template parse errors

Hello I am trying to work out prime-ng grid with angular2 rc6, as the demo version in their application works with the previous versions.

This is the link to my git repository.

https://github.com/svidya/primeng-demo.git

When I run the application I am getting the below errors

Unhandled Promise rejection: Template parse errors: 'datatable-demos' is not a known element: 1. If 'datatable-demos' is an Angular component, then verify that it is part of this module. 2. If 'datatable-demos' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("[ERROR ->]

"): AppComponent@0:0 Can't bind to 'value' since it isn't a known property of 'p-datable'. 1. If 'p-datable' is an Angular component and it has 'value' input, then verify that it is part of this module. 2. If 'p-datable' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("

][value]="cars" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="onRowSelect($event)""): AppComponent@3:15 Can't bind to 'selection' since it isn't a known property of 'p-datable'. 1. If 'p-datable' is an Angular component and it has 'selection' input, then verify that it is part of this module. 2. If 'p-datable' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("v class="ContentSideSections Implementation"> ][(selection)]="selectedCar" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="1"): AppComponent@3:53 Can't bind to 'paginator' since it isn't a known property of 'p-datable'. 1. If 'p-datable' is an Angular component and it has 'paginator' input, then verify that it is part of this module. 2. If 'p-datable' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("alue]="cars" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="onRowSelect($event)" [ERROR ->][paginator]="true" [rows]="10" [responsive]="true"> CRUD for Cars "): AppComponent@3:117 Can't bind to 'rows' since it isn't a known property of 'p-datable'. 1. If 'p-datable' is an Angular component and it has 'rows' input, then verify that it is part of this module. 2. If 'p-datable' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.

Initially I thought this issue is with the way my systemjs.config.js is configured and did some changes but I am unable to find the actual issue.

Could you please let me know of any solution for the same?

Upvotes: 1

Views: 2356

Answers (1)

yurzui
yurzui

Reputation: 214085

Where is datatable-demos component from in your app.component.html file? Remove it.

Also you have a typo 

<p-datable

It should be

<p-dataTable

enter image description here

After that go to app.module.ts file and import the necessary modules:

import { FormsModule } from '@angular/forms';
import { DataTableModule, DialogModule } from 'primeng/primeng';

@NgModule({
  imports: [ 
    BrowserModule,
    HttpModule,
    JsonpModule, 
    FormsModule,     <== here
    DataTableModule, <== here
    DialogModule     <== and here
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]   
})
export class AppModule { }

Then you should remember that is case sensitive. So

carservice.ts

private extractData(res:Response) {
  let body = res.json();
  return body.data || { }; <== notice data instead Data
}

After that i quess it should work.

Upvotes: 2

Related Questions