Differences Between Component and Module in Angular

Module

NgModule is one of the first basic structures you meet when coding an app with Angular, but it’s also the most complex, because of different scopes.

Every Angular app has a root module, named AppModule, which provides the mechanism that launches the application.

NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules.

NgModules are shareable (independent) units in Angular apps. We have different types of modules:

• system (Router, etc)
• other modules
• custom modules
• third party modules (ngrx, rxjs, etc).

Modules in Angular can be lazy-loaded which means that they are loaded when needed, not always! Lazy loading significantly improves the performance of an Angular app.

Angular documentation has a FAQ about NgModules.

Component

A component controls a patch of the screen called a view.

It is the most basic building block of a UI in an Angular application. It comes as a directive with a special decorator (@Component) and template.

Component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated, and used at runtime.

Module vs Component

The module can be considered as a collection of components, directives, services, pipes, helpers, etc.

Each component can use other components, which are declared in the same module. To use components declared in other modules, they need to be exported from that module and the module needs to be imported into our module where we need that functionality.

One of many modules combines up to make an Application.

Tip:

Organizing your code into:

• distinct functional modules,
• smart / dumb-reusable components

helps in managing the development of complex applications.

For those who want more detailed explanations, there is a great post on Toptal, check it out here.