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.