Skip to main content

Enhanced CLI & Tooling (Angular 15+)

Overview​

Angular 15+ introduces significant improvements to the CLI and build tooling, focusing on developer experience and build performance.

Key Improvements​

1. esbuild Integration​

Angular 15 introduces experimental esbuild support for faster builds:

// angular.json
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser-esbuild",
          "options": {
            // ... configuration
          }
        }
      }
    }
  }
}

Benefits:

  • 40-60% faster build times
  • Improved watch mode performance
  • Better tree-shaking

2. Standalone Schematics​

New CLI commands for standalone components:

# Generate standalone component
ng generate component my-component --standalone

# Generate standalone app
ng new my-app --standalone

# Convert to standalone
ng generate @angular/core:standalone

3. Improved Error Messages​

Before (Angular 14):

Error: NullInjectorError: No provider for HttpClient!

After (Angular 15+):

Error: NullInjectorError: No provider for HttpClient!

This likely means HttpClientModule is not imported in your app.
To fix: Add HttpClientModule to your imports array or use
provideHttpClient() in bootstrapApplication().

4. Auto-Import Suggestions​

The CLI now suggests imports when generating components:

ng g c user-profile

# CLI suggests:
# Would you like to add this component to:
#  - app.module.ts
#  - app.component.ts (standalone)
#  - Create standalone component

Build Performance Features​

1. Selective Compilation​

# Build only changed files
ng build --watch

# Skip tests during development
ng build --skip-tests

2. Persistent Build Cache​

Enabled by default in Angular 15+:

// angular.json
{
  "cli": {
    "cache": {
      "enabled": true,
      "path": ".angular/cache"
    }
  }
}

3. Optimized Development Server​

# Faster dev server with HMR
ng serve

# Production-like build
ng serve --configuration production

New Schematic Features​

1. Functional Interceptors​

ng generate interceptor auth --functional

Generates:

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  const authReq = req.clone({
    headers: req.headers.set("Authorization", `Bearer ${token}`),
  });
  return next(authReq);
};

2. Functional Guards​

ng generate guard auth --functional

Generates:

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  return authService.isAuthenticated();
};

TypeScript Configuration​

Strict Mode by Default​

Angular 15+ enables strict mode:

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "noImplicitAny": true,
    "noImplicitReturns": true
  }
}

ESLint Integration​

# Add ESLint
ng add @angular-eslint/schematics

# Run linting
ng lint

# Fix automatically
ng lint --fix

Package Management​

1. Automatic Peer Dependencies​

npm/yarn automatically installs peer dependencies:

ng add @angular/material
# Automatically installs required peers

2. Dependency Updates​

# Update Angular packages
ng update @angular/core @angular/cli

# Check for updates
ng update

Debugging Tools​

1. Source Maps​

Enabled by default in development:

// angular.json
{
  "configurations": {
    "development": {
      "sourceMap": true,
      "vendorSourceMap": true
    }
  }
}

2. Build Analyzer​

# Analyze bundle size
ng build --stats-json
npx webpack-bundle-analyzer dist/my-app/stats.json

Best Practices​

1. Use Standalone Schematics​

# Always prefer standalone
ng g c my-component --standalone

2. Enable Caching​

# Cache for faster builds
ng config cli.cache.enabled true

3. Use esbuild​

# Update to esbuild builder
ng update @angular/cli --migrate-only

4. Monitor Build Performance​

# Check build stats
ng build --stats-json

# Profile build time
time ng build

Common Commands​

# Create new app
ng new my-app --standalone --routing --style=scss

# Generate components
ng g c components/header --standalone

# Generate services
ng g s services/auth

# Build for production
ng build --configuration production

# Test
ng test

# E2E testing
ng e2e

# Update dependencies
ng update

Migration Tips​

Migrate to esbuild​

# Update angular.json
ng config projects.my-app.architect.build.builder @angular-devkit/build-angular:browser-esbuild

Enable Strict Mode​

ng config --global cli.warnings.strictMode false
ng update @angular/cli --migrate-only

Interview Questions​

Q: What performance improvements does Angular 15 CLI bring? A: esbuild integration (40-60% faster builds), persistent caching, improved watch mode, better tree-shaking.

Q: How do you generate a standalone component? A: ng generate component my-component --standalone

Q: What's the difference between esbuild and webpack? A: esbuild is written in Go, significantly faster for development builds. Webpack offers more plugins and configuration options.

Resources​