23

I don't understand the difference between core and feature modules in angular 2. As far as I understand there are three recommended types of modules: core, feature and shared.

If a module exports some declarations (components, directives and pipes) and many modules will import this module, then this module should be a shared module (in shared directory).

If a module expors some declarations (components, directives and pipes) and only the root module will import this module, then this module should be a core module (in core directory).

Are feature modules the same? Only root module imports them. In this example there is a CoreModule and a feature module called ContactModule. I don't see the difference between them. Both of them are imported in root module.

Mark Rajcok
  • 348,511
  • 112
  • 482
  • 482
Ildar
  • 3,111
  • 3
  • 35
  • 66

1 Answers1

25

core

The core module contains providers for global services and can be guarded against being loaded from lazy loaded modules (as shown in your link) because this can easily cause bugs where lazy loaded modules get their own instance for global services (which is against the intention).

feature As the name says - one module for one feature

Otherwise, a feature module is distinguished primarily by its intent.

A feature module delivers a cohesive set of functionality focused on an application business domain, a user workflow, a facility (forms, http, routing), or a collection of related utilities.

shared

This is mostly for convenience where several modules are exported so they can be made available at once in components that want to use them all (common pipes, components, and directives you probably want to use together in many other modules).

Ahmad Baktash Hayeri
  • 5,574
  • 3
  • 29
  • 41
Günter Zöchbauer
  • 490,478
  • 163
  • 1,733
  • 1,404
  • 2
    But what to do if we have 20 shared components\pipest etc. and all of these things are in SharedModule. So ModuleA required 1-10 shared components and ModuleB other 11-20 shard components. But both component imports SharedModule. So componentA will have unnecessary components that will be used only in ModuleB. Is it will cause some perfomance issues or not? – Velidan Oct 06 '16 at 08:01
  • 5
    If these components are used somewhere in your application, it won't make a difference. If some of these components aren't used anyhwere in your application it might lead to code bloat. I don't know how good tree-shaking works with TS and Angular2. But I think they took care of this as well. So, I don't think this is a problem at all. – Günter Zöchbauer Oct 06 '16 at 08:06
  • Should *CoreModule* contain components? If so, *PageNotFoundComponent* would be an example of a component inside this moduel? – Jonathan Solorzano Jan 17 '17 at 05:44
  • In the docs it contains the `TitleComponent` because it's used on the initial page and almost any other page. I'd move `PageNotFoundComponent` to a laty liaded module because it's sn exception when tis component is needed, not a default. – Günter Zöchbauer Jan 17 '17 at 06:14
  • 1
    If I have a component that is reused in multiple modules, should I put it in the `SharedModule` or `CoreModule`? – Tuong Le Feb 06 '17 at 05:25
  • Is it wrong to do if I added a pipe in SharedModule and import sharedModule to a component in Core Module ? – ted Mar 12 '18 at 13:33
  • "import sharedModule to a component in Core Module". You can only import modules to other modules, therefore not sure what you're asking for. Besides that, just import the modules where you use components, directives, or pipes of it. – Günter Zöchbauer Mar 12 '18 at 13:39