web-dev-qa-db-ja.com

Angular 5 Material 5 MatTableDataSource ... "'mat-card-title'は既知の要素ではありません。"

マテリアルドキュメント で説明されているように<mat-table>を実装しようとしています。

TL; DR：@ angular/core、@ angular/material、および@ angular/CDKをバージョン5にアップグレードした後、突然マットカード関連のタグを使用できなくなりました。

MatTableDataSourceをインポートできるように、すべての依存関係を正しく取得できません。私は自分のデータソースを実装できることに気づきました このように 、しかしそれがドキュメントにあるなら、確かにこのハックなしで動作する構成が可能です。私自身のデータソースを実装することは、かなりソート可能なヘッダーとフィルタリングを失うことも意味します。これは私が主に求めていることです。

プロジェクトをAngular 5にアップグレードしましたが、Materialもアップグレードされると思いましたが、そうではありませんでした。MaterialとCDKは「^ 2.0.0-beta.12」のままでした。

npm installの後、次の警告が表示されました。

npm WARN @angular/[email protected] requires a peer of @angular/core@~5.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of @angular/common@~5.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of @angular/core@~5.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of @angular/common@~5.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ng-bootstrap/[email protected] requires a peer of @angular/core@^4.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN @ng-bootstrap/[email protected] requires a peer of @angular/common@^4.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN @ng-bootstrap/[email protected] requires a peer of @angular/forms@^4.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^2.0.0||^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/http@^2.0.0||^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","Arch":"any"} (current: {"os":"linux","Arch":"x64"})

...しかし、ngビルドは成功し、私のアプリの残りの部分はpackage.jsonのこれらで正常に実行されます：

   dependencies": {
        "@angular/animations": "^5.2.0",
        "@angular/cdk": "^2.0.0-beta.12",
        "@angular/common": "^5.2.0",
        "@angular/compiler": "^5.2.0",
        "@angular/core": "^5.2.0",
        "@angular/forms": "^5.2.0",
        "@angular/http": "^5.2.0",
        "@angular/material": "^2.0.0-beta.12",
        "@angular/platform-browser": "^5.2.0",
        "@angular/platform-browser-dynamic": "^5.2.0",
        "@angular/platform-server": "^5.2.0",
        "@angular/router": "^5.2.0",
        "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.6",
        "angular-material-prefix-updater": "0.0.6",
        "angular2-flash-messages": "^1.0.8",
        "angular2-jwt": "^0.2.3",
        "core-js": "^2.5.3",
        "moment": "^2.20.1",
        "ng2-file-upload": "^1.3.0",
        "ngx-pagination": "^3.0.3",
        "quill": "^1.3.4",
        "rxjs": "^5.5.6",
        "zone.js": "^0.8.19"
      },
      "devDependencies": {
        "@angular/cli": "^1.6.3",
        "@angular/compiler-cli": "^5.2.0",
        "@angular/language-service": "^4.4.6",
        "@types/jasmine": "^2.8.3",
        "@types/jasminewd2": "^2.0.3",
        "@types/node": "^6.0.96",
        "codelyzer": "~3.0.1",
        "jasmine-core": "~2.6.2",
        "jasmine-spec-reporter": "~4.1.0",
        "karma": "^1.7.1",
        "karma-chrome-launcher": "~2.1.1",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^1.3.3",
        "karma-jasmine": "^1.1.1",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.2",
        "ts-node": "~3.0.4",
        "tslint": "~5.3.2",
        "TypeScript": "2.4.2",
        "webpack": "^3.10.0"
      }

この時点では、まだMatTableDataSourceをインポートできません。

...node_modules/@angular/material/material"' has no exported member 'MatTableDataSource'.

...だから私はMaterialとCDKのバージョンを増やしました：

git diff package.json：

"dependencies": {
     "@angular/animations": "^5.2.0",
-    "@angular/cdk": "^2.0.0-beta.12",
+    "@angular/cdk": "^5.0.0-rc0",
     "@angular/common": "^5.2.0",
     "@angular/compiler": "^5.2.0",
     "@angular/core": "^5.2.0",
     "@angular/forms": "^5.2.0",
     "@angular/http": "^5.2.0",
-    "@angular/material": "^2.0.0-beta.12",
+    "@angular/material": "^5.0.0-rc0",
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/platform-server": "^5.2.0",
.
.

これで問題なくビルドできますが、ページがレンダリングされると、コンソールに次のように表示されます。

Uncaught Error: Template parse errors:
'mat-card-title' is not a known element:
1. If 'mat-card-title' is an Angular component, then verify that it is part of this module.
2. If 'mat-card-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

...そして今、私は完全に混乱して困惑しています。テンプレートで使用したすべての「不明な」マテリアルカード関連のタグには、上記のエラーの1つがあります。突然マテリアルカードを使用できなくなったのはどうしてですか？

angularmaterial-designangular-material
5
John Marquez

これが同じ状況の誰かを助けることを期待して：ソリューションはパッケージの依存関係に直接関連していませんでした。 @NgModuleインポートでMatCardModuleをインポートしていませんでした。

そのような明白な答え！ ...しかし、CDKとMaterialの下位バージョンを使用していたときに、変更ログとドキュメントをチェックして、以前にそのインポートが必要でなかった理由を見つける必要があります。テンプレートの解析エラーは、（はるかに）高いバージョンにジャンプした後にのみ表示されました。

14
John Marquez