primeng issues with rc5

Question

After upgrading to rc5, and reinstalling primeng with the new release, I receive the following error:

zone.js?1472019041780:484 Unhandled Promise rejection: Template parse errors: Can't bind to 'icon' since it isn't a known property of 'button'. ("ver':hovered,'ui-state-focus':focused,'ui-state-disabled':disabled}" >][icon]="icon" pButton *ngIf="showIcon" (click)="onButtonClick($event,in)" [ngClass]="): Calendar@7:31 ; Zone: ; Task: Promise.then ; Value:

I tried removing all references to calendar, so I can at least get the app up and running, and got another issue:

Can't bind to 'rows' since it isn't a known property of 'p-paginator'.
1. If 'p-paginator' is an Angular component and it has 'rows' input, then verify that it is part of this module.
2. If 'p-paginator' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("              <ng-content select="header"></ng-content>
            </div>
            <p-paginator [ERROR ->][rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="ui"): DataTable@6:25
Can't bind to 'first' since it isn't a known property of 'p-paginator'.
1. If 'p-paginator' is an Angular component and it has 'first' input, then verify that it is part of this module.
2. If 'p-paginator' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("<ng-content select="header"></ng-content>
            </div>

dependancies:

import { NgModule, ElementRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { Calendar, DataTable, Column, InputMask } from 'primeng/primeng';

Answer 1

As i hinted to in the comments above, there is a issue with RC5 which produces this error. In most cases, it is enough to disable minimization, or adjust the settings to the build, and configure uglify with mangle:

{ screw_ie8 : true, keep_fnames: true} or use AOT template compilation

The source to this issue and the solution is github.com/angular/angular/issues/10618 this fix didn't work for me though, but i hope it will help other developers.

Answer 2

You need to import everything as an xModule. See Primafaces' blog for reference.

The new method is the following:

import {NgModule}      from '@angular/core';
import {InputTextModule,DataTableModule,ButtonModule,DialogModule} from 'primeng/primeng';
 
@NgModule({
  imports:      [BrowserModule,InputTextModule,DataTableModule,ButtonModule,DialogModule],
  declarations: [AppComponent],
  bootstrap:    [AppComponent],
  providers:    [CarService]
})
export class AppModule { }

Edit: Let me correct myself. I use submodules and only one of the submodule relies on PrimeNg so I thought it would be enough to import the dependecies there. It turns out that I have to import these modules in my app.module.ts (my main module) and not in my submodule. Sadly, I don't know the exact reason why.

PS.: I don't know why do you get 'unexpected value'. Can you maybe share more information about your project?

Answer 3

I want to add that not only you need to import everything, but also in system.config.js you need to add @angular/forms in packageNames. Also in your boot or main need to change to the following:

import {platformBrowserDynamic }    from '@angular/platform-browser-dynamic';
import {AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

I got prime DataTable working with RC5 and primeng 1.0.0-beta.14