Why does the import order of NgModule matter?

Question

I went through the Angular tutorial and going through the HTTP section https://angular.io/docs/ts/latest/tutorial/toh-pt6.html and noticed that the order in which the import is declared in NgModule makes a difference in whether it works Appendix. I would like to know why this is so.

In particular, this works:

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

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

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

The tutorial uses Angular 2.4.4. I noticed a problem in both Firefox and IE. I did not find anything in my Google searches that indicate the source of the problem.

Answer 1

The order of the suppliers matters because the exported components, directives or pipes do not matter, because conflicts lead to errors.

InMemoryWebApiModule.forRoot(InMemoryDataService), overrides Http , and if an HttpModule provided later, this override is rendered empty. Suppliers added later redefine already registered suppliers with the same key.