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"
        }
      }
    }
  }
}

This excerpt is simplified. Older workspaces use the builder name @angular-devkit/build-angular:application, which behaves the same way. prefix sets the selector prefix used by ng generate, so generated components get selectors like app-hero-list.

TypeScript and strictness

New projects enable strict TypeScript and strict template checking. Keep these on: they catch typos in templates and wrong input types at build time instead of in the browser.

{
  "compilerOptions": {
    "strict": true,
    "noImplicitReturns": true
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Environment values

To use different values per build, run ng generate environments. It creates files in src/environments and adds a fileReplacements entry to angular.json, so the development build swaps in environment.development.ts:

// src/environments/environment.ts
export const environment = {
  apiUrl: 'https://api.example.com',
};

Import it with import { environment } from '../environments/environment';. Everything in these files ends up in the browser bundle, so never put secrets there.

Organizing a growing app

The official style guide recommends grouping files by feature rather than by type:

src/app/
  core/
    auth.service.ts
  heroes/
    hero-list.ts
    hero-list.html
    hero-detail.ts
    hero.service.ts
    heroes.routes.ts
  shared/
    ui/
      button.ts

Other conventions worth following:

• Use kebab-case file names and keep one component, service or directive per file.
• Keep a component's TypeScript, template, styles and tests side by side with the same base name.
• Prefer inject() over constructor parameters for dependencies.
• Mark members used only by the template as protected, and inputs and signals as readonly.
• Recent CLI versions drop the .component and .service suffixes from generated names; either style works, but be consistent within a project.

Summary

• main.ts bootstraps the root component with providers from app.config.ts.
• angular.json configures build, serve and test targets; public/ holds static files.
• Keep strict TypeScript and template checking enabled.
• Use ng generate environments for per-build values and organize code by feature.