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, Jul 01 '16 at 07:04
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, Jul 01 '16 at 07:47
Yes, I am using system.js. I will try that right now, i added a picture to the post. Thanks. — Cristian Muscalu, Jul 01 '16 at 07:51
I tried that with the same result. [Here](https://github.com/muscaiu/ngCris/blob/master/systemjs.config.js) is a copy of my `system.config.js`, maybe u can add a complete answer now. — Cristian Muscalu, Jul 01 '16 at 07:59
Your system.config.js does not include the primeng reference. I've added an answer — Poul Kruijt, Jul 01 '16 at 09:13
I'm starting to think there is a problem with my pc. I did everhing just like u said, with angular2-cli, and without, installed fresh new project, followed every step on the documentation and still i get the 404 not found. Arrrghhh!! — Cristian Muscalu, Jul 01 '16 at 10:20

score 16 · Answer 1 · answered Jul 01 '16 at 09:11

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

Pardeep Jain · Answer 2 · 2016-12-08T17:35:39.393

5

See at the bottom of documentation page

Dependencies jQuery UI Datepicker and DateTimePicker

so you have to embed these lines in your index.html which you haven't embed i think so try using this

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

also don't forget to list down calendar in the list of directives under @component

Update

Shift all your css files of primeng from index.html to angular-cli.json file. like this

"styles": [
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/primeui/primeui-ng-all.min.css"
     ....
  ],

move all your primeng js files as well in angular-cli.json file.

as of now all the components of primeng are converted in module so we have to import all the components in the main module file. (app.module.ts file in my case).

edited Dec 08 '16 at 17:35

answered Jul 01 '16 at 07:31

Pardeep Jain

84,110
37
165
215

I will try that too, but now it seems like the big problem is reference errors when i add [directive]. I tried copying the files again from node_modules to assets, changed references, and same error.. – Cristian Muscalu Jul 01 '16 at 07:41
1

This worked for me. Put references to js files in scripts array, as follows: "scripts": [ "js/jquery-3.1.1.min.js", "js/primeui/primeui-ng-all.js" ], This allows index.html to be totally clean and worked great for producing distribution package. – Kwexi Dec 24 '16 at 23:27
@Kwexi do you know how to do this using webpack? – Mike3355 Apr 25 '17 at 13:52

score 4 · Answer 3 · answered Nov 29 '16 at 11:53

4

Hey this is the most updated primeng angular cli quickstart project take a look.

https://github.com/primefaces/primeng-quickstart-cli

answered Nov 29 '16 at 11:53

Mertcan Diken

14,483
2
26
33

score 1 · Answer 4 · answered Jul 01 '16 at 07:58

1

Try adding primeui-ng-all.min.js in index.html

<!-- JS for PrimeUI -->
<script src="node_modules/primeui/primeui-ng-all.min.js"></script>

See if this helps.

answered Jul 01 '16 at 07:58

Sanket

19,295
10
71
82

@cris Refer this github link - https://github.com/primefaces/primeng-quickstart/blob/master/index.html According this index.html you need add above primeui-ng-all.min.js file in addition to answer suggested by PierreDuc. This is somehow not mentioned in primeNG setup page. – Sanket Jul 01 '16 at 11:31
It's never recommended to add package in index.html file instead use it in `angular.json` or `.angular-cli.json` file – Pardeep Jain Jul 25 '18 at 12:50

score 0 · Answer 5 · answered Dec 08 '16 at 17:08

0

You have to add it your imports in the module.ts file otherwise Angular ignores it.

answered Dec 08 '16 at 17:08

Eddie Martinez

13,582
13
81
106

score 0 · Answer 6 · answered May 03 '17 at 11:52

0

Add import CalendarModule in your app.module.ts

@NgModule({  imports: [
CommonModule,
CalendarModule],  declarations: [CarruselComponent],  exports: [    CarruselComponent ]})

answered May 03 '17 at 11:52

Angel Ferrando

31
3

score 0 · Answer 7 · answered Jan 10 '20 at 06:45

0

This the complete documentation of Primeng Setup: https://www.primefaces.org/primeng/#/setup

Here How we adding a calendar : https://www.primefaces.org/primeng/#/calendar

answered Jan 10 '20 at 06:45

Binara Thambugala

776
6
17

score 0 · Answer 8 · answered Feb 06 '20 at 10:44

Install PrimeNG

npm install primeng --save

Install Prime Icons

npm install primeicons --save

Install Font Awesome

npm install font-awesome --save

Install Angular CDK

npm install @angular/cdk --save

If we now go to package.json, we will see the following primeng dependencies

Open the angular.json and add the following in the styles section

"./node_modules/primeicons/primeicons.css",
  "./node_modules/primeng/resources/themes/nova-light/theme.css",
  "./node_modules/primeng/resources/primeng.min.css",

Adding the PrimeNG Component in Angular Application For adding any PrimeNG Component in Angular we will be following below steps-

Reference - https://www.codeusingjava.com/angular/primeng/prime1
Reference - https://youtu.be/4Wk4RgYN9ZQ

score 0 · Answer 9 · answered Dec 15 '21 at 07:42

You must first use the npm command to install the calendar Then add it in your modules file in two parts, imports and exports.

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CalendarModule,
    FormsModule
  ],
    exports: [CalendarModule,],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

Angular2 add PrimeNG component

9 Answers9

Update