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.

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.

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