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));