Contenido del Curso
Introduction to Angular
Introduction to Angular
Introduction to Modules in Angular
Picture yourself building an app. At first, it's just a single file — like main.ts. But as you go, you start adding more: components, services, styles, logic, data handling, authentication, and so on.
Sooner or later, things start to get messy — it's hard to tell what's being used where or how everything connects.
That's when modularity becomes your best friend.
What is a Module in Angular?
A module is a way to group related parts of your app into separate, manageable blocks that are easy to maintain, reuse, and test.
Think of a module as a box where you keep everything related to a specific feature. For example, all user-related stuff might go into a UserModule.
In Angular, a module is just a class marked with the @NgModule decorator, like this:
app-component
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], // Components, directives, pipes imports: [BrowserModule], // Other modules providers: [], // Services bootstrap: [AppComponent] // Root component }) export class AppModule {}
Here's what each part does:
declarations– lists the components, directives, and pipes that belong to this module;imports– brings in other modules this one depends on (likeBrowserModulefor DOM access);providers– declares services (for dependency injection) available in this module;bootstrap– defines the main component to load when the app starts (usuallyAppComponent).
Basically, a module defines what it takes in (its dependencies), what it makes available to other modules, and so on.
Any components that interact with this module can use the services and other resources it provides.
Why We're Not Using Modules Right Now
Starting with Angular 14, there's a new alternative — standalone components.
These let you create and use a component without putting it into a module at all. We've actually been using them throughout our project, and they look like this:
task-component
@Component({ selector: 'app-task', imports: [HighlightOnCompleteDirective, FormatTitlePipe, MatIconModule], templateUrl: './task.component.html', styleUrl: './task.component.css' }) export class TaskComponent {}
This is a standalone component — which means it doesn't need to be listed in any NgModule under declarations. Instead, you bring in everything it needs (like directives, pipes, or other modules) directly through the imports property inside the component itself.
This makes your project's structure lighter and more flexible — especially useful for small apps or isolated feature blocks.
We'll dive deeper into standalone components later in this section.
Even though newer Angular projects don't require modules, you'll still run into them often:
Older enterprise apps are entirely built using modules;
Lots of tutorials, docs, and examples are still written with
NgModule;Some third-party libraries and UI frameworks still use the module-based approach.
That's why we'll spend a bit of time learning how NgModule works — so you can read and maintain older codebases with confidence.
1. What is the main purpose of a module in Angular?
2. What is usually included in the @NgModule decorator?
¡Gracias por tus comentarios!
