When you create a project using Angular CLI, it generates a well-organized folder and file structure. This structure plays a crucial role in organizing code, making development more efficient and scalable.

You’ll explore the key folders and files that are automatically created when you set up a new Angular project.

Project Structure

When you run the command ng new angular-app, Angular CLI generates the following structure:

📂 src/ – Application Source Code.

This folder contains the core files and configurations required for your Angular application.

Application Code

Configuration Files

Additional Files

Running an Angular Application

To launch your Angular app, first, open the terminal. In VS Code, you can use these shortcuts:

• macOS: Cmd + J;

• Windows: Ctrl + J.

Alternatively, go to View → Terminal from the top menu.

Now, run the following command:

This command compiles the project and starts a local development server. Once the process is complete, the terminal will display a message with a URL:

Open the URL (http://localhost:4200/) in your browser, and you’ll see the Angular welcome page.

Now you have a solid understanding of Angular’s project structure! Knowing where key files are located and their purpose will help you navigate the codebase efficiently and speed up development.