# Proposal: revising SharedModule pattern

https://hackmd.io/@lacolaco/Byj4jvDN_

## TL;DR
I think the current `SharedModule` pattern written in the Style Guide is not recommendable for business-level apps commonly.

Here is a revising proposal:

- Recommend to **Consider** to separate shared module as a library (`ng g lib shared`)
- Recommend to **Avoid** to place declarations in `SharedModule` directly.
- Recommend to **Consider** to separate declarations to featured modules and re-exports them in `SharedModule`. (barrel-like)

## Context

[Angular \- Angular coding style guide](https://angular.io/guide/styleguide#overall-structural-guidelines)

- SharedModule
- is
- a pattern for packaging app-wide reusable declarations
- imported from feature modules
- at `src/app/shared/shared.module.ts`
- cons
- Easy to get started making reusable components/directives/pipes in apps.
- Reduced `imports` lines in AppModule and feature modules.

- pros
- Shared codes **CAN** depend on files in feature module accidentialy.
- via `import {} from '../../feature/...'`
- Dependency restriction is needed (nrwl/Nx)
- `SharedModule` easily will be huge.
- If it is reusable, it can be a library
- Angular CLI has `ng g lib`.
- Is `SharedModule` used in Google?

## Goals

- Style guide should be a helpful guide for new Angular developers to make ❤️-able apps for their business.

## Proposal

Recommend to **Consider** separation as `lib/shared` rather than `shared` directory in `app`.

- Separation of Concerns
- Easy to restrict dependency direction
- Bonus: build cache

And in mid-scale apps, single `SharedModule` will be too large to maintain soon.


So recommend to **Avoid** to declare them in `SharedModule` directly. Instead, recommend to **Consider** to separate declarations to multiple featured NgModules. Then `SharedModule` has only `exports`, It is a barrel like `index.ts`.

import { FilterTextModule } from './filter-text/filter-text.module';
			 
@NgModule({
    exports: [
        CommonModule, 
        ReactiveFormsModule, 
        FilterTextModule,
        ...
    ]
})
export class SharedModule {}