Reading the Generated Project Structure

An Angular workspace is a container for one or more projects. When you run ng new, you get a workspace with a single application project. Understanding the structure helps you navigate and organize code effectively.

Top-Level Files

my-app/
├── angular.json          # Workspace build configuration
├── package.json          # Dependencies and npm scripts
├── package-lock.json     # Locked dependency versions
├── tsconfig.json         # Base TypeScript configuration
├── tsconfig.app.json     # App-specific TS overrides
├── tsconfig.spec.json    # Test-specific TS overrides
├── .editorconfig         # Editor formatting rules
├── .gitignore            # Git ignore rules
├── README.md             # Project documentation
└── src/                  # Application source code

The src/ Folder

src/
├── index.html            # Entry HTML — contains <app-root>
├── main.ts               # Bootstrap — starts the Angular app
├── styles.css            # Global styles
├── favicon.ico           # Browser tab icon
├── assets/               # Static files (images, fonts, JSON)
│   └── .gitkeep
└── app/                  # Application code
    ├── app.component.ts      # Root component class
    ├── app.component.html    # Root component template
    ├── app.component.css     # Root component styles
    ├── app.component.spec.ts # Root component tests
    └── app.config.ts         # Application configuration

Key Files Explained

index.html — The single HTML page of your SPA:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

main.ts — The entry point that bootstraps the app:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

app.config.ts — Application-level providers:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

Angular uses several configuration files at the project root. Each serves a distinct purpose.

angular.json

The workspace configuration file. Defines:

• Project names and root folders
• Build targets (build, serve, test, lint)
• Asset globs and style/script paths
• Configuration overrides per environment

tsconfig.json (Base)

{
  "compileOnSave": false,
  "compilerOptions": {
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "experimentalDecorators": true,
    "moduleResolution": "bundler",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "lib": ["ES2022", "dom"]
  }
}

Key settings for Angular:

• strict: true — enables all strict type-checking options
• experimentalDecorators: true — required for Angular decorators
• moduleResolution: "bundler" — modern module resolution for Angular
• target: "ES2022" — modern JavaScript output

tsconfig.app.json

Extends the base config for the application:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": ["src/main.ts"],
  "include": ["src/**/*.d.ts"]
}

tsconfig.spec.json

Extends the base config for tests:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jasmine"]
  },
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

package.json Scripts

{
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  }
}

.editorconfig

Ensures consistent formatting across editors:

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true