Angular Architecture - Shared Module

🎯 Introduction

Shared Module will contain declarations for reusable components, directives, and pipes, as well as any common services that may be required by multiple feature modules. It may also export third-party modules, like Angular Material or ngx-translate, that are used throughout the application.

To use the Shared Module in other modules, it must be imported into each module that requires access to the shared components, directives, pipes, or services.

// Shared Module and export example
@NgModule({
  imports: [CommonModule],
  declarations: [
    MovieCardComponent,
    MovieBackdropColorDirective,
    MovieFilterPipe
  ],
  exports: [
    MovieCardComponent,
    MovieBackdropColorDirective,
    MovieFilterPipe,
    CommonModule,
    FormsModule,
    MatAutocompleteModule,
    MatInputModule,
    MatListModule,
  ],
})
export class SharedModule {}

// Shared Module import example
@NgModule({
    declarations: [
        ...MovieRoutingModule.components
    ],
    imports: [
        SharedModule,
        MovieRoutingModule,

    ],
    providers: [
        MovieResolver
    ]
})
export class MovieModule { }

Note: You could as well create your shared components as standalone components or export each component as it's own module.
But I believe that if you have a large number of shared components or your application is more complex, exporting shared components through a SharedModule is generally preferred as it's much easier to mantain.

🎯 The Benefits

It's usually a common requirement of many projects to have customized building blocks for the applications such as usual UI elements like buttons, dropdowns, alerts, cards, tables, checkboxes, text inputs, file inputs, select elements and so on.

One of the key benefits of using a SharedModule is that it allows you to consolidate your presentational dummy components, which can be treated as a 3rd party library project. This makes it easier to manage and reuse your components across multiple projects (if needed), as well as share them with other developers or teams.

You can easily update and test your components in isolation, and make changes without affecting the functionality of your main application.

So it's a great place to start writing your unit tests and use something like Storybook stories.

Although it can be tempting to skip unit testing, starting with the smaller parts like testing your presentational components can help you get in the habit and reap the benefits of more robust and reliable code.

Storybook is a powerful tool that enables you to:

• Develop and test your components independently of your main application
• Define multiple use cases for your components, providing a clearer overview of the various scenarios in which they can be utilize
• Document your components thoroughly
• Enhance communication between team members by providing a centralized location for component viewing and collaboration.