Here are the steps I did to install PrimeNG:
npm install primeng --save npm install primeui --save
Update Index.html: (I had to copy directories primeng and primeui from node_modules to the assets folder to get rid of 404 file not found error)
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/flatly/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/styles.css">
<link rel="stylesheet" href="assets/primeui/themes/omega/theme.css">
<link rel="stylesheet" href="assets/primeui/primeui-ng-all.min.css">`
Update test.component.ts:
import {Calendar} from '../../assets/primeng/primeng';
....
export class TestComponent {
dateValue:string;
}
Update test.component.html:
<p-calendar formControlName="date"></p-calendar>
Result: nothing gets shown on page.
Am I missing something?
Edit1:
<p-calendar [(ngModel)]="dateValue"></p-calendar>
to test.component.html , I get
Error: Uncaught (in promise): Cannot assign to a reference or variable!
Edit2:
I just tried it in another project that is not using angular-cli:
<link rel="stylesheet" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" href="node_modules/primeui/primeui-ng-all.min.css" />
....
import {Calendar} from 'primeng/primeng';
....
<p-calendar formControlName="date"></p-calendar>
as soon as I add directives:[Calendar]
I get Error:
http://localhost:3000/primeng/primeng 404 (Not Found)
Error: Error: XHR error (404 Not Found) loading http://localhost:3000/primeng/primeng(…)
Update your mapping in SystemJS
to something like this:
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'primeng': 'node_modules/primeng'//<-- add this
};
And update your packages in SystemJS
to something like this:
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' } //<-- add this
};
For importing you can use this:
import {Calendar} from 'primeng/components/calendar/calendar';
or if you just don't care that it loads all components you can just use:
import {Calendar} from 'primeng/primeng';
For further reference I suggest you look at the setup of PrimeNG