CODEWITHSUNDEEP
angularmodulearchitecture
FlushBG
FlushBG

Reputation: 281

What should be included in Core, Shared and Feature modules?

I have read a lot of articles regarding this subject, but am still having trouble processing that matter. Sorry if it is a duplicate, regardless!

So basically, I am building an Angular app from scratch, and I want to organize my code as per the best convention. I have a core module, that currently includes a generic data access singleton service, and an auth service that uses it. What I can't grasp is, when should I make a feature module, and when that functionality belongs to the core module.

Core Module tree:

enter image description here

Auth, for example, sounds like app core, but in my case it would also include some declarations (components, etc.), and would probably need to import some UI atoms/molecules from a shared module. Does it deserve a feature module, imported directly in the root module? Should I let the core module export the auth module's declarations? Or should I separate the providers for auth (core module) and make another auth feature module (for the declarations)?

Same goes for layout module, modal module, etc.

Thanks!

Upvotes: 9

Views: 9813

Answers (1)

Jobayer Ahmmed
Jobayer Ahmmed

Reputation: 2076

For small size app, you need not to consider this. But if the app is large enough, you can modularize your app.

For large apps with lots of routes, you may consider lazy loading. Lazy loading will help keep initial bundle size smaller, that means only core module will be loaded at first when the app get loaded. It will reduce initial loading time of your app.

Core Module

  • This module gets loaded with the app.
  • Will contain singleton items - items that will be instantiated only once throughout the app or used in only one place.
  • Will be imported only once by AppModule, no other feature module will import this module.

You may put the following items in core module (you may put others if you see fit).

  • models: models that are used in several feature modules.
  • components: authentication, profile, header, footer, layout, home, error, dialog etc.
  • services: singleton services that will be used by several feature modules, i.e. log, storage, shared, modal, authentication, file, spinner etc.

To guard against re-importing of core module by other feature module, you can add the following constructor in CoreModule:

constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
        throw new Error(
            'CoreModule is already loaded. Import it in the AppModule only.');
    }
}

Shared Module

  • contains commonly used directives, pipes and components that are re-used and referenced by components of feature modules
  • imported by core module and other feature modules.
  • imports: CommonModule, RouterModule, FormsModule, ReactiveFormsModule, Material modules and other library modules.
  • declarations: components that will be re-used in different feature modules, i.e. HexadecimalCellEditorComponent.
  • exports: all imported and declared items.
  • providers: no services should be provided in this module.

Feature Module

Declare models, components, services and other items that will be only used within this module.

And for each feature module, you can also create a routing module.

Upvotes: 26

Related Questions