File & Folder Structure - Entry Points, Config Files

Importance of File & Folder Structure

Understanding file and folder structure is necessary to:

  1. Know where to write new code
  2. Know where configuration changes happen
  3. Understand code execution flow

This is required for every technology (Angular, React, Vue, etc.)

Without understanding architecture and structure, expertise is not possible


Types of Files in an Angular Project

Sensitive files

  1. Small changes can cause large impact

Less important files

  1. Rarely used
  2. Presence or absence usually does not affect the project


Entry Points in Angular

Angular has two entry points

  1. HTML entry point: index.html
  2. TypeScript entry point: main.ts


package.json

  1. Most important file in the project
  2. Contains project metadata
  3. Project will not run if this file is deleted or renamed
  4. Includes:
  5. Project name
  6. Project version
  7. Scripts to run, build, and test the project
  8. Installed libraries
  9. Version field is used for release management


Dependencies

  1. dependencies
  2. Required for the application to run
  3. devDependencies
  4. Required only during development
  5. Example: TypeScript
  6. TypeScript is converted to JavaScript during build
  7. Browsers can read only JavaScript, not TypeScript


TypeScript Configuration Files

tsconfig.json

  1. Main TypeScript configuration file
  2. Applies to the entire project
  3. Defines:
  4. ECMAScript target version
  5. Strictness rules
  6. Error and warning settings


tsconfig.app.json

  1. TypeScript configuration for the app folder
  2. Controls:
  3. Included files
  4. Excluded files
  5. Output location


tsconfig.spec.json

  1. Used for test cases
  2. spec refers to testing
  3. Contains TypeScript configuration for unit tests


Test Files

  1. Files containing .spec are related to unit testing
  2. Used for developer-level testing


README.md

  1. Project documentation file
  2. Contains:
  3. Commands to run the project
  4. Commands to generate components
  5. Build instructions
  6. Can be updated with project documentation


package-lock.json

  1. Automatically generated file
  2. Should not be edited manually
  3. Stores exact dependency versions
  4. Ensures same versions for all developers
  5. Prevents version mismatch in team projects


angular.json

  1. Main Angular configuration file
  2. Contains:
  3. Project root
  4. Source root
  5. Entry files
  6. Assets location
  7. Styles configuration
  8. Build settings
  9. Beginners usually do not change this file


node_modules

  1. Contains all installed libraries
  2. Created based on:
  3. dependencies
  4. devDependencies
  5. Includes nested dependencies of installed packages
  6. Not pushed to Git
  7. Can be recreated using npm install


public Folder

  1. Used for public assets such as:
  2. Favicon
  3. Images
  4. Extra CSS or JavaScript files
  5. Contains non-sensitive files


src Folder

  1. Contains all project source code
  2. All developer-written code exists inside this folder


app Folder

  1. Contains application components
  2. Example:
  3. App component
  4. Login component
  5. Profile component
  6. Components are created using Angular commands


index.html

  1. Main HTML file
  2. First file loaded in the browser
  3. Acts as the HTML entry point


main.ts

  1. Main TypeScript entry file
  2. Bootstraps the Angular application
  3. Loads the root component


styles.css

  1. Global CSS file
  2. Styles apply to all components in the project


App-Level Files

app.config.ts

  1. Application-level configuration file
  2. Contains Angular-specific configurations


app.component.ts

  1. Root component file
  2. Connects HTML and CSS with logic


app.routes.ts

  1. Defines application routes
  2. Used to register URLs such as:
  3. Home
  4. Login
  5. Profile


app.component.spec.ts

  1. Unit test file for App component


Git and Editor Files


.gitignore

  1. Specifies files and folders to ignore in Git
  2. Example: node_modules


.vscode

  1. Editor-specific settings
  2. Does not affect project execution


.editorconfig

  1. Controls code formatting
  2. Does not affect application behavior


.angular

  1. Stores cache and build-related data
  2. Used for performance optimization