How to quickly connect angular material?

Question

Angular

I usually include 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 need a certain component, I write it in app.module.ts in the import blocks. But there are a lot of components and it turns out that in each new project I connect them one at a time. It is not comfortable. Is it possible to connect them all in one action and then only use them without returning to the connection?
Will it greatly affect performance? All the same, I do not use all the components of the library material in the project.
Do not offer copy-paste option. There must be a regular way, I just don't know it.

Answer 1

Do everything in a structured way, for example, to connect material in the app/shared directory, we have a material directory 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 { }

In shared.module.ts we export this module:

// ...imports
import { MaterialModule } from './material';

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

Easy to manipulate - add what you need, remove what you don't
What is not used but imported in your modules will also be collected when building the application, which means that they will simply lie with unnecessary cargo, taking n-time to load the application.