Angular2 add PrimeNG component

Cristian Muscalu picture Cristian Muscalu · Jul 1, 2016 · Viewed 24.8k times · Source

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(…)

enter image description here

Answer

Poul Kruijt picture Poul Kruijt · Jul 1, 2016

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