Angular2 Материал "md-icon" не является известным элементом

У меня есть приложение angular2, которое использует версию @angular2 -material 2.0.0-alpha.8-2. Все работает нормально. Теперь я решил обновить материальную версию до последней версии 2.0.0-alpha.9-3. Я выполнил шаги, упомянутые в GETTING_STARTED. Ранее я импортировал отдельные модули, как показано ниже:

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdCheckboxModule,

    ....
    ....

Однако журнал изменений версии 2.0.0-alpha.9-3 гласит:

"Angular Материал изменился с @ angular2 -материал/... пакетов на один пакет под @angular/material. Наряду с этим изменением существует новый NgModule, MaterialModule, который содержит все компонентов."

Итак, я удалил явно импортированные материальные модули и изменил их на:

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MaterialModule.forRoot(),
    ....
    ....

После этого изменения я получаю следующую ошибку

'md-icon' не является известным элементом:

Если "md-icon" является компонентом Angular, а затем убедитесь, что он является частью этого модуля.
Если "md-icon" является веб-компонентом, добавьте "CUSTOM_ELEMENTS_SCHEMA" в "@NgModule.schemas" этого компонента, чтобы подавить это сообщение.

Нужно ли мне явно импортировать отдельные модули или, как указано в журнале изменений? MaterialModule содержит все компоненты, и я не должен явно импортировать отдельные модули? Если я не буду импортировать отдельные модули, то что может быть источником ошибки?

Ответ 1

Как насчет раздела export? Вы предоставили MaterialModule там?

@NgModule({
  imports: [
    MaterialModule.forRoot()
  ],
  exports: [
    MaterialModule
  ]
})

Не забудьте указать стили значков в вашем index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

После этого вы сможете использовать значки в своих представлениях:

<md-icon>delete</md-icon>

Ответ 2

если вы загрузите дочерний модуль следующим образом:

{path: 'childModule', loadChildren: 'app/child/child.module#childModule'}

то в дочернем модуле вам нужно снова импортировать MaterialModule. например.

@NgModule({
    imports: [
        sharedModules,
        childRouting,
        MaterialModule.forRoot()
    ],
    declarations: [
    ],
    providers: []
})
export class childModule {
}

Ответ 3

Вам нужно импортировать MatIconModule в app.module.ts и добавить его в свой массив импорта в том же файле.

Как это, например:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { TreeModule } from "angular-tree-component";
import { HttpClientModule } from "@angular/common/http";

import { MatButtonModule } from "@angular/material/button";
import { MatIconModule } from "@angular/material/icon"; // <----- Here

import { EclassService } from "./services/eclass.service";

import { AppComponent } from "./app.component";
import { FormsModule } from "@angular/forms";
import { AsyncTreeComponent } from "./components/async-tree/async-tree.component";


@NgModule({
  declarations: [
    AppComponent,
    AsyncTreeComponent
  ],
  imports: [
    BrowserModule, BrowserAnimationsModule, FormsModule, TreeModule, HttpClientModule, MatButtonModule, MatIconModule // <--- HERE
  ],
  providers: [EclassService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ответ 4

Добавить

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

to index.html

и <i class="material-icons">delete</i> вместо <md-icon>delete</md-icon>

Ответ 5

Решением является добавление модулей md-icon, md-input и т.д. И таблицы стилей.

Вам также необходимо добавить CUSTOM_ELEENT_SCHEMA, как показано ниже в app.module.ts:

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

затем добавьте

providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]

Ответ 6

Добавь это to index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

и добавьте в файл app.module.ts этот файл:

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

imports: [MatIconModule]

Ответ 7

Два шага для использования mat-icon:

вставьте это в файл index.html.

<link href="#" onclick="location.href='https://fonts.googleapis.com/icon?family=Material+Icons'; return false;" 
   rel="stylesheet">

вставьте эту строку в файл app.module.ts. Если выполняется ленивая загрузка, включите ее в этом модуле или в sharedModule.
```
import { MatIconModule } from '@angular/material/icon';
```