Add PrimeNG

PrimeNG is a collection of rich UI components for Angular 2. PrimeNG is a sibling of the popular JavaServer Faces Component Suite, PrimeFaces.

1. Add the NPM packages

npm install --save primeng
npm install --save font-awesome

2. Add external font-awesome

Configure FontAwesome with the below paths.

See this for a guide on how to add external fonts.

FONTS_DEST = `${this.APP_DEST}/fonts`;

FONTS_SRC = ['node_modules/font-awesome/fonts/**'];

3. Add external scripts and styles

Replace <theme-name> with whatever theme from PrimeNG you want to use. See this for a guide on how to add external scripts and styles.

{ src: 'primeng/resources/primeng.css', inject: true },
{ src: 'primeng/resources/themes/<theme-name>/theme.css', inject: true },
{ src: 'font-awesome/css/font-awesome.min.css', inject: true },

4. SystemJS config for the dev environment

Modify SYSTEM_CONFIG_DEV in seed.config.ts adding this:

...
protected SYSTEM_CONFIG_DEV: any = {
...
paths: {
  ...
  'primeng': `${this.APP_BASE}node_modules/primeng`,
  ...
}
...

Starting with SystemJS version 0.20.14 (or maybe even a bit earlier), using SYSTEM_CONFIG_DEV as shown above no longer works. Instead, include the following in your project.config.ts:

const additionalPackages: ExtendPackages[] = [{
   name: 'primeng',
   path: 'node_modules/primeng',
   packageMeta: {
      defaultExtension: 'js'
   }
}];

this.addPackagesBundles(additionalPackages);

There is commented-out code snippet you can use as starting point.

5. Ensure that images referenced by the PrimeNG theme CSS are copied to dist/prod/css/images by production build

Production build bundles all CSS files used by your app into dist/prod/css/main.css. Any images (e.g. background-image) referenced by your PrimeNG theme CSS must be available in dist/prod/css/images.

Add the following to project.config.ts:

 PRIME_NG_THEME = '<theme-name>';
 CSS_IMAGE_DEST = `${this.CSS_DEST}/images`;
 CSS_IMAGE_SRC = [
   'node_modules/primeng/resources/themes/' + this.PRIME_NG_THEME + '/images/**'
 ];

Create new task build.css_images.ts in tools/tasks/project with the following code:

import * as gulp from 'gulp';
import Config from '../../config';

export = () => {
   return gulp.src(Config.CSS_IMAGE_SRC)
       .pipe(gulp.dest(Config.CSS_IMAGE_DEST));
};

Modify seed.tasks.json to include the new task in the production build:

 "build.prod": [
...
   "build.assets.prod",
   "build.fonts",
   "build.css_images",  //<< new task
   "build.html_css",
...
 ],

6. Ensure that any theme fonts are also copied over to the build directory.

Add the following to project.config.ts:

THEME_FONTS_DEST = `${this.APP_DEST}/css/fonts`;
THEME_FONTS_SRC = [
    'node_modules/primeng/resources/themes/' + this.PRIME_NG_THEME + '/fonts/**',
];

Create a new task file tools/tasks/project/build.theme_fonts.ts:

import * as gulp from 'gulp';
import Config from '../../config';

export = () => {
  return gulp.src(Config.THEME_FONTS_SRC)
      .pipe(gulp.dest(Config.THEME_FONTS_DEST));
};

In gulpfile.ts

// Build dev.
gulp.task('build.dev', done =>
  runSequence('clean.dev',
              'tslint',
              'build.assets.dev',
              'build.fonts', 
              'build.theme_fonts',    // Added task;
              'build.js.dev',
              'build.index.dev',
              done));
// Build prod.
gulp.task('build.prod', done =>
  runSequence('clean.prod',
              'tslint',
              'build.assets.prod',
              'build.fonts',
              'build.theme_fonts',    // Added task;
              'build.html_css.prod',
              'build.js.prod',
              'build.bundles',
              'build.bundles.app',
              'build.index.prod',
              done));
// Build test.
gulp.task('build.test', done =>
  runSequence('clean.dev',
              'tslint',
              'build.assets.dev',
              'build.fonts',
              'build.theme_fonts',    // Added task;
              'build.js.test',
              'build.index.dev',
              done));