Customization

You can edit the configuration files to customize many aspects of your development environment. In this chapter, we are going to cover how to customize your application by integrating some third-party libraries you might want to use.

Adding libraries

While the ng new command will generate a package.json file for you, it does not know about the various libraries you might need in your application. For example, if we want to add Bootstrap and Font Awesome to our application, we would need to first install them using NPM.

Code Listing 32

After running this command, you will see the library files in your node_modules folder.

angular-cli.json

The configuration file angular-cli.json can be found in the \angular-cli\blueprints\ng2\files subdirectory, and contains various configuration options for running the Angular CLI. Within the apps section, you will find a few options that are useful to know:

• root: The folder of the actual application, usually src.
• outDir: The folder where distribution files should be written, usually dist.
• assets: An array of additional files that should be included in the distribution.
• styles: An array of style sheets that should be included.

• We can add the Bootstrap styles sheets here, using:

• ../node_modules/bootstrap/dist/css/bootstrap.css

• scripts: An array of JavaScript files that should be included.

• We can add Bootstrap and the dependencies by adding the following lines:

• ../node_modules/jquery/dist/jquery.js
• ../node_modules/tether/dist/js/tether.js
• ../node_modules/bootstrap/dist/js/bootstrap.js

Once these additions are made, Bootstrap styles and JavaScript files will be bundled and included in your application when you run it and when you build the distribution.

Font Awesome

The process is basically the same, except that we need to import the actual font files. For this, we use the addons collection in the angular-cli.json file.

Code Listing 33

The addons collection is used for files your application needs, other than scripts and style sheets.

Assets

The assets collection contains various elements (files and folders) that you want copied to the distribution folder when the application is built. For the default build:

Code Listing 34

This tells the build process to copy the contents of the assets folder and the favicon.ico file to the distribution folder (typically dist).

Environments

The Environments folder contains TypeScript files that will be loaded depending on the environment the build is being made for. For example, the environment.prod.ts file located in the angular-cli\blueprints\ng2\files\__path__\environments subdirectory contains the following code.

Code Listing 35

You can import the environment module into your application and query the Production property in case your application needs to behave differently depending on the environment.

Summary

Although you can manually add scripts and style sheets to your HTML templates, by using Angular CLI, you gain the benefits of bundling to reduce page load times. You can also use the assets to move additional content to the distribution. Finally, the environments folder lets you provide properties your application can use to distinguish whether it is running in development or production.