Angular2 add PrimeNG component

Question

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:

I now think it's important to say I installed the project using angular-cli
If I add <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(…)

try the import as import {Calendar} from 'primeng/primeng'; And have you added Calendar to the directives array of the @Component{} declaration? — Poul Kruijt
What kind of package manager are you using? Because if you are using SystemJS for instance, you have to add primeng to the mapping 'primeng': 'node_modules/primeng' as well as to the packages 'primeng': { defaultExtension: 'js' } — Poul Kruijt
Yes, I am using system.js. I will try that right now, i added a picture to the post. Thanks. — Cristian Muscalu
I tried that with the same result. Here is a copy of my system.config.js, maybe u can add a complete answer now. — Cristian Muscalu

Poul Kruijt Poul Kruijt · Accepted Answer · 2016-07-01T09:11:54

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

Angular2 add PrimeNG component

8 Answers

Update