Angular Shared Modules – Reusable UI & Utilities - Learn ANGULAR | Revochamp

Name: Angular Shared Modules – Reusable UI & Utilities
Availability: InStock
Author: Revochamp

The Shared Module Pattern

In a complex application like Revochamp, many feature modules need the same set of tools: standard buttons, loading spinners, custom date pipes, or third-party UI libraries like Angular Material. Instead of importing these into every single feature module, we create a Shared Module. As a Technical Lead, you use this pattern to maintain a 'Single Source of Truth' for your UI components and ensure consistency across the entire platform.

Imports vs. Exports

The unique characteristic of a Shared Module is that it exports what it imports. When a feature module imports the SharedModule, it automatically gains access to everything in the exports array, even if those items weren't declared locally in the Shared Module.

TypeScriptRead-only

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { CustomSpinnerComponent } from './spinner.component';

@NgModule({
  declarations: [CustomSpinnerComponent],
  imports: [
    CommonModule, 
    MatButtonModule
  ],
  exports: [
    CommonModule,         // Re-exporting for convenience
    MatButtonModule,      // Re-exporting UI library
    CustomSpinnerComponent // Re-exporting local UI component
  ]
})
export class SharedModule { }

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { CustomSpinnerComponent } from './spinner.component';

@NgModule({
  declarations: [CustomSpinnerComponent],
  imports: [
    CommonModule, 
    MatButtonModule
  ],
  exports: [
    CommonModule,         // Re-exporting for convenience
    MatButtonModule,      // Re-exporting UI library
    CustomSpinnerComponent // Re-exporting local UI component
  ]
})
export class SharedModule { }

What Belongs in SharedModule?

A well-architected Shared Module should only contain 'dumb' or 'presentational' items that don't rely on application state. If a component is highly specific to a business workflow, it belongs in a Feature Module, not Shared.

Reusable Components: Custom buttons, input wrappers, modal headers, and cards.
Directives: Tooltips, hover effects, or input masks.
Pipes: Currency formatters, date transformers, or string truncators.
Third-party Modules: Angular Material, FontAwesome, or NgCharts.

The 'No Providers' Rule

As an Architect, it is critical to avoid putting services in the providers array of a Shared Module. If a Shared Module with providers is imported by multiple lazy-loaded modules, each lazy module will get its own separate instance of the service, breaking the singleton pattern. Services should live in a CoreModule or use providedIn: 'root'.

Module Roles Comparison

Feature	Shared Module	Core Module	Feature Module
Components	Reusable / UI only	None (usually)	Domain specific
Services	Avoid (No providers)	Global Singletons	Feature specific
Imported by	Multiple Feature Modules	Root Module only	Root (Eager) or Router (Lazy)
Goal	DRY UI & Utilities	App-wide Infrastructure	Business Logic / Workflow

Test Your Knowledge

of 3

What is the primary purpose of the 'exports' array in a Shared Module?

To hide components from other modules

To make imported modules and local components available to other modules

To define backend API endpoints

To register global services

of 3

Why should you avoid putting 'providers' in a Shared Module that is lazy-loaded?

It causes a compilation error

It prevents the app from starting

It creates multiple instances of a service instead of a singleton

It makes the CSS stop working

of 3

Which of these is the most appropriate item to put in a Shared Module?

A login service with user credentials

The main admin dashboard layout

A reusable 'PrimaryButton' component

App routing configuration

Frequently Asked Questions

Does SharedModule make the app bundle larger?

No. Modern build tools use tree-shaking to ensure only the code you actually use is included. However, keep the SharedModule focused; if it becomes too large, consider splitting it into 'SharedUiModule', 'SharedPipesModule', etc.

Can I import SharedModule into the Root Module?

Yes, but you usually don't need to. The Root Module usually only needs the shell components. Feature modules are the primary consumers of SharedModule.

What is the difference between CommonModule and SharedModule?

CommonModule is an Angular-provided module with core directives (*ngIf, *ngFor). SharedModule is a custom module you create to group CommonModule and your own reusable assets together for easier importing.

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatButtonModule } from '@angular/material/button'; import { CustomSpinnerComponent } from './spinner.component'; @NgModule({ declarations: [CustomSpinnerComponent], imports: [ CommonModule, MatButtonModule ], exports: [ CommonModule, // Re-exporting for convenience MatButtonModule, // Re-exporting UI library CustomSpinnerComponent // Re-exporting local UI component ] }) export class SharedModule { }

Feature

Shared Module

Core Module

Feature Module

Components

Reusable / UI only

None (usually)

Domain specific

Services

Avoid (No providers)

Global Singletons

Feature specific

Imported by

Multiple Feature Modules

Root Module only

Root (Eager) or Router (Lazy)

Goal

DRY UI & Utilities

App-wide Infrastructure

Business Logic / Workflow

Test Your Knowledge

of 3

What is the primary purpose of the 'exports' array in a Shared Module?

To hide components from other modules

To make imported modules and local components available to other modules

To define backend API endpoints

To register global services

of 3

Why should you avoid putting 'providers' in a Shared Module that is lazy-loaded?

It causes a compilation error

It prevents the app from starting

It creates multiple instances of a service instead of a singleton

It makes the CSS stop working

of 3

Which of these is the most appropriate item to put in a Shared Module?

A login service with user credentials

The main admin dashboard layout

A reusable 'PrimaryButton' component

App routing configuration

Frequently Asked Questions

Does SharedModule make the app bundle larger?

Can I import SharedModule into the Root Module?

Yes, but you usually don't need to. The Root Module usually only needs the shell components. Feature modules are the primary consumers of SharedModule.

What is the difference between CommonModule and SharedModule?

Angular Shared Modules – Reusable UI & Utilities

Angular Shared Modules – Reusable UI & Utilities

The Shared Module Pattern

Imports vs. Exports

What Belongs in SharedModule?

The 'No Providers' Rule

Module Roles Comparison

Test Your Knowledge

Frequently Asked Questions

Need help?

Angular Shared Modules – Reusable UI & Utilities

Angular Shared Modules – Reusable UI & Utilities

The Shared Module Pattern

Imports vs. Exports

What Belongs in SharedModule?

The 'No Providers' Rule

Module Roles Comparison

Test Your Knowledge

Frequently Asked Questions

Need help?