Задать вопрос
StivinKing

Ivan Stroykin

Ответы пользователя по тегу Material Design

  • Возникает ошибка (@angular/material/esm5/tabs.es5.js) при выполнении команды ng serve?

    StivinKing
    @StivinKing
    Kentaro23, так, первым открыл какой-то "admin-portal". В package.json везде проставлено устанавливать последнюю версию, а вот @angular/cli стоял фиксированный, да еще и RC версия. Он просто не знал, что делать с 5-ой версией Angular. Вообще советую ставить фиксированные версии, тогда разработка будет более защищенной, особенно при коллективной разработке. После, можно смотреть на обновление версий, используя команду: npm outdate, пробовать обновиться.

    Плюс ко всему, в app.module.ts импортировался MaterialModule:
    import { MaterialModule } from '@angular/material';
    Данный модуль был вырезан в последних версиях Angular Material. Теперь каждый отдельный модуль нужно подключать отдельно, то есть вот так:
    import {
MatInputModule, MatRadioModule, ...
} from '@angular/material';
    Это было сделано, чтобы не нести в проект лишние, не используемые, модули.

    В styles.css импортировалась тема материального дизайна:
    @import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
    А должно подключаться так:
    @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

    Вот ссылка на инструкцию по началу использования Angular material
    И ссылка на использование тем
    Ответ написан
    4 комментария
    4 комментария

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

    StivinKing
    @StivinKing
    Делайте всё структурировано, к примеру, для подключения 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-времени на загрузку приложения.
    Ответ написан
    11 комментариев
    11 комментариев