Angular › NgModules & Modular Architecture

What is the SharedModule pattern, and is it still relevant with standalone components?

Beginner

Answer

A SharedModule traditionally grouped together commonly reused components, directives, and pipes that many different feature modules needed, avoiding the need to import each one individually everywhere. With standalone components, this same idea is often achieved more simply by just importing the specific standalone pieces directly wherever they are actually needed.

// Traditional SharedModule pattern
@NgModule({
  declarations: [ButtonComponent, LoadingSpinnerComponent],
  exports: [ButtonComponent, LoadingSpinnerComponent]
})
export class SharedModule {}

// With standalone components, simply import what you need directly
@Component({ standalone: true, imports: [ButtonComponent, LoadingSpinnerComponent] })

Real-world example An older Angular project keeps a SharedModule bundling their common button and spinner components together, while a newer project built with standalone components simply imports those exact same reusable components directly wherever they are needed.

Common follow-ups: Does the standalone approach reduce unnecessary code being included in a final bundle compared to a SharedModule?;How would you migrate an existing SharedModule's contents to standalone components?

Standalone Components;Angular Style Guide & Best Practices