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. Keep in mind that we want to use libraries written for Angular, rather than JavaScript libraries. JavaScript libraries manipulate the DOM, which is a behavior we do not want in an Angular application.

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 (two popular libraries), we would need to first install them using NPM.

Code Listing 27

After running these commands, you will see the library files in your node_modules folder. This example shows how to install the Angular version of Bootstrap. You can also run just the installation of Bootstrap, which will add the original Bootstrap and allow you to use the CSS formatting. If you are comfortable with Bootstrap's CSS structure, you can use it in Angular template files. However, you should not add the Bootstrap JavaScript portion to the application.

angular.json

The configuration file angular.json (see Chapter 4) can be found in the root folder, and contains various configuration options for running the Angular CLI. Within the project 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 sheet here, using node_modules/bootstrap/dist/css/bootstrap.css.

Once these additions are made, Bootstrap styles and components will be bundled and included in your application when you run it and when you build the distribution. You can visit this website for the Angular version of Bootstrap.

Font Awesome

Adding Font Awesome follows basically the same process as adding Bootstrap CSS. We just add the CSS file to the styles array.

Code Listing 28

If you are used to the original font-awesome syntax, you can still use the classes:

<i class="fa fa-gears fa-2x">&nbsp;</i>

You can also import the Font Awesome module by using the import statement in your app.module.ts file:

import { AngularFontAwesomeModule } from 'angular-font-awesome';

Tip: Don’t forget to add the Font Awesome module to your imports array in the app.module file.

This will allow you to use the <fa> tag and attributes, as the following example shows:

<fa name="cog" animation="spin" size="2x"></fa>

You can visit this website to learn more about the Angular version of Font Awesome.

Either approach can be used, and you can combine approaches, although I'd recommend you chose the approach you find more readable, and stick with it.

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 29

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 \src\environments subdirectory contains the following code.

Code Listing 30

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 style sheets to your HTML templates, by using the angular.json file, 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.