Angular Project Structure

# CHAPTER 3

Angular Project Structure #

1. Chapter Introduction #

When you run ng new app-name, the Angular CLI generates around 30 files and folders. For a beginner, opening this project in VS Code can be terrifying. Why are there so many files just to say "Hello World"? Because Angular sets up an enterprise-grade workspace. In this chapter, we will demystify the folder structure so you know exactly where to write your code and which files you should never touch.

2. Learning Objectives #

By the end of this chapter, you will be able to:

• Identify the purpose of the src and app folders.

• Understand how package.json manages dependencies.

• Understand the role of angular.json.

• Know where to store images and global CSS.

• Differentiate between development and production environments.

3. The Root Level Files #

When you open the project, the root folder contains several configuration files.

• nodemodules/: This folder contains all the third-party libraries downloaded by NPM. It is massive (often hundreds of MBs). *Never manually edit files here, and NEVER commit this folder to GitHub!*

• package.json: This is the "ID Card" of your project. It lists all the libraries your app depends on (like Angular Core, RxJS) and their exact version numbers. If you share your project, the other developer just runs npm install, and NPM reads this file to rebuild the nodemodules folder!

• angular.json: This is the master configuration file for the Angular CLI. It tells the CLI where your global CSS file is, where your assets are, and how to build the project for production.

• tsconfig.json: The configuration file for the TypeScript compiler. It dictates how strict the type-checking should be.

4. The src Folder (Where you work!) #

The src (source) folder contains the actual code of your application. 99% of your time will be spent inside this folder.

• index.html: The single HTML file that is sent to the browser. Notice it doesn't have much code inside it, except for a strange tag like <app-root></app-root>. This tag is where Angular injects your entire application!

• main.ts: The entry point of your application. When the app starts, this TypeScript file runs first and "bootstraps" (launches) the Angular framework.

• styles.css: Your global stylesheet. Any CSS placed here applies to the entire application.

5. The assets and environments Folders #

Also inside src, you will find two important directories:

• assets/: This is where you put static files like images, fonts, and company logos. If you have a file logo.png in here, you can reference it in your HTML as <img src="assets/logo.png">.

• environments/: Contains variables for different stages of development.

• environment.ts: Used when running ng serve locally (e.g., API URL = http://localhost:3000).

• environment.prod.ts: Used when deploying to the live internet (e.g., API URL = https://api.mycompany.com).

6. The app Folder (The Heart of the App) #

Inside src/app/, you will find the actual UI code. By default, the CLI generates one Component called the App Component. It represents the main layout.

It consists of four files:

1. 1. app.component.ts: The TypeScript logic.

1. 2. app.component.html: The visual template.

1. 3. app.component.css: Styles that apply *only* to this specific component!

1. 4. app.component.spec.ts: A testing file used by the Jasmine/Karma framework to run automated unit tests. You can ignore .spec.ts files as a beginner.

7. Component Architecture Analogy #

Think of the app folder as a Lego baseplate. The app.component is the baseplate. As your app grows, you will create smaller Lego pieces (like navbar.component, footer.component, shopping-cart.component) and snap them onto the baseplate to build the final application.

8. Common Mistakes #

• Writing logic in index.html: Beginners often try to write JavaScript or build their UI inside index.html. In Angular, index.html should remain almost completely empty. All UI and logic should be built inside the components in the src/app/ folder.

• Deleting .spec.ts files recklessly: While you don't need them as a beginner, it is better to leave them there or tell the CLI to stop generating them (ng generate component name --skip-tests), rather than manually deleting them and causing configuration errors.

9. Best Practices #

• Folder Organization: As you add more components, do not dump them all directly into the app folder. Create sub-folders by feature (e.g., src/app/auth/login/, src/app/dashboard/). This is known as Feature-Driven Architecture.

10. MCQs with Answers #

Question 3

If you want to change global CLI settings, like adding a global CSS framework such as Bootstrap, which file do you edit?

A angular.json. B tsconfig.json C main.ts

Check Answer

Q9. If you write CSS inside app.component.css, does it affect the entire application globally? a) Yes b) No, component CSS is "encapsulated" and only affects that specific component. Answer: b) No, it only affects that component.

11. Interview Questions #

• Q: Explain the difference between package.json and angular.json.

• Q: Why doesn't an Angular application have multiple HTML files (like about.html, contact.html) in its root folder? (Answer: Because it is a Single Page Application. It uses JavaScript to swap out components within the single index.html file).

12. Summary #

While the Angular workspace looks intimidating initially, it is beautifully organized. The root folder handles configurations and dependency tracking. The src folder holds global assets and environments. And the src/app folder acts as the canvas where you will construct your Component hierarchy.

13. Next Chapter Recommendation #

Before we can write Angular Components, we must understand the language they are written in. In Chapter 4: TypeScript Basics for Angular, we will take a crash course in TypeScript, exploring static typing, Classes, and Interfaces.