Project Structure

A new Angular project follows a predictable layout. Knowing what each file does makes it easier to configure builds, add features and find your way around other people's projects.

The workspace at a glance

my-app/
  angular.json          workspace and build configuration
  package.json          dependencies and npm scripts
  tsconfig.json         shared TypeScript settings
  tsconfig.app.json     settings for application code
  tsconfig.spec.json    settings for test files
  public/               static files copied as-is (favicon, images)
  src/
    index.html          the single HTML page
    main.ts             application entry point
    styles.css          global styles
    app/
      app.ts            root component
      app.html          root component template
      app.css           root component styles
      app.spec.ts       root component test
      app.config.ts     application-wide providers
      app.routes.ts     route definitions

Older projects may have an src/assets folder instead of public, and component files with a .component suffix. Projects created with --ssr also contain server.ts, src/main.server.ts, app.config.server.ts and app.routes.server.ts.

Bootstrapping: main.ts and app.config.ts

main.ts starts the application by bootstrapping the root component with an application configuration:

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));

app.config.ts lists the providers available to the whole app. This is where you register the router, HttpClient and other features. The generated file may already include other providers, such as change detection settings; keep those and add your own next to them:

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { routes } from './app.routes';

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

angular.json

angular.json describes the projects in the workspace and the targets the CLI can run, such as build, serve and test. Each target has a builder, default options and named configurations:

{
  "projects": {
    "my-app": {
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "browser": "src/main.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [{ "glob": "**/*", "input": "public" }],
            "styles": ["src/styles.css"]
          },
          "configurations": {
            "production": { "outputHashing": "all" },
            "development": { "optimization": false, "sourceMap": true }
          },
          "defaultConfiguration": "production"
        }
      }
    }
  }
}