← Back to Tutorials Chapter 16

Tools

The Angular CLI (Command Line Interface) is the primary tool for scaffolding, developing, and building Angular applications. This chapter covers CLI commands, configuration, decorators, lifecycle hooks, and production deployment.

Angular CLI Commands

The Angular CLI simplifies every phase of development. Below are the most important commands:

ng generate

Scaffold components, directives, pipes, services, modules, and more.

ng generate component dashboard
ng generate directive highlight
ng generate pipe filter
ng generate service data
ng generate module admin --route admin --module app.module
ng generate class models/user
ng generate interface models/user
ng generate guard auth

ng serve

Start a development server with live reload and source maps.

ng serve --open --port 4200 --hmr

ng build

Compile the application into output files in the dist/ folder.

ng build --prod --output-path docs --base-href /my-app/

ng test & ng e2e

Run unit tests with Karma and end-to-end tests with Protractor or Cypress.

ng test --watch=false --code-coverage
ng e2e

ng deploy

Deploy to various cloud providers with a single command.

ng deploy --base-href=/my-app/

angular.json Configuration

The angular.json file defines the workspace structure, project configurations, build options, and environments.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                { "type": "initial", "maximumWarning": "2mb" },
                { "type": "anyComponentStyle", "maximumWarning": "6kb" }
              ]
            }
          }
        }
      }
    }
  }
}

Decorators & Metadata

Decorators add metadata to classes, methods, and properties. They are the building blocks of Angular's declarative syntax.

@Component({ selector: 'app-root', templateUrl: './app.component.html' })
@Directive({ selector: '[appHighlight]' })
@Pipe({ name: 'filter' })
@Injectable({ providedIn: 'root' })
@Input() user: User;
@Output() clicked = new EventEmitter<void>();

Lifecycle Hooks Reference

Angular components and directives have lifecycle hooks that let you tap into key moments:

• ngOnChanges — Called when input properties change
• ngOnInit — Called once after the first ngOnChanges
• ngDoCheck — Called during every change detection run
• ngAfterContentInit — After content projection
• ngAfterContentChecked — After every content check
• ngAfterViewInit — After the view and child views are initialized
• ngAfterViewChecked — After every view check
• ngOnDestroy — Cleanup before Angular destroys the component

Error Handling

Override Angular's ErrorHandler to provide global error handling.

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: any) {
    console.error('Global error:', error);
    // Send to logging service
  }
}

// app.module.ts
providers: [{ provide: ErrorHandler, useClass: GlobalErrorHandler }]

Building for Production

Use --prod to enable AOT compilation, tree-shaking, minification, and dead code elimination.

ng build --prod

This produces optimized bundles in dist/. Deploy these files to any static hosting or cloud platform.