如何集成 Ionic 3 和 Angular 材料？答案

【问题标题】：How Integrate Ionic 3 and Angular Material?如何集成 Ionic 3 和 Angular 材料？
【发布时间】：2018-06-29 19:42:51
【问题描述】：

我正在尝试将 Ionic 3 与 Angular Material 集成并运行，但未能做到这一点。 ... 任何人都可以告诉我如何将第三方添加到 Ionic。以及如何在 Ionic Framework 中运行 Angular Material。 ...... 我所做的是以下内容::

-我安装了@angular/material, @angular/cdk 和@angular/animations。

-在配置文件夹中添加copy.config.js文件 与以下 ::

copyMaterialThemeCSS: { src: ['{{ROOT}}/node_modules/@angular/material/prebuilt-themes/indigo-pink.css'], dest: '{{WWW}}/assets' }

-在Package.json编辑添加以下内容：

“配置”：{ “ionic_copy”：“./config/copy.config.js”}

-in Index.html 我添加了这一行：

<link href="assets/indigo-pink.css" rel="stylesheet">

-最后，当从 Angular Material 添加任何组件时，我收到此错误：

TypeError: Object(...) is not a function
    at http://localhost:8100/build/vendor.js:138867:128
    at Object.<anonymous> (http://localhost:8100/build/vendor.js:138869:2)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.<anonymous> (http://localhost:8100/build/vendor.js:135975:76)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.<anonymous> (http://localhost:8100/build/vendor.js:147347:81)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.218 (http://localhost:8100/build/main.js:116:82)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.195 (http://localhost:8100/build/main.js:96:70)

...

提前谢谢你。

【问题讨论】：

如果您遇到具体问题，请举例说明您所做的工作，否则您的问题将因不够具体而被关闭。

标签： angular ionic-framework angular-material

【解决方案1】：

我按照 youtube 的这个答案解决了我的问题：

检查 package.json 中是否有 Angular Material 和 Angular CDK 包的以下条目： -"@angular/cdk": "^5.2.4", - “@角/材料”：“^5.2.4” 如果您看到高于 5.2.4 的版本并且您正在使用 angular 5，请尝试使用这些命令“降级”它 => npm 卸载 @angular/material --save 然后 npm install @angular/material@5.2.4 --save 和 CDK 使用 : => npm uninstall @angular/cdk --save 然后 npm install @angular/cdk@5.2.4 --save

【讨论】：