28

@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 コンポーネントの場合、このメッセージを抑制するには、このコンポーネントの「@NgModule.schemas」に「CUSTOM_ELEMENTS_SCHEMA」を追加します。

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

4

7 に答える 7

16

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

たとえば、次のようにします。

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 { }
于 2018-01-31T14:18:52.380 に答える
11

次のように子モジュールをロードすると:

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

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

@NgModule({
    imports: [
        sharedModules,
        childRouting,
        MaterialModule.forRoot()
    ],
    declarations: [
    ],
    providers: []
})
export class childModule {
}
于 2017-01-06T02:51:51.783 に答える
2

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';
于 2019-08-22T06:28:03.363 に答える