Angular CLI Customization

The Angular CLI is a powerful tool for managing Angular projects. Customizing the CLI can help you streamline your development workflow and enforce project standards. This guide covers various ways to customize the Angular CLI.

Customizing Angular Workspace Configuration

Modify the angular.json file to customize your Angular workspace configuration:

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

Adding Custom Schematics

Create custom schematics to automate repetitive tasks and enforce project standards:

ng g @schematics/angular:component my-component --dry-run

Create a custom schematic:

ng generate schematic my-schematic

Modify the schematic files as needed and use it in your project:

ng generate my-schematic:my-schematic

Customizing Build Configuration

Modify the build configuration in the angular.json file to customize the build process:

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

Customizing Serve Configuration

Modify the serve configuration in the angular.json file to customize the development server:

// angular.json
{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "options": {
            "port": 4200,
            "open": true,
            "proxyConfig": "src/proxy.conf.json"
          }
        }
      }
    }
  }
}

Creating Custom Commands

Create custom commands by adding scripts to the package.json file:

// package.json
{
  "scripts": {
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "deploy": "ng deploy",
    "custom-command": "ng build && ng serve --open"
  }
}

Using Environment Variables

Use environment variables to customize the behavior of your Angular application:

// src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.example.com'
};

Use the environment variables in your application:

// src/app/app.component.ts
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  apiUrl = environment.apiUrl;
}

Key Points

Conclusion

Customizing the Angular CLI allows you to streamline your development workflow and enforce project standards. By modifying workspace configuration, creating custom schematics, customizing build and serve configurations, creating custom commands, and using environment variables, you can tailor the Angular CLI to meet your project's specific needs. Happy coding!