Angular - 2-5 Understand the role of AppModule reporting and component

In the previous lesson we created our own server component, and now it is almost ready to use. To actually use it, we still need to register it in the application module. Angular uses modules to group together related building blocks — components, directives, services and pipes. Small and medium projects often live with a single root AppModule, but bigger applications usually split features into several modules.

What @NgModule declares

The AppModule itself is an empty TypeScript class turned into something special by the @NgModule decorator imported from @angular/core. The decorator receives a configuration object with four key properties:

  • declarations — every component, directive and pipe that belongs to this module. Angular does not scan files for you, so anything missing here triggers a compile error.
  • imports — other modules whose features you want to reuse, such as BrowserModule, FormsModule or HttpClientModule.
  • providers — services made available through dependency injection, covered later in the course.
  • bootstrap — the root component Angular mounts when the application starts. AppComponent is the only entry here, the one Angular looks for in index.html.

Adding a new component file is therefore not enough. You also have to add a proper TypeScript import at the top of app.module.ts (without the .ts extension — webpack bundles the files) and list the class in declarations. If you skip this step, the recompilation triggered by saving the file fails with a message in the terminal saying that the server component cannot be found.

import { ServerComponent } from './server/server.component';

@NgModule({
  declarations: [AppComponent, ServerComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

The imports array also lets you bring in other Angular modules. The framework itself is split into several modules — BrowserModule gives you the core features needed to start the application, and the forms and HTTP modules expose dedicated APIs that we will revisit later. With our server component now properly declared, we are finally ready to use it in the next lesson.

Summary

This lesson explains the role of Angular's AppModule and how it manages your application components. You'll learn that Angular requires components to be explicitly registered in the AppModule's declarations array—simply creating the file isn't enough. Additionally, you must import the component class so TypeScript can locate and bundle it correctly during the build process.

Key points

  • AppModule is a decorator class that groups application functionalities and tells Angular what features are available
  • Components must be registered in the AppModule's declarations array for Angular to recognize them
  • TypeScript imports are essential—without importing the component, TypeScript cannot find it during compilation
  • The bootstrap property specifies which component Angular renders when the application starts
  • Webpack automatically handles file extensions, so omit .ts when importing components (e.g., import from './server' not './server.ts')
  • Built-in modules like FormsModule and HttpClientModule are imported into AppModule to provide additional functionality

FAQ

Why do I need to register a component in AppModule even after creating the file?

Angular doesn't automatically scan all files in your project. Without explicitly registering a component in the declarations array, Angular won't know it exists. You must tell Angular about each component you want to use.

What error occurs if I forget to import the component class?

TypeScript will throw a compilation error because it cannot find the component class. You must add an import statement (e.g., `import { ServerComponent } from './server'`) to reference the component and allow webpack to bundle it.

What's the difference between declarations and bootstrap in NgModule?

Declarations register all components belonging to the module so Angular knows about them. Bootstrap specifies which component Angular should render first when the application starts—typically the root AppComponent.