Tooling

Angular CLI generates projects, components, services, and builds optimized bundles. NPM/Yarn manage dependencies via package.json. Webpack (used internally by Angular CLI) bundles modules, handles tree-shaking, and code-splitting. Understanding these tools is essential for Angular development.

---

Angular CLI

Angular CLI (ng) is the official command-line tool. Key commands: ng new (create project), ng generate (scaffold components/services), ng serve (dev server), ng build (production build), ng test (unit tests), ng lint (linting). It abstracts webpack config and handles AOT compilation.

Deep Dive: Essential Commands

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

# Generate components, services, modules
ng generate component user-card        # or: ng g c user-card
ng generate service user               # or: ng g s user
ng generate module admin --routing     # or: ng g m admin --routing
ng generate guard auth                 # route guard
ng generate pipe truncate              # custom pipe
ng generate directive highlight        # custom directive

# Development
ng serve                 # http://localhost:4200 with live reload
ng serve --port 3000     # custom port

# Build
ng build                 # dev build
ng build --configuration production   # prod (AOT, minified, tree-shaken)

# Testing
ng test                  # unit tests (Karma + Jasmine)
ng e2e                   # end-to-end tests

Project structure:

my-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts        # root component
│   │   ├── app.module.ts           # root module
│   │   └── app-routing.module.ts   # root routing
│   ├── assets/                     # static files
│   ├── environments/               # env configs
│   ├── index.html                  # entry HTML
│   ├── main.ts                     # bootstrap
│   └── styles.scss                 # global styles
├── angular.json                    # CLI config
├── package.json                    # dependencies
└── tsconfig.json                   # TypeScript config

---

Package Managers (NPM / Yarn)

NPM (default with Node.js) and Yarn manage project dependencies. package.json defines dependencies (runtime) and devDependencies (build-time). package-lock.json / yarn.lock locks exact versions for reproducible builds. Understand semantic versioning: ^1.2.3 (minor updates), ~1.2.3 (patch updates), 1.2.3 (exact).

Deep Dive: package.json & Commands

{
    "name": "my-app",
    "version": "1.0.0",
    "scripts": {
        "start": "ng serve",
        "build": "ng build --configuration production",
        "test": "ng test",
        "lint": "ng lint"
    },
    "dependencies": {
        "@angular/core": "^17.0.0",
        "@angular/router": "^17.0.0",
        "rxjs": "^7.8.0"
    },
    "devDependencies": {
        "@angular/cli": "^17.0.0",
        "typescript": "~5.2.0",
        "karma": "~6.4.0"
    }
}

Command	NPM	Yarn
Install all	npm install	yarn
Add dependency	npm install lodash	yarn add lodash
Add dev dep	npm install -D jest	yarn add -D jest
Remove	npm uninstall lodash	yarn remove lodash
Run script	npm run build	yarn build
Global install	npm install -g @angular/cli	yarn global add @angular/cli

Versioning: - ^1.2.3 → allows 1.x.x (minor + patch updates) - ~1.2.3 → allows 1.2.x (patch updates only) - 1.2.3 → exact version

---

Build Tools (Webpack)

Angular CLI uses Webpack internally (since Angular 17+, also esbuild for faster builds). Webpack bundles modules, handles tree-shaking (remove unused code), code-splitting (lazy-loaded chunks), and AOT compilation (Ahead-of-Time — compiles templates at build time for smaller bundles and faster startup).

Deep Dive: AOT vs JIT & Build Optimization

Feature	JIT (dev)	AOT (prod)
Compilation	In browser at runtime	At build time
Bundle size	Larger (includes compiler)	Smaller
Startup	Slower	Faster
Error detection	Runtime	Build time
Default in	ng serve	ng build --prod

Build optimizations Angular CLI applies: - Tree-shaking — removes unused code - Minification — compresses JS/CSS - Code-splitting — separate chunks for lazy modules - AOT compilation — pre-compiles templates - Differential loading — separate bundles for modern/legacy browsers

Other build tools (less common in Angular): - Rollup — tree-shaking focused, used by Angular for library builds - Gulp — task runner (legacy, mostly replaced by CLI scripts) - esbuild — extremely fast bundler, used in Angular 17+ dev server

---

Environment Configuration

Angular supports environment files (environment.ts, environment.prod.ts) for different configs (API URLs, feature flags). The CLI swaps files during build via fileReplacements in angular.json.

Deep Dive: Example

// environments/environment.ts (dev)
export const environment = {
    production: false,
    apiUrl: 'http://localhost:8080/api'
};

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

// Usage in service
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class ApiService {
    private baseUrl = environment.apiUrl;

    getUsers() {
        return this.http.get(`${this.baseUrl}/users`);
    }
}

---

Common Interview Questions

Common Interview Questions

• What is Angular CLI? Name essential commands.
• What is the difference between dependencies and devDependencies?
• What is semantic versioning? Explain ^ and ~.
• What is AOT vs JIT compilation?
• What is tree-shaking?
• What is lazy loading and how does it affect the build?
• What is package-lock.json / yarn.lock?
• How do you manage environment-specific configuration?
• What build tools does Angular use internally?