3

Let's say that in my Angular app I have an NgModule, and I would like to add a bunch of modules to its imports array. I don't want to import each module individually, but instead gather modules in a group and import the entire group instead. Some of the modules in group are actually useful for that NgModule, other modules are not.

What are possible drawbacks of importing the modules that aren't actually used by that specific modules? Note that each of imported modules is still used somewhere in the application, they just aren't needed in that particular module.

For example, let's consider an index.ts file containing modules for common input components, found at the path @app/common/inputs:

// whatever imports are necessary

const Modules = [
  TextBoxModule,
  SelectModule,
  DatePickerModule,
  // etc.
];

// export individual module types and the Modules array

I have MyWonderfulComponent that uses TextBoxComponent and DatePickerComponent (using TextBoxModule and DatePickerModule, respectively). However, it doesn't use any other input components (including SelectComponent).

Nonetheless, as a lazy software engineer I import all input modules into MyWonderfulModule, because it takes 1 line as opposed to 2 lines importing only TextBoxModule and DatePickerModule:

// some basic imports
import * as Inputs from '@app/common/inputs';

@NgModule({
  declarations: [
    MyWonderfulComponent
  ],
  imports: [
    ...Inputs.Modules,
    // etc.
  ],
  exports: [
    MyWonderfulComponent
  ]
})
export class MyWonderfulModule {
}

What are the drawbacks of importing unneeded SelectModule (and a bunch of other input modules) alongside the much needed TextBoxModule and DatePickerModule?

Does it have any significant performance or memory hit? Does it result in longer compilation process and/or larger output files? Or maybe the unneeded imports are "just there" and have no significant impact on the app?

(remember - all inputs modules are used somewhere - it's just that MyWonderfulComponent doesn't use anything beside text boxes and date pickers)

Alice
  • 585
  • 5
  • 16

1 Answers1

0

Modules that are imported but not used are removed from the the production build of your Angular app so it would not impact production performance at all.

That being said, if they are not being used in that module, I would recommend removing them from the imports array for that module just to keep the code clean and concise.

Kyler Johnson
  • 1,939
  • 16
  • 14
  • 1
    Ah, but I want to import extra modules precisely to keep the code clean and concide. As I've shown in my example: instead of importing a bunch of individual input component modules - and having to add another module if I use another input component - I'd just spread-add a reusable array of input modules to the import array in a single line. Since - as you said - the extra imports don't affect production performance, this approach should be safe to use. Thanks! ^^ – Alice Jan 17 '20 at 18:09
  • Ah, I see. Great! Glad I could help! – Kyler Johnson Jan 17 '20 at 19:40