web-dev-qa-db-ja.com

'mat-toolbar'は既知の要素ではありません-Angular 5

新しいプロジェクトを作成し、angular-materialを追加しようとしています。

appフォルダーにmaterial.module.tsを作成しました：

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

import {
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule,
    MatToolbarModule
} from '@angular/material';

@NgModule({
    imports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule,
    ],
    exports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule
    ]
})
export class MaterialModule { }

それをコンポーネントの1つにインポートしました。

import { MaterialModule } from '../material.module';

さらに、angularマテリアルをindex.htmlにセットアップしました

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

私のstyle.cssで

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

私はテストとしてmaterial-iconを示したので、それが働いていることを知っています：

<i class="material-icons">face</i>

しかし、フッターを作成しようとすると失敗し、次のメッセージが表示されます。

不明なエラー：テンプレート解析エラー： 'mat-toolbar'は既知の要素ではありません：1. 'mat-toolbar'がAngularコンポーネントである場合、それがこのモジュールの一部であることを確認します。 2.「mat-toolbar」がWebコンポーネントの場合、「CUSTOM_ELEMENTS_SCHEMA」をこのコンポーネントの「@ NgModule.schemas」に追加して、このメッセージを抑制します。

angular-materialangular5
16
Mario

それは、がコンポーネント宣言を含むモジュールにモジュールをインポートする必要があるためですnotコンポーネント自体に：

app.module.ts

import { MaterialModule } from './material.module';

@NgModule({
  imports: [
    // ...
    MaterialModule
  ],
  declarations: [
    MyCoolComponent,
    // ...
  ]
})

追伸マテリアルアイコンを使用する正しい方法は、MatIconコンポーネントを使用することです。使用例：

<mat-icon>home</mat-icon>
15
Edric

ここで私のためにうまくいきます： https://stackblitz.com/edit/angular-w9ckf8

リンクを見て、足りないものがないか確認してください。

4
mahval