Angular2 add PrimeNG component

Question

Here are the steps I did to install PrimeNG:

1. npm install primeng --save npm install primeui --save

2. 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">`
   

3. Update test.component.ts:

   import {Calendar} from '../../assets/primeng/primeng';
   ....
   export class TestComponent {
        dateValue:string;
   }
   

4. Update test.component.html:

   <p-calendar formControlName="date"></p-calendar>
   

Result: nothing gets shown on page.

Am I missing something?

---

Edit1:

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

Answer 1

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