CODEWITHSUNDEEP
angulararchitectureangular-material2
Lincoln Alves
Lincoln Alves

Reputation: 654

What's the most performatic way to import components and modules in Angular?

I've been working in a personal Angular project, using Angular Material as a component library. After a lot of research about project structure, modules and reusable components, I still have a few questions I can't answer about project performance:

Take Angular Material library for instance: some people advocate creating a MaterialModule with all the used modules inside, importing it in AppModule, but wouldn't it be more performatic to import only the few modules I use inside the main components, as the rest will only be usen in lazy loaded modules?

Also, with shared components...is it better to create something like a SharedComponentsModule to declare and export them all, or should each component have its own module?

Upvotes: 2

Views: 862

Answers (2)

Robinyo
Robinyo

Reputation: 596

Ref: Getting started with Angular Material

Step 4: Import the Angular Material component modules

I'm not sure which components I will require so I created a 'wrapper' module that imports (and exports) the complete set of Angular Material component modules.

angular-material.module.ts:

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';

import { LayoutModule } from '@angular/cdk/layout';

//
// Form Controls
//

import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

...

Upvotes: 0

Austin T French
Austin T French

Reputation: 5140

some people advocate creating a MaterialModule with all the used modules inside

Yes, this is useful for organization. Performance wise, it doesn't make a difference or is minimal, thanks to WebPack

This is not the same as importing everything from Material, which could have a much larger performance impact especially with dozens of libraries.

So don't:

import { * } from '@angular/material';

in your app.module file.

The point is to avoid an app.module file that is hundreds or thousands of lines long. It would be a pain to read for humans.

Upvotes: 3

Related Questions