Angular2 adding PrimeNG to my solution tag not defined

Question

I have been doing angular for three days now and finally got a login page dashboard up and running with a web api solution and works great, so my following issue is most probably my stupidity please bear with me.

I am having trouble loading in PrimeNG DataTableModule to work on my components, i search similar post regarding my error and what i gathered is that there can be two reasons for the following error: Can't bind to 'value' since it isn't a known property of 'p-dataTable'.

There can be two reasons: 1) The module is not defined in the app.module.ts. 2) or property does not exists.

My first question: Why do my solution have my app.module.ts spitted up into three ts files [app.module.client.ts, app.module.server.ts and a app.module.shared.ts] ?

My Second Question When adding the DataTableModule to the app.module.client.ts i get this error: Can't bind to 'value' since it isn't a known property of 'p-dataTable'. When adding the DataTableModule to the shared or server module file i get: Prerendering failed because of error: ReferenceError: Event is not defined what am i doing wrong?

Here is my code: app.module.client.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { sharedConfig } from './app.module.shared';
import { AuthManager } from './auth/auth.manager';
import { UserIdentity } from './auth/user.identity';
import { UserService } from './services/user.service';

import { DataTableModule, SharedModule } from 'primeng/primeng';

@NgModule({
    bootstrap: sharedConfig.bootstrap,
    declarations: sharedConfig.declarations,
    imports: [
        DataTableModule,
        SharedModule,
        BrowserModule,
        FormsModule,
        ...sharedConfig.imports,
    ],
    providers: [
        { provide: 'ORIGIN_URL', useValue: location.origin },
        AuthManager,
        UserIdentity,
        UserService
    ],
})
export class AppModule {
}

app.module.server.ts

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { FormsModule } from '@angular/forms';
import { sharedConfig } from './app.module.shared';
import { AuthManager } from './auth/auth.manager';
import { UserIdentity } from './auth/user.identity';
import { UserService } from './services/user.service';

@NgModule({
    bootstrap: sharedConfig.bootstrap,
    declarations: sharedConfig.declarations,
    imports: [
        ServerModule,
        FormsModule,
        ...sharedConfig.imports
    ],
    providers: [ AuthManager,
        UserIdentity,
        UserService]
})
export class AppModule {
}

app.module.shared.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'; 
import { FormsModule } from '@angular/forms';

import { DashboardComponent } from './components/dashboad/dashboad.component';
import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { LoginComponent } from './components/login/login.component';
import { AdminComponent } from './components/admin/admin.component';
import { SettingComponent } from './components/admin/settings/setting.component';
import { UserComponent } from './components/admin/users/user.component';

import { AuthManager } from './auth/auth.manager';

export const sharedConfig: NgModule = {
    bootstrap: [AppComponent],
    declarations: [
        DashboardComponent,
        AdminComponent,
        UserComponent,
        SettingComponent,
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        LoginComponent,
        HomeComponent, 
    ],
    imports: [
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'login', pathMatch: 'full' },
            { path: 'login', component: LoginComponent },
            {
                path: 'dashboard', component: DashboardComponent, children: [
                    { path: 'home', component: HomeComponent, canActivate: [AuthManager] },
                    { path: 'admin', component: AdminComponent, canActivate: [AuthManager], children: [
                        { path: 'users', component: UserComponent, canActivate: [AuthManager] },
                        { path: 'settings', component: SettingComponent, canActivate: [AuthManager] },   
                        ]},
                    { path: 'fetch-data', component: FetchDataComponent, canActivate: [AuthManager] },
                ]
            },
            { path: '**', redirectTo: 'home' }
        ]),
    ]
};

Page where i am trying to implement the datagrid user.component.html

<p-dataTable [value]="users">
    <p-column field="Email" header="Email"></p-column>
    <p-column field="Name" header="Name"></p-column>
    <p-column field="Surname" header="Surname"></p-column>
    <p-column field="Cellphone" header="Cellphone"></p-column>
    <p-column field="Telephone" header="Telephone"></p-column>
</p-dataTable>

user.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService, UserViewModel } from '../../../services/user.service';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
import { DataTableModule, SharedModule } from 'primeng/primeng';


@Component({
    selector: 'user',
    templateUrl: './user.component.html'
})

export class UserComponent implements OnInit {

    users: UserViewModel[];

    constructor(private userService: UserService) {
    }

    ngOnInit() {
       this.userService.getUsers().subscribe(users => {
           this.users = users;
       });
    }
}

Error Message on with Module defined in the app.module.client.ts

Exception: Call to Node module failed with error: Error: Template parse errors: Can't bind to 'value' since it isn't a known property of 'p-dataTable'. 1. If 'p-dataTable' is an Angular component and it has 'value' input, then verify that it is part of this module. 2. If 'p-dataTable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Error Message on with Module defined in either the app.module.server.ts or app.module.shared.ts

Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: Event is not defined main-server.js:50676:38)

you are not importing the modules correctly. create a plunker to reproduce. — Aravind

jason_hamp jason_hamp · Accepted Answer · 2017-06-17T23:06:51

Have you tried adding DataTableModule and SharedModule imports into the sharedConfig NgModule?

I'm not familiar with the three split app.module files so I can't comment on that.

And this is an aside, but as PrimeNG says, if you use an import statement like this:

import {AccordionModule} from 'primeng/primeng';

Then it imports all of the components which is probably not what you want. See their comment on that here: https://www.primefaces.org/primeng/#/setup

Angular2 adding PrimeNG to my solution tag not defined

2 Answers