Angular NgModules: Organizing Legacy Code
Think of an NgModule as a shipping container for related features, bundling components, directives, and pipes. You'll find them organizing code in older Angular apps.
Why it exists
Before standalone components, Angular needed a way to organize code and manage the compiler's context. NgModules were created to group related components, directives, and pipes, defining a "compilation context" for their templates and managing dependency injection scopes.
The mental model
An NgModule is like a manifest or a package. It tells Angular, "Here is a collection of related building blocks. Here is what they need from other packages (imports), and here is what they offer to other packages (exports)." It creates a boundary, preventing naming collisions and managing dependencies explicitly.
How it works
You use the @NgModule decorator on a class, which takes a metadata object. The main properties are: declarations lists the components, directives, and pipes that belong exclusively to this module. imports brings in other modules or standalone components needed by the declared items. exports makes items from this module available to other modules that import it. Finally, providers registers services for dependency injection within the module's scope.
When to use it
Primarily, you'll work with NgModules when maintaining or extending older Angular applications (pre-v14) that are built around this pattern. They are essential for understanding how legacy Angular code is structured, compiled, and how its dependencies are resolved. A component must be marked standalone: false to be declared in an NgModule.
When not to use it
For all new Angular applications, use standalone components. The Angular team officially recommends this approach as it simplifies architecture, reduces boilerplate, and makes dependency management more direct. Avoid creating new NgModules unless required for legacy library compatibility.
One canonical example
Imagine a UserProfileModule. It would declare ProfileComponent and AvatarComponent in its declarations array. It might import Angular's FormsModule in its imports array to handle a user settings form. It would then export ProfileComponent in its exports array so other parts of the app can use it. This creates a self-contained, reusable feature unit.
Interview question
Which statement accurately describes the function of an NgModule's exports array?
- a.It registers services for dependency injection within the module's scope.
- b.It specifies other modules or standalone components that this module requires.
- c.It makes specific items from this module available for use by other modules that import it.Correct
- d.It lists the components, directives, and pipes that are used exclusively within this module.
Why? this is the answer
The 'exports' array is used to make components, directives, or pipes declared within the NgModule available for use by other NgModules that import it. The other options describe the functions of 'declarations', 'imports', and 'providers' respectively.
Just read this? Test yourself on what you have been reading.
Read the original → angular.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on angular — each one lists the topics its interview covers.
See open roles