Angular Installation & CLI

Developing an Angular application requires setting up a local development environment. Because Angular relies heavily on TypeScript and strict configuration files, you almost never set up an Angular project manually from scratch. Instead, you use the official Angular CLI (Command Line Interface).

1. Prerequisites (Node.js)

Before everything, you must have Node.js installed. Node.js is required to run the CLI and local development server, and to manage NPM packages.

• Download Node.js from nodejs.org (LTS version recommended).
• Verify installation by running node -v and npm -v in your terminal.

2. Installing the Angular CLI

The Angular CLI is a phenomenal tool provided by Google that initializes projects, generates boilerplate code (like components and services), and performs production builds. Install it globally on your machine using NPM:

npm install -g @angular/cli

Verify it installed successfully by typing ng version.

3. Creating a New Workspace

To create a brand new Angular application, navigate to your desired folder and use the ng new command.

ng new my-angular-app

The CLI will prompt you with a few setup options:

• Which stylesheet format would you like to use? (Select CSS or SCSS).
• Would you like to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (You can say Yes for modern apps).

Modern Angular applications (v17+) default to using Standalone Components, resulting in a cleaner and simpler starting template than older versions of Angular.

4. Running the Development Server

Once the installation is complete, navigate into your new project folder and start the local development server:

cd my-angular-app
ng serve --open

The --open flag (or simply -o) automatically opens your default browser to http://localhost:4200/, the default port for Angular. Any time you save a file in your code editor, Angular will instantly recompile and refresh your browser automatically!

Conclusion

The Angular CLI is extremely powerful. Later on, we will use it to easily scaffold new pieces of code. But first, let's explore exactly what the ng new command just generated for us in the next chapter: Project Structure.