我正在尝试实现材料文档中描述的<mat-table>
TL;DR：将@angular/核心、@angular/材料和@angular/CDK 升级到版本 5 后，我突然无法使用与 mat-card 相关的标签。
我无法正确获取所有依赖项以导入 MatTableDataSource。我意识到我可以像这样实现我自己的数据源，但如果它在文档中，那么如果没有这个技巧，肯定可以进行工作配置。实现我自己的数据源也意味着丢失非常可排序的标头和过滤，这是我最追求的。
我将项目升级到 Angular 5，认为材质也会升级，但事实并非如此。材料和CDK停留在"^2.0.0-beta.12"。
npm install后，我看到了这些警告：
npm WARN @angular/cdk@5.0.4 requires a peer of @angular/core@~5.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/cdk@5.0.4 requires a peer of @angular/common@~5.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@5.0.4 requires a peer of @angular/core@~5.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@5.0.4 requires a peer of @angular/common@~5.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a peer of @angular/core@^4.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a peer of @angular/common@^4.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a peer of @angular/forms@^4.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN angular2-flash-messages@1.0.8 requires a peer of @angular/core@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular2-jwt@0.2.3 requires a peer of @angular/core@^2.0.0||^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular2-jwt@0.2.3 requires a peer of @angular/http@^2.0.0||^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@3.0.1 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 codelyzer@3.0.1 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: fsevents@1.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
。但是ng build成功了，我的应用程序的其余部分在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'.
。所以我增加了材料和 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.
。现在我完全困惑和难倒了。我在模板中使用的每个"未知"材质卡相关标签都有一个上述错误。我做错了什么，突然没有可用的材质卡？
希望这将帮助处于相同情况的人：该解决方案与包依赖项没有直接关系。我没有在@NgModule导入中导入MatCardModule。
如此明显的答案！但是，我将不得不检查更改日志和文档，以找出为什么以前不需要导入，当时我在较低版本的 CDK 和 Material 上。模板解析错误仅在跳转到(更高)版本后出现。