Как быстро подключить angular material?

Question

[zlodiak]

Я обычно подключаю angular material так:

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,
.............
............
.........

То есть как только мне становится нужен определённый компонент, то я его прописываю в app.module.ts в блоках импорта. Но компонентов много и получается, что в каждом новом проекте я подключаю их по одному. Это неудобно. Нельзя ли подключать их все одним действием и дальше только использовать, не возвращаясь к подключению?

Сильно ли это повлияет на производительность? Всё таки я не все компоненты библиотеки материал использую в проекте.

Вариант копипастить не предлагайте. Должен существовать штатный способ, просто я его не знаю.

Answer 1

[Ivan Stroykin]

Делайте всё структурировано, к примеру, для подключения material в директории app/shared у нас директория material с 2-мя файлами:

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 (для удобного последующего импорта)

export { MaterialModule } from './material.module';

В shared.module.ts экспортируем данный модуль:

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

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

Легко манипулировать - добавлять нужное, убирать не нужное

Сильно ли это повлияет на производительность? Всё таки я не все компоненты библиотеки материал использую в проекте.

То что не используется но импортируется в вашем модулей, так же будет собрано при сборке приложения, а значит будут просто лежать ненужным грузом занимая n-времени на загрузку приложения.

Comments

[Ivan Stroykin]

Обновил свой ответ. В material.module.ts не нужен imports: [...], так как данный модуль выступает просто посредником

[zlodiak]

Иван Стройкин скажите пожалуйста, принципиально важно чтобы в файле модуля материала содержалось только подключение MaterialModule ? Дело в том, что мой файлы выглядит так:
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 { }

То есть в нём есть ещё импорт BrowserAnimationsModule. Правильнее выносить импорт BrowserAnimationsModule в коренной модуль?

[Ivan Stroykin]

zlodiak, BrowserAnimationsModule лучше вынести в главный, чтобы 1 раз на всё приложение подключить и не париться больше. А модули материального дизайна лучше всё таки вынести в shared/material/material.module.ts, и там только:

import { ..., ... } from '@angular/material';

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

Таким образом есть путное разделение, Вам не нужно искать что-то среди импортов, Вы всегда знаете, что и где и удобно вносить изменения

[Chvalov]

Ivan Stroykin извиняюсь что вмешиваюсь, такой вопрос
Если импорт у меня в таком виде:

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

К примеру на весь проект я использую только MatButtonModule, но модуль подключен с целого пакета @angular/material

При сборке проекта будет подключен весь материал пакет @angular/material с ненужными мне модулями ??

Или все-же лучше подключать в таком виде:

import { MatButtonModule } from '@angular/material/button';

[Ivan Stroykin]

Chvalov, если честно, на данный момент не могу точно сказать. Скорее всего, сейчас, при подключении angular/material всё прописано правильно и будет подключены только те модули которые вы используете. Но всё же, я рекомендую прописывать наверняка. То есть "@angular/material/button". Таким образом вы на 100% уверены что импортируете, откуда и что ничего левого импортировано не будет

[Chvalov]

Ivan Stroykin, спасибо

[Chvalov]

Ivan Stroykin, Такой вопрос, возможно ли подключить material один раз на весь проект ?

У меня вот такая структура и необходимо material подключать попутно в других модулях, в моем случае в auth, при том что он подключен в app.module.ts

[zlodiak]

Chvalov, насколько я понимаю ваша проблема решается подключением material в app.module.ts (что у вас, как вижу, уже есть)

[Chvalov]

zlodiak, он подключен в app.module, но компоненты из модуля auth не видят material, решилось повторным подключением material в auth.module

[Ivan Stroykin]

Chvalov, модуль должен будет создаться 1 раз и использоваться в 2-х местах. Именно для этого обычно создается shared/shared.module.ts и туда складываются все общие моменты (компоненты, дирепктивы, сервисы, пайпы и прочее). Он не будет копироваться в каждый модуль, а будет просто подключаться с одного места. В этом можете убедиться воспользовавшись Webpack Bundle Analyzer (ссылка с инструкцией)

[Chvalov]

Ivan Stroykin, Моя ошибка была в том что я не експортировал material с shared.module.ts