In what order should i import modules in my shared module

Question

I am created a shared module like below. I have read somewhere that import order matters and i cannot find that link now. At some places its working fine but at other places i am getting error. I want to know the order these modules are required to avoid any error.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import 'hammerjs';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { MaterialModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { CoreModule } from './core/core.module';

// NOTE: The import order matters.
const modules = [
  CommonModule,
  CoreModule,
  ReactiveFormsModule,
  FormsModule,
  HttpClientModule,
  MaterialModule,
  FlexLayoutModule,
];

@NgModule({
  imports: modules,
  exports: modules
})
export class DependenciesModule { }

Possible duplicate of [Angular2 - Separation of Concerns Best Practice](https://stackoverflow.com/questions/42328596/angular2-separation-of-concerns-best-practice) — Aravind, Nov 04 '17 at 03:53
@yurzui apologies, i am not getting that error now. i think my team member fixed it. The error was related to FormsModule or MaterialModule because the order wasn't correct. I would like to know the order in which these modules are loaded. — Naresh Mobarsa, Nov 04 '17 at 04:09

score 5 · Answer 1 · edited Dec 30 '21 at 07:09

App-wide singleton providers

First of all, i strongly recommend not to include app-wide singleton providers in a shared module. A lazy-loaded module that imports that shared module makes its own copy of the service.

CoreModule(if it contains app-wide providers) and HttpClientModule should not be in SharedModule.

See also:

Providers priority

You should know that all providers are added to the same injector.(root or created via lazy loading)

When two imported modules, loaded at the same time, list a provider with the same token, the second module's provider "wins". When Angular looks to inject a service for that token, it creates and delivers the instance created by the second provider.

If Module A provides a service for token 'X' and imports a module B that also provides a service for token 'X', then Module A's service definition "wins".

The service provided by the root AppModule takes precedence over services provided by imported modules. The AppModule always wins.

See also:

https://angular.io/guide/ngmodule-faq#what-if-two-modules-provide-the-same-service

Routing

The order of the routes in the configuration matters and this is by design.

The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes.

It also means that if you have two modules with routing configuration you should import them in the right order.

See also:

https://angular.io/guide/router#configuration

There is no difference how you order modules if those modules contain only components, directives and pipes. They are merged to transitive module.

See also:

Use component from another module

About services i just read the official document yesterday and i know that services should not be provided in shared component. In my CoreModule i have components which i need to user frequently. The order in which modules in shared module is what i wasn't able to find anywhere. — Naresh Mobarsa, Nov 04 '17 at 04:15
Is there any way a library developer can get around this? Say that I use an InjectionToken to get pluggable logic into a component. I provide that InjectionToken in my feature module, but with the intention that if it is provided anywhere else then that provider should override mine. It's not a good API if you have to know the secret order of imports, and tokens like MAT_MENU_SCROLL_STRATEGY has this problem. — blid, Apr 06 '20 at 14:20

score 0 · Answer 2 · answered Nov 04 '17 at 04:45

Try like this :

In your DependenciesModule exports all the module and import it another module.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { MaterialModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { CoreModule } from './core/core.module';

import 'hammerjs';

@NgModule({
  imports: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    MaterialModule,
    FlexLayoutModule,
    CoreModule
  ]
})
export class DependenciesModule { }

In what order should i import modules in my shared module

2 Answers2

App-wide singleton providers

Providers priority

Routing