PrimeNG beta 15 Angular 2 DataTable wird nicht mit dem Styling gerendert

Question

Ich habe ein Problem damit PrimeNG DataTable richtig auf meiner Web-App zu rendern. Derzeit sieht das Display so ...

in meinem package.json Abhängigkeit Abschnitt wie dieser Auszug

"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" 
    }, 

sieht aus meinem systemjs.config.js Datei

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' } 
    }; 

Datei app.module.ts

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 { } 

Meine HTML-Datei

<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> 

Meine Komponentendeklaration

@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' 
    ] 
}) 

Es ist wie ich die Stylesheets zu sehen bin aussieht (Konsolenausgabe unten) geladen

Irgendwelche Gedanken darüber, warum Die Ausgabe sieht unformatiert aus, ohne dass ein Styling angewendet wurde.

Ich versuchte Downgrade auf Angular2 RC 6, aber es hatte die gleichen Ergebnisse. Nicht sicher, was ich vermisse. Kann ich mit der Veröffentlichung von Angular2 die neueste Version von PrimeNG verwenden?

Answer 1

I benötigt, um die CSS-Dateien von einem äußeren (Layout) Seite zu laden und alles funktioniert. Aus irgendeinem Grund konnte ich das styleUrls-Array der Komponente nicht verwenden.

<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" /> 

Answer 2

Installieren PrimeUI und fügen Sie Ihre index.html folgende CSS:

<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" />