CODEWITHSUNDEEP
angularnode-modules
Naresh Mobarsa
Naresh Mobarsa

Reputation: 101

In what order should i import modules in my shared module

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 { }

Upvotes: 5

Views: 4109

Answers (2)

yurzui
yurzui

Reputation: 214085

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:

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:

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:

Upvotes: 5

Chandru
Chandru

Reputation: 11184

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 { }

Upvotes: 0

Related Questions