PrimeNG beta 15 Angular 2 DataTable not rendering

Question

I'm having a problem getting PrimeNG DataTable to render properly on my web app. Currently, the display looks like this...

in my package.json dependencies section looks like this

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "@angular2-material/button": "^2.0.0-alpha.8-2",
    "@angular2-material/core": "^2.0.0-alpha.8-2",
    "@angular2-material/input": "^2.0.0-alpha.8-2",
    "@angular2-material/card": "^2.0.0-alpha.8-2",
    "@angular2-material/toolbar": "^2.0.0-alpha.8-2",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "^0.19.38",
    "zone.js": "^0.6.23",
    "primeng": "^1.0.0-beta.15"
  },

Excerpt from my systemjs.config.js file

var map = {
        'app': 'app', // 'dist',
        '@angular': 'lib/@angular',
        'rxjs': 'lib/rxjs',
        '@angular2-material': 'lib/@angular2-material',
        'primeng': 'lib/primeng'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        '@angular2-material/core': { main: 'core.umd.js', defaultExtension: 'js' },
        '@angular2-material/button': { main: 'button.umd.js', defaultExtension: 'js' },
        '@angular2-material/input': { main: 'input.umd.js', defaultExtension: 'js' },
        '@angular2-material/card': { main: 'card.umd.js', defaultExtension: 'js' },
        '@angular2-material/toolbar': { main: 'toolbar.umd.js', defaultExtension: 'js' },
        'primeng': { defaultExtension: 'js' }
    };

app.module.ts file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { LoginFormComponent } from './login-form.component';
import { OrganizationGroupComponent } from './organization-group/organization-group.component';
import { HomeComponent } from './home.component';
import { LoginService } from './login.service';
import { OrganizationGroupService } from './organization-group/organization-group.service';
import { AuthGuard } from './authguard';
import { routing } from './app.routing';
import { MdButtonModule } from '@angular2-material/button';
import { MdInputModule } from '@angular2-material/input';
import { MdCardModule } from '@angular2-material/card';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { DataTableModule } from 'primeng/primeng';



@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing,
        MdButtonModule,
        MdInputModule,
        MdCardModule,
        MdToolbarModule,
        DataTableModule
    ],
    declarations: [
        AppComponent,
        LoginFormComponent,
        HomeComponent,
        OrganizationGroupComponent
    ],
    providers: [
        LoginService,
        AuthGuard,
        OrganizationGroupService
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

My HTML file

<div>
    <p-dataTable [value]="organizationGroups" [lazy]="true" [rows]="10" [paginator]="true"
                 [totalRecords]="totalRecords" (onLazyLoad)="loadOrganizationGroupsLazy($event)">
        <header>List of OrganizationGroups</header>
        <p-column field="Id" header="Id"></p-column>
        <p-column field="Name" header="Name"></p-column>
    </p-dataTable>
</div>

My component declaration

@Component({
    selector: 'organization-group',
    templateUrl: 'app/organization-group/organization-group.html',
    styleUrls: [
        'lib/primeng/resources/themes/omega/theme.css',
        'lib/primeng/resources/primeng.min.css',
        'app/font-awesome.min.css'
    ]
})

It looks like I'm seeing the stylesheets being loaded (console output below)

Any thoughts as to why the output looks unformatted with no styling applied?

I tried downgrading to Angular2 RC 6 but it had the same results. Not sure what I'm missing. Can I use the latest version of PrimeNG with the release of Angular2?

Answer 1

Install PrimeUI and add following CSS to your index.html:

<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />

Answer 2

I needed to load the css files from an outer (Layout) page and it all worked. For some reason I couldn't make use of the styleUrls array of the Component.

<link rel="stylesheet" href="lib/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" href="lib/primeng/resources/primeng.min.css" />
<link rel="stylesheet" href="app/font-awesome.min.css" />