Siget Angular 21 Project Structure and File Overview

Siget follows the standard Angular CLI project layout with a flat root and all application source under src/. The project is intentionally minimal — there are no feature modules, lazy-loaded routes, or shared libraries to navigate around. Every file has a clear, single responsibility, making it straightforward to understand what lives where and to extend the project in any direction you choose.

Directory Tree

siget/
├── src/
│   ├── app/
│   │   ├── app.ts          # Root component
│   │   ├── app.html        # Root component template
│   │   ├── app.scss        # Root component styles
│   │   ├── app.config.ts   # Application config (providers)
│   │   ├── app.routes.ts   # Route definitions
│   │   └── app.spec.ts     # Unit tests for root component
│   ├── index.html          # HTML entry point
│   ├── main.ts             # Application bootstrap
│   └── styles.scss         # Global styles
├── public/
│   └── favicon.ico
├── angular.json            # Angular CLI workspace config
├── package.json
├── tsconfig.json           # Base TypeScript config
├── tsconfig.app.json       # App-specific TS config
└── tsconfig.spec.json      # Test-specific TS config

Key Files

src/main.ts — Application Bootstrap

main.ts is the entry point for the Angular application. It calls bootstrapApplication from @angular/platform-browser, passing the root App component and the appConfig object that provides the application’s global services and router.

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

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

This is the standalone bootstrap pattern introduced in modern Angular — there is no AppModule or platformBrowserDynamic().bootstrapModule() call. The entire application configuration is expressed through the ApplicationConfig object in app.config.ts.

src/app/app.ts — Root Component

app.ts defines the root App component. It is a standalone component (no NgModule required) that imports RouterOutlet to render the active route’s component. The component title is managed as a signal — Angular 21’s built-in reactive primitive.

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})
export class App {
  protected readonly title = signal('siget');
}

Key points:

imports: [RouterOutlet] — standalone components declare their own dependencies; no shared module needed.
signal('siget') — the title is a signal, not a plain property, demonstrating Angular’s fine-grained reactivity model.
selector: 'app-root' — matches the <app-root> element in src/index.html.

src/app/app.config.ts — Application Configuration

app.config.ts exports the ApplicationConfig object consumed by bootstrapApplication. This is where application-wide providers are registered — the equivalent of AppModule’s providers array in the older NgModule pattern.

import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

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

provideBrowserGlobalErrorListeners() — registers global error handlers for the browser environment, surfacing unhandled errors and promise rejections to Angular’s error handling pipeline.
provideRouter(routes) — registers the Angular Router with the application’s route definitions. Adding additional router features (e.g., withComponentInputBinding(), withViewTransitions()) is done by passing extra features to this call.

src/app/app.routes.ts — Route Definitions

app.routes.ts exports the Routes array that is passed to provideRouter. In the starter template, the array is intentionally empty — it is the clean slate you populate with your application’s navigation structure.

import { Routes } from '@angular/router';

export const routes: Routes = [];

To add your first route, import your component and add an entry:

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
  { path: '', component: HomeComponent }
];

angular.json — Angular CLI Workspace Configuration

angular.json is the Angular CLI workspace configuration file. It defines the three architect targets for the siget project:

Target	Builder	Purpose
`build`	`@angular/build:application`	Compiles the app; entry point is `src/main.ts`
`serve`	`@angular/build:dev-server`	Starts the dev server; defaults to `development` config
`test`	`@angular/build:unit-test`	Runs Vitest unit tests

Notable configuration values:

{
  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  },
  "architect": {
    "build": {
      "builder": "@angular/build:application",
      "options": {
        "browser": "src/main.ts",
        "tsConfig": "tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "styles": ["src/styles.scss"]
      }
    }
  }
}

"style": "scss" in schematics ensures that ng generate component creates .scss style files automatically.
"inlineStyleLanguage": "scss" enables SCSS for inline styles defined directly in the @Component decorator.
The production build enforces size budgets: 500 kB warning and 1 MB error for the initial bundle, and 4 kB warning / 8 kB error per component style.

tsconfig.json — Base TypeScript Configuration

The base tsconfig.json applies to the entire workspace and enforces a strict TypeScript configuration. Project-specific overrides live in tsconfig.app.json (application compilation) and tsconfig.spec.json (test compilation).Key compiler options enabled:

Option	Value	Effect
`strict`	`true`	Enables all strict type-checking flags
`noImplicitOverride`	`true`	Requires `override` keyword on overriding members
`noImplicitReturns`	`true`	Errors on functions that don’t always return a value
`noFallthroughCasesInSwitch`	`true`	Errors on switch-case fallthrough
`strictTemplates`	`true`	Full type-checking inside Angular HTML templates
`strictInjectionParameters`	`true`	Errors on unresolvable injection parameters
`target`	`ES2022`	Outputs modern JavaScript with native class fields
`module`	`preserve`	Preserves module syntax for bundler processing

src/index.html — HTML Entry Point

index.html is the single HTML page served by the application. The Angular CLI injects compiled script and style tags into this file at build time. The <app-root> element is the mount point for the root App component.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Siget</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>

The <base href="/"> tag is required by Angular Router to correctly resolve relative URLs for client-side navigation.

TypeScript Configuration Files

Siget uses a three-file TypeScript configuration split, which is the Angular CLI standard:

File	Extends	Purpose
`tsconfig.json`	—	Base options shared across the whole workspace
`tsconfig.app.json`	`tsconfig.json`	Compiler options specific to the application build
`tsconfig.spec.json`	`tsconfig.json`	Compiler options specific to Vitest test files

This split allows the test environment to include type definitions (e.g., for Vitest globals) that would otherwise pollute the application compilation.

Get Started

Development

Testing

Building & Deploying

Siget Angular 21 Project Structure and File Overview

Directory Tree

Key Files

TypeScript Configuration Files

Build docs developers (and LLMs) love

Get Started

Development

Testing

Building & Deploying

Documentation Index

​Directory Tree

​Key Files

​TypeScript Configuration Files

Build docs developers (and LLMs) love

Directory Tree

Key Files

TypeScript Configuration Files