Why does the order of NgModule imports matter?

Question

I have been going through the Angular tutorial and when going through the HTTP section https://angular.io/docs/ts/latest/tutorial/toh-pt6.html and have noticed that the order in which imports are declared in the NgModule makes a difference in terms of whether or not the application works. I would like to know why that is.

In particular this works:


    @NgModule({
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        InMemoryWebApiModule.forRoot(InMemoryDataService),
        AppRoutingModule
      ],
    ... 
    })

but the following does not. The list of heroes does not get loaded. Note that the HttpModule is declared AFTER the InMemoryWebApiModule:


    @NgModule({
      imports: [
        BrowserModule,
        FormsModule,
        InMemoryWebApiModule.forRoot(InMemoryDataService),
        HttpModule,
        AppRoutingModule
      ],
     ...
    })

The tutorial is using Angular 2.4.4. I have noticed the problem in both Firefox and IE. I have not found anything in my google searches that would indicate the source of the problem.

Günter Zöchbauer · Accepted Answer · 2022-02-09T16:46:58.953

24

The order of providers matters. For exported components, directives, or pipes it doesn't matter, because conflicts result in errors.

The InMemoryWebApiModule.forRoot(InMemoryDataService), overrides Http, and if HttpModule is provided later, this overriding is rendered void. Providers added later override already registered providers with the same key.

edited Feb 09 '22 at 16:46

answered Feb 09 '17 at 19:22

Günter Zöchbauer

623,577
216
2,003
1,567

2

Thanks this helps. I found this in the readme of the InMemoryWebApi: "Always import the InMemoryWebApiModule after the HttpModule to ensure that the XHRBackend provider of the InMemoryWebApiModule supersedes all others." This is basically what you said. – hashpyrit Feb 09 '17 at 19:53
2

the imports order matters too, I noticed that if I put AppRoutingModule after a custom module, than it will load that custom module as first page instead the one defined in the AppRoutingModule – albanx Apr 11 '17 at 15:47
In a "normal" use case, does this only become an issue with `HttpModule` ? I recently was modifying some modules to tidy them up by arranging the order of imports alphabetically. I got used to having Angular modules like `CommonModule` and `BrowserModule` and `HttpModule` be on top but when I know that these modules are imported already on "higher" modules like in the root `AppModule`, I now just do my thing, arranging my on the little modules alphabetically and so far nothing broke. I'm not sure if it might be just luck and what I am thinking about the higher modules is completely wrong. – Alex Pappas Feb 09 '22 at 12:59
@ColdCerberus the order matters if more than one provider is registered for the same "key". If you have `providers: [ { provide: MyService, useClass: MyServiceImpl }, { provide: MyService, useClass: MyServiceImpl2 } ]` then only the later takes effect. If you import modules with providers, then this happens behind the scenes and harder to spot. – Günter Zöchbauer Feb 09 '22 at 16:50

score 2 · Answer 2 · answered May 17 '18 at 13:28

2

Yes. Order is important if one module depends on another.

answered May 17 '18 at 13:28

dats

210
2
7

why the order is important in this case? – AlexElin Mar 26 '23 at 18:42

Why does the order of NgModule imports matter?

2 Answers2

Linked