PrimeNG in ionic 2?

Ionic Framework ionic-v3
1

Hi.

I am new to Ionic 2 and not that old in Angular 2 / Typescript…

I wanted to test the combination of PrimeNG ( http://www.primefaces.org/primeng/ )0.6 or later and Ionic 2, to leverage its integration of fullcalendar.io (see http://www.primefaces.org/primeng/#/schedule ).

Alas, PrimeNG goes the SystemJS way (see http://www.primefaces.org/primeng/#/setup ) and, AFAIU, Ionic 2 goes the CommonJS way.

Is there a way to configure webpack so that I can use PrimeNG ?

Thanks in advance.

2

Hi!

So it’s a little bit more than just telling webpack to handle it. The way PrimeNG is built from source expect to only be used with System.Js, and nothing else.

So you could do a few things

  1. Build ionic2 with system.js
  2. Contribute back to PrimeNG and help them ship commonJS modules as well as system.js.
3

Hey,

looks like PrimeNG was updated to support commonJS in March (http://blog.primefaces.org/?p=3810). I was interested by the thread so i decided to give it a try, but can’t seem to get the components to load. here is what I have so far (in case it helps out anyone else).

Added the package through NPM
npm install primeng --save

Added MomentJS for scheduler
import * as moment from 'moment/moment';

Added FullCalendar
npm install fullcalendar --save

Add controller logic and site setup as defined in the quickstart
http://www.primefaces.org/primeng/#/schedule

I’m going to keep working on this for a little while longer so i’ll let you know what comes from it.

4

Thanks for the info.

I did not have the opportunity to play with ionic those last months.

However, in my angular 2 apps, I now use rollupjs to bundle everything and I am quite happy with it. To do so, I do my own primeng build, in es2015.

5

Adding PrimeNg to Ionic 3 (Successfull Steps)

  1. npm install primeng --save
  2. npm install @angular/animations --save
  3. npm install font-awesome --save
  4. Add this to app.module.ts file:

import {BrowserModule} from ‘@angular/platform-browser’;
import {BrowserAnimationsModule} from ‘@angular/platform-browser/animations’;
imports: [
BrowserModule,
BrowserAnimationsModule,
//…
],

  1. open this file:
    node_modules/@ionic/app-scripts/config/copy.config.js

  2. add this code to copy.config.js file
    copyPrimeng: {
    src: [’{{ROOT}}/node_modules/primeng/resources/themes/omega/theme.css’, ‘{{ROOT}}/node_modules/primeng/resources/primeng.min.css’, ‘{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css’],
    dest: ‘{{BUILD}}/assets/css’
    },
    copyFontAwesome: {
    src: ["{{ROOT}}/node_modules/font-awesome/fonts/**/*"],
    dest: “{{BUILD}}/assets/fonts”
    }

  3. Add these file links to index.html file:

1 Like
6

I have webpack in my app and after using this method, main.js not generated in build same as all the bundles js that should be generated by webpack

Anyone know why?