Setting up PrimeNG project with Angular CLI

Angular CLI (https://cli.angular.io) is a comfortable tool to create, run, and test Angular applications out of the box. It generates the code in no time. We will describe some useful commands and show you how to integrate PrimeNG with Angular CLI. First, the tool should be installed globally:

npm install -g @angular/cli

When it is installed, every command can be executed in the console with prepended ng. For instance, to create a new project, run ng new [projectname] [options]. Let's create one. Navigate to a directory that will be the parent directory of your project and run the following command:

ng new primeng-angularcli-setup --style=scss

This command will create an Angular 4 project within the folder primeng-angularcli-setup. The option --style sets a CSS preprocessor. Here, we want to use SASS files and need a Sass preprocessor. The preprocessor compiles SASS files whenever we make changes. You don't need to set a preprocessor if you only have CSS files.

Note

The complete preconfigured seed project with PrimeNG and Angular CLI is available on GitHub athttps://github.com/ova2/angular-development-with-primeng/tree/master/chapter1/primeng-angularcli-setup.

The created project has the following top directories and files:

Directory/file	Short description
e2e	Folder with e2e tests (.e2e-spec.ts files) and page objects (.po.ts files).
src	Source code folder where the application code should be written.
.angular-cli.json	Set up configuration file. PrimeNG dependencies can be listed here.
karma.conf.js	Karma configuration file for unit testing.
protractor.conf.js	Protractor configuration file for e2e testing.
package.json	Standard file for package management of npm-based projects.
tsconfig.json	Settings for TypeScript compiler.
tslint.json	Settings for TSLint.

You can now start the application by typing the following:

ng serve

This command will run a local server at http://localhost:4200 by default. You will see the text app works! in the browser. The ng serve command uses webpack-dev-server internally. The server is running in the watch mode. It refreshes the page automatically when any changes occur. There are a lot of configuration options. You can, for example, set a custom port by the --port option. Refer to the official documentation for more details at https://github.com/angular/angular-cli/wiki. To compile the application into an output directory, run the following command:

ng build

The build artifacts will be stored in the dist directory.

Note

The --prod option in ng build or ng serve will minify the files and remove unused (dead) code. The --aot option will use AOT compilation and produce even more smaller and optimized artifacts.

To run unit and e2e tests, execute ng test and ng e2e commands, respectively.

Generating scaffolding

Angular CLI allows us to generate components, services, directives, routes, pipes, and many more with ng generate. Here is how you would generate a component:

ng generate component path/name

For example, if we run the following command:

ng generate component shared/message

Four files will be generated and one updated. The produced output will be:

installing component
  create src/app/shared/message/message.component.scss
  create src/app/shared/message/message.component.html
  create src/app/shared/message/message.component.spec.ts
  create src/app/shared/message/message.component.ts
  update src/app/app.module.ts

The new component is registered in app.module.ts automatically. The generation of other scaffoldings is identical. For example, to generate a service, run this command:

ng generate service path/name

There are plenty of useful options. You can set, for example, --spec=false to skip test file generation.

Adding PrimeNG dependencies

Integrating PrimeNG with Angular CLI is straightforward. First, install and save the dependencies:

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

Second, edit the .angular-cli.json file and add three more CSS files to the styles section. These are the same files as in the SystemJS- and Webpack-based setups:

"styles": [
  "styles.css",
  "../node_modules/primeng/resources/themes/bootstrap/theme.css",
  "../node_modules/primeng/resources/primeng.min.css",
  "../node_modules/font-awesome/css/font-awesome.min.css"
]

Now, you can import desired PrimeNG modules. Refer to the Running PrimeNG with SystemJS section to see how to import PrimeNG modules. In the seed project on GitHub, we have imported the MessagesModule and put some demo code into message.component.html and message.component.ts.