How to connect angular material?

I usually connect angular material like this:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms'; 
import { AgmCoreModule } from '@agm/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule,
MatInputModule,
MatCardModule,
MatCheckboxModule,
MatDialogModule,
 MatSidenavModule } from '@angular/material';

..........
.........
 imports: [
MatSidenavModule,
MatDialogModule,
MatCheckboxModule,
MatCardModule,
MatInputModule,
FormsModule,
MatButtonModule,
BrowserAnimationsModule,
HttpClientModule,
BrowserModule,
AppRoutingModule,
.............
............
.........


That is, as soon as I feel you need a certain component that I register in the app.module.ts in blocks of import. But components a lot and it turns out that in each new project I connect them one by one. It's uncomfortable. If you can connect them all with a single action and then only to use, not returning to the connection?

How much will it affect performance? I'm still not all components of the library material use in the project.

Option to copy-paste do not offer. Must exist in the proper way, I just don't know.
June 10th 19 at 16:27
1 answer
June 10th 19 at 16:29
Solution
Do everything structured, for example, to connect the material in the directory app/shared directory we have a material with 2 files:
material.module.ts
import { NgModule } from '@angular/core';
import { 
MatButtonModule,
MatInputModule,
MatCardModule,
MatCheckboxModule,
// ...
} from '@angular/material';

@NgModule({
 exports: [
MatButtonModule,
MatInputModule,
MatCardModule,
MatCheckboxModule,
 // ...
]
})
export class MaterialModule { }

index.ts (for easy import)
export { MaterialModule } from './material.module';


In shared.module.ts export this module:
// ...imports
import { MaterialModule } from './material';

@NgModule({
 exports: [
 / / exports ...
MaterialModule,
]
})
export class SharedModule { }

Easy to manipulate - add, remove not needed

How much will it affect performance? I'm still not all components of the library material use in the project.

What is not used but imported into your module, will also be collected when you build your app, and so will just lie an unnecessary burden taking n-time application download.
Updated my answer. In material.module.ts don't need imports: [...], as this module just acts as a mediator - Fay32 commented on June 10th 19 at 16:32
please tell me it is fundamentally important to the module file of the material contained only connection MaterialModule ? The fact that my file looks like this:
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material';

@NgModule({
 imports: [
MatButtonModule,
BrowserAnimationsModule,
],
 exports: [
MatButtonModule,
BrowserAnimationsModule,
],
 declarations: []
})
export class SharedModule { }


That is, it has more import BrowserAnimationsModule. Correct make import BrowserAnimationsModule in a native module? - Scotty commented on June 10th 19 at 16:35
, BrowserAnimationsModule to make better in charge to 1 time for all the app to connect and not to bathe more. And modules for material design it is better still to make a shared/material/material.module.ts, and there is only:
import { ..., ... } from '@angular/material';

@NgModule({
 exports: [
...,
...,
]
})
export class MaterialModule { }

Thus, it is worthwhile splitting, You don't need to look for something among the imports, You always know what and where and whether to make changes - Fay32 commented on June 10th 19 at 16:38

Find more questions by tags AngularMaterial Design