How to Create Module in Angular: Syntax and Example

In Angular, you create a module by defining a class decorated with @NgModule. This decorator takes metadata like declarations, imports, and exports to organize components and other modules.

Syntax

An Angular module is a class marked with the @NgModule decorator. Inside the decorator, you provide metadata:

• declarations: Components, directives, and pipes that belong to this module.
• imports: Other modules whose exported classes are needed.
• exports: Components, directives, or pipes that should be usable in other modules.
• providers: Services available in this module.
• bootstrap: The root component to bootstrap in the main module.

typescript

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [/* components, directives, pipes */],
  imports: [CommonModule],
  exports: [/* exported components */],
  providers: [/* services */],
  bootstrap: [/* root component for app module only */]
})
export class YourModuleName { }

Example

This example creates a simple Angular module named SharedModule that declares and exports a component called ExampleComponent. It imports CommonModule to use common Angular directives.

typescript

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<p>Hello from ExampleComponent!</p>`
})
export class ExampleComponent { }

@NgModule({
  declarations: [ExampleComponent],
  imports: [CommonModule],
  exports: [ExampleComponent]
})
export class SharedModule { }

Output

<p>Hello from ExampleComponent!</p>

Common Pitfalls

• Forgetting to add components to declarations causes Angular errors.
• Not exporting components if you want to use them outside the module.
• Including modules in imports that are not needed can bloat your app.
• Using bootstrap only in the root AppModule, not in feature modules.

typescript

import { CommonModule } from '@angular/common';
import { ExampleComponent } from './example.component';

/* Wrong: Component not declared */
@NgModule({
  declarations: [],
  imports: [CommonModule],
  exports: [ExampleComponent]
})
export class SharedModule { }

/* Right: Component declared and exported */
@NgModule({
  declarations: [ExampleComponent],
  imports: [CommonModule],
  exports: [ExampleComponent]
})
export class SharedModule { }

Quick Reference

Remember these key points when creating Angular modules:

• @NgModule decorates a class to define a module.
• declarations list components, directives, and pipes in this module.
• imports bring in other modules.
• exports make components usable outside this module.
• bootstrap is only for the root module.

Key Takeaways

Use @NgModule decorator to define an Angular module class.

Declare components in declarations and export them if needed outside.

Import CommonModule or other modules to use their features.

Only the root module should use bootstrap to start the app.

Avoid missing declarations or exports to prevent runtime errors.