ReviseAlgo Logo

Fundamentals

Project Structure

Master Angular Workspace Project Structure, covering src folders configurations, config files (angular.json, tsconfig.json), and assets mappings.

Last Updated: July 15, 2026 • 10 min read

1. Learning Objectives

In this lesson, you will explore the workspace structure of an Angular application. By the end of this topic, you will be able to:

  • Navigate the files and folders in a standard Angular workspace.
  • Explain the role of the src/ directory as the source code container.
  • Modify the angular.json file to configure assets, styles, and scripts.
  • Understand the roles of tsconfig.json and package.json.
  • Organize static assets in the assets/ folder.

2. Overview

An Angular project workspace is organized into directories and configuration files. It uses a structured layout (with source code inside src/ and configurations in the root directory) to keep code clean, modular, and easy to maintain.

3. Why This Topic Matters

Understanding workspace configuration files helps you configure builds and include third-party libraries correctly:

  • Unlinked Static Assets: If you place images or other static files outside the assets/ folder, or forget to register the folder in angular.json, the build compiler will ignore these files, causing broken links in production.
  • TypeScript Configuration Errors: Modifying paths incorrectly inside the root tsconfig.json can break compiler imports or trigger type errors.

4. Real-World Analogy

Think of an Angular workspace project layout like **a restaurant kitchen operations layout**:

  • The Kitchen (src/ folder): The active cooking area where food is prepared (source files, HTML templates, logic classes).
  • The Fridge (assets/ folder): The storage area for ingredients (static images, local fonts, data files).
  • The Recipe Book (package.json): The list of required ingredients and tools you need to order from suppliers (dependencies packages).
  • The Kitchen Blueprint (angular.json): The master blueprint showing where the stove, sink, and prep stations are located, and how the kitchen runs (assets and styling pathways configuration).

5. Core Concepts

An Angular workspace relies on several key files and folders:

  • src/app: Contains the application's components, services, and modules.
  • src/assets: Contains static assets (images, fonts, local data files) that are copied directly to the build folder.
  • angular.json: The workspace configuration file. Specifies build targets, style configurations, and assets locations.
  • package.json: Declares external library dependencies and run scripts.
  • tsconfig.json: Defines compiler options for TypeScript.
File Name Primary Role Common Edit Trigger
angular.json Workspace build configurations. Adding third-party CSS files (like Bootstrap) or assets directories.
package.json Npm library dependencies tracking. Installing new packages or configuring custom build scripts.
main.ts Bootstraps the root component. Seldom edited (sets up initial boot settings).

6. Syntax & API Reference

Below is a sample build configuration structure inside angular.json:

7. Visual Diagram

This diagram displays the directory structure of a standard Angular workspace:

8. Live Example — Full Working Code

Below is the typical file hierarchy generated by the CLI:

9. Interactive Playground

Try It Yourself Challenges:

  1. Locate the assets array in angular.json to see where static files are configured.
  2. Look at package.json and identify the dev dependencies vs production dependencies.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Unregistered static resources folder Placing a static assets folder in the project but forgetting to register it in angular.json, causing the files to be ignored during compilation. Images placed in src/images/ without registration. Place images in src/assets/, or register custom folders in angular.json.

11. Best Practices

  • Store static resources in the assets/ folder: Store all static resources (like images, fonts, local JSON files) in the src/assets/ directory.
  • Keep configurations separate: Do not add custom configuration variables directly to angular.json. Use environment files instead to manage environment settings.
  • Follow styling rules consistently: Set your styling preferences in angular.json (e.g. configuring SCSS globally) to ensure consistency across the workspace.

12. Browser Compatibility/Requirements

The workspace structure is parsed during compilation by Node.js. Browser compatibility is determined by the compiled CSS and JS files, which are output to the dist/ folder.

13. Interview Questions

🟢 Q1: What is the main purpose of the angular.json configuration file?

Answer: The angular.json file contains the workspace configuration settings. It tells the Angular CLI where files are located, how to compile them, and how to configure build targets, assets pathways, and global style and script imports.

14. Debugging Exercise

Identify and fix the configuration error in this angular.json block:

View Solution

Diagnosis: The path for Bootstrap is invalid because it is missing the leading dot-slash (./) required to resolve paths from the workspace root. Without the correct relative prefix, the build compiler cannot find the file inside node_modules.

Fixed setting:

15. Practice Exercises

Exercise 1: Registering a custom styling sheet

Create a new CSS stylesheet named `theme-variables.css` inside `src/`. Register it in `angular.json` styles list array so it compiles globally.

16. Scenario-Based Challenge

The Multi-Theme Inclusions Challenge:

Your company requires compiling two separate product site bundles (Product A and Product B) from a single codebase. Product A needs an Indigo theme, while Product B needs a Red theme. Outline an implementation plan using the projects build targets inside angular.json to configure these separate builds.

17. Quick Quiz

Q1: Where in the project should you store static assets (like images or fonts)?

A) src/app

B) src/assets

C) node_modules

Answer: B — Static files should be stored inside src/assets to ensure they are copied to the build folder during compilation.

18. Summary & Key Takeaways

  • • Source code files are located in the src/ directory, while configuration files are stored in the workspace root.
  • • The angular.json configuration file specifies build settings and links static assets and global stylesheets.

19. Cheat Sheet

Configuration File Key Purpose
tsconfig.json Defines TypeScript compiler options and sets path mappings.