Setting Up the Development Environment and Creating Your First Angular Project

In the previous chapter, we completed the installation of the Angular CLI, laying the foundation for creating our first project. Now, we’ll create our first Angular application and explore its directory structure and basic configuration.

Creating an Angular Project

Creating a new Angular project with the Angular CLI is straightforward. Simply run the following command in your terminal:

ng new my-angular-app

Here, my-angular-app is the name of your project—you may replace it with any name that suits your needs.

Command Breakdown

• ng: The Angular CLI’s command-line interface tool.
• new: Instructs the CLI to generate a new project.
• my-angular-app: The name of the new project—freely customizable.

Configuration Options During Project Creation

As the CLI sets up your project, it will prompt you to make several configuration choices:

1. Add Angular routing?
   Choose “Y” if your application requires multiple views and navigation between them via routing.
2. Choose a stylesheet format:
   The CLI supports multiple CSS preprocessor formats: CSS, SCSS, SASS, LESS, and Stylus. Select the one best suited to your project.

You’ll likely see prompts like these:

? Would you like to add Angular routing? (y/N)
? Which stylesheet format would you like to use? (CSS, SCSS, SASS, LESS, Stylus)

Project Structure

Once created, the CLI generates a new directory containing numerous files and subdirectories. Its foundational structure looks like this:

my-angular-app/
├── e2e/                       # End-to-end test files
├── node_modules/              # npm dependency packages
├── src/                       # Source code
│   ├── app/                   # Application-level code
│   ├── assets/                # Static assets (e.g., images, fonts)
│   ├── environments/          # Environment-specific configuration files
│   ├── index.html             # Main HTML entry point
│   ├── main.ts                # Bootstrapping entry file
│   ├── polyfills.ts           # Browser compatibility shims
│   ├── styles.css             # Global styles
│   └── test.ts                # Unit test configuration
├── angular.json               # Angular workspace and build configuration
├── package.json               # npm package metadata and scripts
└── tsconfig.json              # TypeScript compiler configuration

Launching the Development Server

Now, let’s start the local development server to view your newly created Angular application. Run the following commands in your terminal:

cd my-angular-app
ng serve

By default, the development server runs at http://localhost:4200. Open your browser and navigate to that address—you’ll see Angular’s welcome page.

Accessing Your Project

Visit http://localhost:4200 in your browser. If everything is set up correctly, you’ll see:

Welcome to my-angular-app!

This confirms your Angular project has been successfully created and is running.

Summary of This Section

In this chapter, we learned how to use the Angular CLI to scaffold a new Angular project, explored its fundamental directory layout, and launched the development server. You now have a working Angular application ready for further development.

In upcoming chapters, we’ll dive deep into Angular’s core building blocks—components—and learn how to create and use them effectively.

Before moving forward, please verify that your project runs successfully—this ensures a solid foundation for subsequent learning. Next, we’ll explore Angular’s cornerstone concept: components—how to create, configure, and integrate them.