In angular(2/4/6) application if we import unnecessary modules in app module will that slow down the application.

Does it impact on the performance of the application ?

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'myId' }),
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    HttpClientInMemoryWebApiModule,
    AaModule,
    BbModule
  ],
  declarations: [
    AppComponent,
    AdminComponent
  ],
  providers: [  ],
  bootstrap: [ AppComponent ]
})

In angular(2/4/6) application if we import unnecessary modules in app module will that slow down the application.

Does it impact on the performance of the application ?

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'myId' }),
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    HttpClientInMemoryWebApiModule,
    AaModule,
    BbModule
  ],
  declarations: [
    AppComponent,
    AdminComponent
  ],
  providers: [  ],
  bootstrap: [ AppComponent ]
})

• javascript
• angular
• angular2-modules

• what do you mean by performance? – Jota.Toledo Commented Feb 20, 2019 at 11:16
• @Jota.Toledo Does it loads those unnecessary modules ? – Kooldandy Commented Feb 20, 2019 at 11:30
• Yes it will load those, you can move features to its own feature modules and lazy load them. This way only requested feature as per URL will be loaded initially. FYI I am referring to imports: [] not Typescript import statement. – sabithpocker Commented Feb 20, 2019 at 11:32

3 Answers 3

Yomateo is correct to say that tree shaking will take care of unused modules/module operators when build is performed.

A tree shaker walks the dependency graph, top to bottom, and shakes out unused code like dead leaves in a tree

There is however a difference in the amount of time it takes to perform the build, as it takes longer to build apps with more modules included even though they are never used and the build size is larger if more modules are imported.

So to answer your question the performance will not be affected, however, build time and build size will be affected.

Source

If you import a module and never use it.. it will be left behind. This is one of the biggest advantages of "trees shaking" that the piler provides. Also known as "dead code".

Referencing unnecessary code from modules on the other hand will increase (or bloat as you call it) your distribution size and will also require that the browser reads this code into memory.

Importing unnecessarily module bloats your application size significantly. It also applies to any angular module you might want to use, including third-party ones.