Angular Project Structure Explained

A new Angular project contains a lot of files. You do not need to understand all of them on day one, but knowing the handful that matter will make everything later feel less mysterious. This lesson is a tour.

What you will learn

• What the main folders and files do
• How the browser's first request turns into your component on screen
• Which files you will edit most often

The top level

• src/ holds your application's source code. Most of your work happens here.
• public/ holds static files, such as the favicon, that are copied as they are.
• package.json lists your dependencies and the npm scripts, such as npm start and npm test.
• angular.json tells the CLI how to build, serve and test the project.
• tsconfig.json files configure the TypeScript compiler.
• node_modules/ contains downloaded libraries. You never edit it, and you do not commit it to Git.

Inside src

• index.html is the single HTML page that the browser loads.
• main.ts starts the application.
• styles.css contains global styles that apply to the whole app.
• app/ contains your components and other code.

Inside src/app

The CLI names files after what they contain, without a repeated "component" suffix:

• app.ts is the root component class, named App.
• app.html is its template.
• app.css is its styles.
• app.spec.ts is its test.
• app.config.ts holds application-wide settings.
• app.routes.ts is the list of pages, which is empty until you add routes.

How the pieces connect

Open src/index.html. In the body there is a single custom tag:

<app-root></app-root>

That tag is a placeholder. Now open src/main.ts:

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

bootstrapApplication starts Angular with the App component and the settings from appConfig. Angular finds <app-root> on the page because App declares that name as its selector, and it draws the component's template there.

Now open src/app/app.ts:

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

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

The @Component decorator links the class to its selector, template and styles. The imports list names other components or tools that this template is allowed to use. You will use that list constantly.

Finally, open src/app/app.config.ts:

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

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

This is where you switch on application-wide features. Routing is enabled here with provideRouter. Later you will add provideHttpClient() to this list to call APIs.

The path of a page load

1. The browser loads index.html, which contains <app-root>.
2. The build tools have added the compiled JavaScript, which starts at main.ts.
3. main.ts bootstraps App using appConfig.
4. Angular draws app.html inside <app-root>.

Try it yourself

1. Add console.log('App started') to the constructor of App (write constructor() { console.log('App started'); }) and find the message in your browser's developer tools.
2. Open package.json and find the script that runs ng serve.
3. Open angular.json and find the place where the build output folder is set.

Quick check

1. Which file starts the application?
2. What does the selector of a component decide?
3. Where do you enable application-wide features such as routing?

Next, create your own component in Your first Angular component. For a full reference of the workspace, see the Angular documentation.