web-dev-qa-db-ja.com

エラー：テンプレート解析エラー：「mat-card」は既知の要素ではありません：

私はAngular 4マテリアルプロジェクトを約2か月前に開始し、当時の現在のすべてのnpmインストールで、material.angular.ioのほとんどのコンポーネントを使用しています。以来Angular 5.0.0がロールアウトされました。新しいアップデートでプロジェクトごとに再構築しましたが、コンソールに次のエラーがあります。

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

私はインストールをチェックし、すべてが最新のものであると信じていますが、以前は機能していたコードが現在失敗しています。これはA5の新しい要件ですか、それとも材料パッケージは準備ができていませんか？

angularangular-materialangular5
8
AppDreamer

うわー！私はこの問題に再び出くわし、それを理解するために本当に掘り下げました。 Material Side-Navモジュールなどの特定のドキュメントに従うと、app.module.tsの@NgModule宣言を分割して、エクスポートを残りの部分から分離することがあります...

@NgModule({
   exports: [
      myModule,
      anotherModule
   ],
})
export class MaterialModule {}

@NgModule({
   imports: [
      ... all the rest of your stuff]
   declarations: [
      ... all your custom Components
})
export class AppModule {}

この場合、それらを分割した後、後でカスタムコンポーネントを追加するときに...

ng g component components/myNewModule

他の@NgModuleセクションの下に、新しい追加の「宣言：」を追加する場合があります。これにより、これらのコンポーネントへのマットカードなどへのアクセスが遮断されます。新しく追加された宣言を他の宣言に移動するだけで、問題はなくなります。

これを2回テストしましたが、「エラー：テンプレート解析エラー： 'mat-card'は上記の既知の要素ではありません」というメッセージが表示された場合は、問題を解決しているようです。

2
AppDreamer

In Angular 6

app.module.ts：

import { MatCardModule } from '@angular/material';
...
@NgModule({
    declarations: [
    AppComponent,...
],
imports: [
...
MatCardModule,
....
]
...

}）

html：

<mat-card>
    <p>
    it works!
    </p>
</mat-card>
8
Yuri Gridin

MatCardModuleを別のエントリポイント（別名@angular/material/card）？それは私のために働いた。

コードを提供しない場合、私は本当にあなたを助けることができません。

1
Edric

私は新しいアプリを始めました...

npm cache clean -f
npm install -g n
ng new myAppName

次に、コンポーネントを1つずつコンポーネントフォルダーにコピーしました。各コピーで、サーブを実行し、各問題を修正しました（インポートをapp.module.tsファイルに追加するなど）。 npmコンポーネントは、現在の適切なコードで必要な場合にのみインストールします。

npm install myComponent --save

私が進むにつれて、いくつかの古いmd要素（mdカードなど）を見つけて、それらをmat要素バージョンに変換しました。興味深いことに、Angular 4では、同じコンポーネントのmatバージョンとmdバージョンの両方をサポートしていましたが、5では一部が廃止されたようです。

長い午後でしたが、試して捨てたすべてのnpmモジュールを取り除くのに役立ちました。

0
AppDreamer