Angular Components vs Modules
Fast recall
Quick revision
Core answer
Whether you understand components as UI units and modules as organizational/DI containers — and that a module declares and groups components rather than rendering anything itself.
Thinking a module 'is a bigger component' or that modules render UI — modules organize; components render.
A component is a UI unit (class+template+styles); a module is a container that groups components/directives/services and wires DI. Components render; modules organize.
Interview-ready guide
Interview answer
A component and a module are different things in Angular.
A component is a reusable UI building block — a TypeScript class with a template and styles that controls a patch of the screen. A module, or NgModule, is an organizational container that groups related components, directives, and services and tells the compiler how to wire dependency injection. The key distinction is that components render UI; modules don't render anything, they organize and configure.
Every Angular app has a root module, AppModule, that bootstraps the app, and a root component, AppComponent, that hosts the view tree.
A common mistake is thinking a module is a bigger component or that modules render UI — they don't. The analogy is bricks versus boxes: components are the bricks; modules are the boxes that group them and declare which bricks belong together.
Angular Components vs Modules
Direct Answer
A component is a reusable UI building block — a TypeScript class + template + styles that controls a patch of the screen. A module (NgModule) is an organizing container that groups related components, directives, and services and configures the DI compiler. Components are the bricks; modules are the boxes that group bricks and declare which bricks belong together. Every Angular app has at least a root module (AppModule) that bootstraps the app, and a root component (AppComponent) that hosts the view.
Code Example
// COMPONENT: a UI unit (class + template + styles).
@Component({
selector: 'app-hero',
template: `<h2>{{hero.name}}</h2>`,
})
export class HeroComponent {
hero = { name: 'Spider-Man' };
}
// MODULE: an organizer that DECLARES components and PROVIDES services.
@NgModule({
declarations: [HeroComponent, AppComponent], // components belong here
imports: [BrowserModule], // other modules used
providers: [{ provide: HeroService }], // services for DI
bootstrap: [AppComponent], // root component
})
export class AppModule {}
// The module doesn't render; the components it declares do.
Common Mistakes & Pitfalls
- Thinking a module renders UI — it doesn't; it groups components and wires DI.
- Forgetting to declare a component in a module, causing 'not a known element' errors.
- Putting a component in providers (it's not a service) or a service in declarations.
Check your understanding
Answer these without looking back at the article.
- What is a component, and what three things does it pair together?
- What is a module for, and does it render UI?
- What is the root module and root component of an Angular app?
- What goes in declarations vs providers in a module, and what happens if you mix them up?
Looking for a structured roadmap?
Every module on this page is also part of the full Java backend interview track.