Preparing Your Workspace
To begin building with Angular, you need a robust local development environment. As a Technical Lead, ensuring your environment matches your production build is key to avoiding 'it works on my machine' issues. The Angular ecosystem relies heavily on Node.js and NPM (Node Package Manager) to manage dependencies and build tools.
- Prerequisites: Node.js and NPM
Before installing Angular, you must have Node.js installed. Angular typically requires an LTS (Long Term Support) version. Installing Node.js automatically installs NPM, which Angular uses to fetch libraries like RxJS and Zone.js.
- Installing the Angular CLI
The Angular Command Line Interface (CLI) is the backbone of Angular development. It handles project initialization, code generation (components, services), and the build process. You install it globally using NPM.
- Creating Your First Project
With the CLI installed, you can generate a new workspace. The CLI will ask you configuration questions regarding CSS preprocessors (like SCSS) and whether you want to enable Server-Side Rendering (SSR).
Angular Project Structure
A standard Angular workspace is organized to support modularity and scalability.
| File/Folder | Purpose |
|---|---|
| src/app | Contains the main logic, components, and modules. |
| src/assets | Static files like images, icons, and configuration JSONs. |
| angular.json | CLI configuration for build, serve, and test commands. |
| package.json | Lists project dependencies and custom scripts. |
| tsconfig.json | TypeScript compiler settings for the project. |