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.
https://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.
To run unit and e2e tests, execute ng test and ng e2e commands, respectively.