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

Ответ 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';

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

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