Как импортировать Angular Материал в проект?

Я установил Angular Material Design. Теперь я пытаюсь добавить это в файл app.module.ts:

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

Что я должен определить в разделе: import imports: []? чтобы загрузить все материальные объекты.

Я пытался: imports: ['MaterialModule'] но он устарел

Ответ 1

MaterialModule устарел в версии 2.0.0-beta.3 и полностью удален в версии 2.0.0-beta.11. Смотрите этот CHANGELOG для более подробной информации. Пожалуйста, пройдите через последние изменения.

Ломать изменения

Angular Material теперь требуется Angular 4.4.3 или выше
MaterialModule был удален.
Для бета .11 мы приняли решение полностью отказаться от префикса "md" и использовать "mat" для продвижения вперед.

Пожалуйста, пройдите через CHANGELOG, мы получим больше ответов!

Пример показан ниже cmd

npm install --save @angular/material @angular/animations @angular/cdk
npm install --save angular/material2-builds angular/cdk-builds

Создайте файл (material.module.ts) в папке "app"

import { NgModule } from '@angular/core';

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

импортировать на app.module.ts

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

Ваш компонент HTML файл

<div>
  <mat-toolbar color="primary">
    <span><mat-icon>mood</mat-icon></span>

    <span>Yay, Material in Angular 2!</span>

    <button mat-icon-button [mat-menu-trigger-for]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
  </mat-toolbar>
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item>Option 1</button>
    <button mat-menu-item>Option 2</button>
  </mat-menu>

  <mat-card>
    <button mat-button>All</button>
    <button mat-raised-button>Of</button>
    <button mat-raised-button color="primary">The</button>
    <button mat-raised-button color="accent">Buttons</button>
  </mat-card>

  <span class="done">
    <button mat-fab>
      <mat-icon>check circle</mat-icon>
    </button>
  </span>
</div>

Добавить глобальный CSS 'style.css'

@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import '[email protected]/material/prebuilt-themes/indigo-pink.css';

Ваш компонент CSS

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

mat-card {
  max-width: 80%;
  margin: 2em auto;
  text-align: center;
}

mat-toolbar-row {
  justify-content: space-between;
}

.done {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: white;
}

Если кто-то не получил вывод, используйте нижеприведенную инструкцию

вместо вышеуказанного интерфейса (material.module.ts) вы можете напрямую использовать приведенный ниже код также в app.module.ts.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule, MatAutocompleteModule, MatInputModule,MatFormFieldModule } from '@angular/material';

Так что в этом случае вы не хотите импортировать

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

в app.module.ts

Ответ 2

Если вы хотите импортировать все Модули материалов, создайте свой собственный модуль, т.е. material.module.ts, и сделайте что-то вроде следующего:

import { NgModule } from '@angular/core';
import * as MATERIAL_MODULES from '@angular/material';

export function mapMaterialModules() {
  return Object.keys(MATERIAL_MODULES).filter((k) => {
    let asset = MATERIAL_MODULES[k];
    return typeof asset == 'function'
      && asset.name.startsWith('Mat')
      && asset.name.includes('Module');
  }).map((k) => MATERIAL_MODULES[k]);
}
const modules = mapMaterialModules();

@NgModule({
    imports: modules,
    exports: modules
})
export class MaterialModule { }

Ответ 3

MaterialModule устарел в бета- версии с целью, чтобы разработчики могли импортировать в свои приложения только то, что они собираются использовать, и таким образом улучшить размер пакета.

У разработчиков теперь есть 2 варианта:

Создайте пользовательский MyMaterialModule который импортирует/экспортирует компоненты, необходимые для вашего приложения, и может быть импортирован другими (функциональными) модулями в вашем приложении.
Импортируйте непосредственно отдельные материальные модули, которые требуются для него.

Возьмите в качестве примера следующее (извлечено из страницы материала)

Первый подход:

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  imports: [MdButtonModule, MdCheckboxModule],
  exports: [MdButtonModule, MdCheckboxModule],
})
export class MyOwnCustomMaterialModule { }

Затем вы можете импортировать этот модуль в любой из ваших.

Второй подход:

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MdButtonModule, MdCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

Теперь вы можете использовать соответствующие компоненты материала во всех компонентах, объявленных в PizzaPartyAppModule

Стоит упомянуть следующее:

В последней версии материала вам нужно импортировать BrowserAnimationsModule в ваш основной модуль, если вы хотите, чтобы анимации работали
С последней версией разработчики теперь должны добавить @angular/cdk в свой package.json (материальная зависимость)
Импортируйте материальные модули всегда после BrowserModule, как указано в документации:

Какой бы подход вы ни использовали, обязательно импортируйте модули Angular Material после Angular BrowserModule, поскольку порядок импорта имеет значение для NgModules.

Ответ 4

Шаг 1

yarn add @angular/material @angular/cdk @angular/animations

Шаг 2 - Создайте новый файл (/myApp/src/app/material.module.ts), который включает в себя все модули пользовательского интерфейса материала (ярлык отсутствует, необходимо включать отдельные модули по одному)

import { NgModule } from '@angular/core';

    import {
      MatButtonModule,
      MatMenuModule,
      MatToolbarModule,
      MatIconModule,
      MatCardModule
    } from '@angular/material';

    @NgModule({
      imports: [
        MatButtonModule,
        MatMenuModule,
        MatToolbarModule,
        MatIconModule,
        MatCardModule
      ],
      exports: [
        MatButtonModule,
        MatMenuModule,
        MatToolbarModule,
        MatIconModule,
        MatCardModule
      ]
    })
    export class MaterialModule {}

Шаг 3 - Импортируйте и добавьте этот недавно созданный модуль в ваш app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MaterialModule } from './material.module'; // material module imported

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule // MAteria module added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ответ 5

Нажмите здесь, чтобы увидеть скриншот сообщения об ошибке

Если вы, люди, получаете эту ошибку "compiler.js: 2430 Uncaught Error: неожиданная директива 'MatIcon', импортированная модулем 'AppModule'. Пожалуйста, добавьте аннотацию @NgModule '

Пожалуйста, не импортируйте MatIcon из @angular/material.

Просто импортируйте ниже: import {MatIconModule} из '@angular/material';

Как импортировать угловой материал?

Вы можете запустить ниже команды. нг добавить @угловой/материал