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

Question

私はangle2-material 2.0.0-alpha.8-2バージョンを使用しているangular2アプリケーションを持っています。すべてうまく動作します。 今、材料版を最新の2.0.0-alpha.9-3にアップグレードすることに決めました。私はGETTING_STARTEDに記載されている手順に従った。 以前、私は以下のように個々のモジュールを輸入していた。しかし、2.0.0-alpha.9-3バージョンのログを変更

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

    MdIconModule, 
    MdButtonModule, 
    MdCardModule, 
    MdCheckboxModule, 

    .... 
    .... 

は言う：

「角度素材@ angular2-材料/から変更されています。..パッケージを@ angle/materialの単一のパッケージにまとめます。この変更に伴い、すべてのコンポーネントを含む新しいNgModule MaterialModuleが作成されます。

だから私は明示的にインポート素材・モジュールを取り外し、それを変更する：私は次のエラーに

「MD-アイコン」を取得しています。この変更は、既知の要素ではありません後

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

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

：

1. 'md-icon'が角度成分である場合、それがこのモジュールの一部であることを確認します。
2. 「md-icon」がWebコンポーネントの場合は、このコンポーネントの「@ NgModule.schemas」に「CUSTOM_ELEMENTS_SCHEMA」を追加して、このメッセージを表示しないようにします。

は、私は明示的に、またはすべてのコンポーネントが含まれている変更ログMaterialModuleに言及し、私は明示的に個々のモジュールをインポートするべきではないとして、個々のモジュールをインポートする必要がありますか？個々のモジュールをインポートしないとエラーの原因になることがありますか？

Answer 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> 

Answer 2

このようなモジュール：

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

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

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

Answer 3

あなたはapp.module.tsにMatIconModuleをインポートし、インポートの配列に追加する必要があり

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

と<i class="material-icons">delete</i>代わりの<md-icon>delete</md-icon>

Answer 4

index.htmlに追加同じファイルに例えばこのよう

：私にとって

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 { }