web-dev-qa-db-ja.com

Angular2マテリアル「md-icon」は既知の要素ではありません

@ angular2-material 2.0.0-alpha.8-2バージョンを使用しているangular2アプリケーションがあります。すべて正常に動作します。そこで、マテリアルバージョンを最新の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 Materialは@ angular2-material/...パッケージから@ angular/materialの下の単一のパッケージに変更されました。この変更に加えて、すべてのコンポーネントを含む新しいNgModule MaterialModuleがあります。」

そこで、明示的にインポートされたマテリアルモジュールを削除し、次のように変更しました。

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

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

この変更後、次のエラーが発生します

'md-icon'は既知の要素ではありません：

  1. 'md-icon'がAngularコンポーネントの場合、それがこのモジュールの一部であることを確認します。
  2. 「md-icon」がWebコンポーネントの場合、「CUSTOM_ELEMENTS_SCHEMA」をこのコンポーネントの「@ NgModule.schemas」に追加して、このメッセージを抑制します。

個々のモジュールを明示的にインポートする必要がありますか、または変更ログで説明されているように、MaterialModuleにはすべてのコンポーネントが含まれていますが、個々のモジュールを明示的にインポートしないでください。個々のモジュールをインポートしない場合、エラーの原因は何ですか？

angulartypescriptangular-material2
21
Pankaj Kapare

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>
21
Maciej Treder

このような子モジュールをロードする場合：

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

子モジュールでは、MaterialModuleを再度インポートする必要があります。例えば.

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

App.module.tsでMatIconModuleをインポートし、同じファイルのインポート配列に追加する必要があります。

たとえば次のように：

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 { }
9
Isak La Fleur

追加

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

index.htmlへ

および<i class="material-icons">delete</i>の代わりに<md-icon>delete</md-icon>

2
Malus Jan

Mat-iconを使用する2つの手順：

  1. これをindex.htmlファイルに挿入します。

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

  2. この行をapp.module.tsファイルに挿入します。遅延読み込みを実行する場合は、そのモジュールまたはsharedModuleに含めます。

    import { MatIconModule } from '@angular/material/icon';
0
sudha priya

解決策は、md-icon、md-inputなどのモジュールとスタイルシートを追加することです。

App.module.tsに以下のようにCUSTOM_ELEENT_SCHEMAを追加する必要もあります。

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

それから加えて

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

これをindex.htmlに追加します。

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

app.module.tsファイルに次を追加します。

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

imports: [MatIconModule]
0
Olena Hrynevych