Advanced Angular CLI Configuration

1. Introduction

This tutorial aims to guide you through the advanced configuration settings of Angular CLI. By manipulating the angular.json file, you can control various aspects of the Angular CLI to suit your project’s requirements.

In this tutorial, you will:
- Learn how to customize the angular.json file
- Understand various Angular CLI configurations
- Gain the ability to control different CLI aspects

Prerequisites
- Basic knowledge of Angular and Angular CLI
- Node.js and npm installed on your local development machine
- Angular CLI installed globally on your machine

2. Step-by-Step Guide

Angular CLI's configuration file, angular.json, holds the settings for your Angular projects. This includes linting, serving, building configurations, and more.

2.1 Understanding angular.json

Example:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {}
    }
  }
}

• $schema: This points to the JSON schema file that validates the angular.json file.
• newProjectRoot: This is the directory where new projects are generated.
• projects: This contains the project-specific configuration.
• my-app: This is a project. It contains properties like root, sourceRoot, projectType, and prefix which configure the project.

2.2 Customizing the angular.json

You can customize the angular.json file to change the default configurations.

Example:

"projects": {
  "my-app": {
    "architect": {
      "build": {
        "options": {
          "outputPath": "dist",
          "index": "src/index.html",
          "main": "src/main.ts",
          "polyfills": "src/polyfills.ts",
          "tsConfig": "tsconfig.app.json",
          "assets": [
            "src/favicon.ico",
            "src/assets"
          ],
          "styles": [
            "src/styles.css"
          ],
          "scripts": []
        }
      }
    }
  }
}

In the build options, you can specify where your application builds (outputPath), where the main TypeScript file is (main), what polyfills to use (polyfills), and where your static assets like images and styles are (assets and styles).

3. Code Examples

3.1 Changing the default output directory

By default, Angular builds your project in the dist/ directory. You can change this in the angular.json:

"projects": {
  "my-app": {
    "architect": {
      "build": {
        "options": {
          "outputPath": "custom-dist",
        }
      }
    }
  }
}

Now, Angular will build your project in the custom-dist/ directory.

3.2 Adding global styles

You can add global styles to your Angular project. This is useful for adding CSS libraries like Bootstrap:

"projects": {
  "my-app": {
    "architect": {
      "build": {
        "options": {
          "styles": [
            "node_modules/bootstrap/dist/css/bootstrap.min.css",
            "src/styles.css"
          ],
        }
      }
    }
  }
}

Now, Bootstrap’s styles will be available globally in your project.

4. Summary

In this tutorial, you learned how to customize the angular.json file to control various aspects of the Angular CLI. You've learned how to change the default build directory and how to add global styles.

Next, you can learn how to add environment-specific configurations or how to add third-party libraries to your project.

5. Practice Exercises

1. Exercise: Change the default build directory to public/. Test this by building your project with ng build.

Solution:

"projects": {
  "my-app": {
    "architect": {
      "build": {
        "options": {
          "outputPath": "public",
        }
      }
    }
  }
}

Build your project with ng build. The output will be in the public/ directory.

1. Exercise: Add the Font Awesome library to your project. Test this by using an icon in your project.

Solution:

First, install Font Awesome with npm: npm install --save @fortawesome/fontawesome-free

Then, add it to your angular.json:

"projects": {
  "my-app": {
    "architect": {
      "build": {
        "options": {
          "styles": [
            "node_modules/@fortawesome/fontawesome-free/css/all.css",
            "src/styles.css"
          ],
        }
      }
    }
  }
}

You can now use Font Awesome icons in your project.