Modules

Every Angular app has at least one NgModule — a class that declares which components belong together and which outside pieces (like FormsModule or HttpClientModule) they're allowed to use.

The root module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { CartSummaryComponent } from './cart-summary.component';

@NgModule({
  declarations: [AppComponent, CartSummaryComponent],
  imports: [BrowserModule, FormsModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Four sections do four different jobs: declarations lists the components (and directives/pipes) this module owns; imports pulls in functionality from other modules — FormsModule is what makes ngModel from the Forms lesson work at all, HttpClientModule is what makes HttpClient injectable; and bootstrap names the root component Angular should mount when the app starts.

Why bother organizing code into modules

Every component you declare has to live in exactly one NgModule's declarations array — Angular uses that to know which components, directives, and pipes are allowed to reference each other. A component declared in one module can't be used in another module's templates unless that first module explicitly exports it and the second module imports it. In a small app, that mostly means one root module holding everything; in a larger one, splitting features into their own modules (a UsersModule, an OrdersModule) keeps unrelated parts of the codebase from accidentally depending on each other.

@NgModule({
  declarations: [UserListComponent, UserDetailComponent],
  imports: [CommonModule],
  exports: [UserListComponent]
})
export class UsersModule {}

UserDetailComponent stays private to this module, usable only by other components declared here — but UserListComponent is explicitly exported, so any module that imports UsersModule can use <app-user-list> in its own templates.