First, I downloaded and npm installed the primeng-master branch and its dependencies -> All showcases runs smoothly.
I tried to mirror the dependencies of this primeNG and the respective versions to my old app -> no luck.
Trying to reproduce the running behavior of the showcase examples in a green-field-app -> no luck.
This is the complete app:
Code: Select all
import { Component, OnInit, OnChanges } from "angular2/core";
import { DataTable } from "primeng/primeng";
@Component({
selector: "ng-limit",
template: `<h3 class="first">Basic</h3>
<p-dataTable [value]="cars">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
<h3>Dynamic Columns</h3>
<p-dataTable [value]="cars">
<p-column *ngFor="#col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>`,
directives: [DataTable]
})
export class AppComponent implements OnInit {
private cols:any[];
private cars:any[];
constructor() {
}
ngOnInit() {
this.cols = [
{field: 'vin', header: 'Vin'},
{field: 'year', header: 'Year'},
{field: 'brand', header: 'Brand'},
{field: 'color', header: 'Color'}
];
this.cars = [
{"brand": "VW", "year": 2012, "color": "White", "vin": "dsad231ff"},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
{"brand": "Mercedes", "year": 1995, "color": "White", "vin": "hrtwy34"},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
{"brand": "Jaguar", "year": 2013, "color": "White", "vin": "greg34"},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
]
}
}
Here are my relevant configuration files:
package.json:
Code: Select all
{
"name": "grd",
"version": "1.0.0",
"description": "lets try that again",
"main": "index.js",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "Apache-2.0",
"peerDependencies": {
"angular2": ">=2.0.0-beta.9",
"systemjs": ">=0.19.24",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": ">=5.0.0-beta.2",
"zone.js": "0.5.15",
"primeng": "0.7.0"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.8.7",
"typings": "^0.7.5",
"zone.js": "^0.5.15"
},
"dependencies": {
"primeui": "^4.1.3"
}
}
tsconfig.json:
Code: Select all
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "./",
"rootDir": "src"
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
typings.json:
Code: Select all
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2",
"jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#470954c4f427e0805a2d633636a7c6aa7170def8"
}
}
and for good measure the index.html:
Code: Select all
<html>
<head>
<title>limitProcNG</title>
<link rel="stylesheet" type="text/css" href="app/resources/delta/theme.css" />
<link rel="stylesheet" type="text/css" href="app/resources/icons/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="app/resources/primeui.css" />
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="app/resources/jquery.js"></script>
<script src="app/resources/jquery-ui.js"></script>
<script src="app/resources/primeui.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
'primeng': 'node_modules/primeng'
},
map: {
'primeng': 'node_modules/primeng',
'rxjs':"lib/rxjs"
}
});
System.import('app/boot').then(null, console.error.bind(console));
</script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<ng-limit>Loading...</ng-limit>
</body>
</html>
I have a bad feeling that this is some stupid mistake on my end.
