Adding PrimeNG UI components to Angular CLI projects

Angular 2 CLI is a scaffolding tool and code generator that can be used for the real world projects. It saves you a lot of typing and spares you from worrying about config files for TypeScript compiler, testing frameworks, project bundler (it uses Webpack), and deployment.

PrimeNG is an excellent library of 70+ Angular 2 UI components. In this blog I’ll list the steps you need to perform to generate new project with Angular CLI and add PrimeNG library to this project.

If you don’t have Angular CLI installed yet, install it globally:

npm install angular-cli -g

In the terminal window generate a new project, e.g. primeng_with_cli. Since I just want Angular CLI to generate only app compnent and module files, I’ll specify the option to generate inline template and styles and don’t bother with the test spec:


ng new primeng_with_cli --it --is --spec=false

Change to the newly created directory

 
cd primeng_with_cli

Add font awesome and PrimeNG as dependencies in package.json, e.g.


"font-awesome": "^4.6.3",

"primeng": "^1.0.0-beta.20",

Since the package.json was modified, install the above dependencies:

npm install

PrimeNG requires certain global styles so its components look pretty. Angular CLI projects have a config file angular-cli.json, where you can configure project settings, and in particular it has the property styles, which is the right place to add global style. Yes, I’m talking about the style tages that you’d add in the index.html in a regular Web app.

Angular CLI generate an empty file style.css and you need to add three more CSS file that are needed for PrimeNG:


"styles": [
    
  "styles.css",

  "../node_modules/primeng/resources/themes/omega/theme.css",

  "../node_modules/font-awesome/css/font-awesome.min.css",

  "../node_modules/primeng/resources/primeng.min.css"

] 

For sanity check run your new app by entering the following command in the terminal window:

ng serve

Open the app in the browser at 
http://localhost:4200, and Webpack dev server will happily render the single-page app with the text app works! This is a basic app that Angular CLI generated for you.

Now you need to modify the code in the generated dir app.component with the code that uses PrimeNG components. You can take the sample code from this blog. You’ll need to add required PrimeNG components to imports and declarations in the application module file app.module.ts.

The dev version of the app works, and now let’s see the prod version of this cool app. To prepare a production build run this command:

ng build --prod

Angular CLI will create bundles and will deploy all the files in the dist directory of your project. Take a peek into this directory and you’ll see the bundles that are available as .js files as well as their gzipped versions. The question is, how can we serve the existing gzipped files without having the web server do it for us? A simple solution is to install a static Node server that knows how to do it. Just add node-static package as dev dependency in package.json and install it:


"node-static": "^0.7.9" 
npm install

Finally, add the following npm script command in scripts section in package.json:



"serve:dist": "static dist -H '{\"Cache-Control\": \"no-cache, must-revalidate\"}' -z"

Start the static server and it’ll serve the optimized app on port 8080:



npm run serve:dist

NOTE: Creators of PrimeNG promised to add AoT support in the release candidate that will be available within a couple of weeks. When it’s done, you’ll be able to create smaller bundles by running this command:

ng build --prod --aot

That’s all folks!

5 thoughts on “Adding PrimeNG UI components to Angular CLI projects

  1. Yakov,

    Is it possible to use cli on existing (non-cli) project, like add ngPrime library to it?

    I think, it would be great to add a bonus chapter to your book talking about NgPrime and other component libraries, and maybe extend your Weather sample there (to include NgPrime Table or DataGrid and a LineChart). That kind of info is totally missing from all Angular2 books existing today.
    I am planning to try that in my project.

    Thank you,
    Oleg.

    1. If you wan to use CLI, you need to generate the project with Angular CLI and then copy the code (except config files) from your old app to the newly generate one.

      Our Angular book is written and no more chapters will be added. My previous blog shows how to add PrimeNG components to a non-cli project.

  2. Yakov,

    Enlightening piece. will the setup process be the same if i want to use a different UI librar, say ng-lightning??

    Thanks

  3. Hi Yakov,
    Thanks for this useful article. I stumbled on the same question for a few days and solved it before finding your article by chance. I nevertheless learned a few more tricks with it.
    Two comments, though:
    1. In my version of ng-cli (1.0.0-beta.19-3), the option “–spec=false” has no effect: .spec.ts files get generated anyway and the help advertised by ng does not work (“ng new –help”). I haven’t found yet in the ng documentation how to achieve this effect
    2. By using “npm install font-awesome –save” you get the effect of your 2 successive commands at once (update of package.json *and* installation). Of course, same applies to the other packages.
    Keep up with the good job!
    Kind regards

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s