首先

在现场使用Ionic3开发应用程序，并且在Web视图中使用Angular-material进行显示，在原生和Web页面上的设计存在差异的情况下，我尝试在原生端即Ionic端引入Angular-material，但由于在某些地方遇到了问题，因此记录并分享如下?

我正在现场使用Ionic3开发一款应用程序。这款应用程序在WebView中显示页面，而页面使用了Angular-material。在原生和Web页面上的设计存在差异，所以我尝试将Angular-material引入原生端，也就是Ionic端。然而，由于遇到了一些问题，我决定将这些问题记录下来并分享给大家?

请注意的事项。

我们将在假定已经使用ionic start命令创建了应用程序模板的基础上进行操作。

确认 Angular 的版本。

我們需要確認 package.json 中所記載的 @angular/core 版本。

// 省略
"dependencies": {
  "@angular/core": "5.2.11"
}

只需要一种翻译：在Angular-material的入门教程中提到，

$ npm install --save @angular/material @angular/cdk @angular/animations

如果以這種方式進行安裝，根據Ionic的Angular版本而定。

Typescript Error Type 'ElementRef' is not generic.

因为显示错误并且不能正常工作。
原因是Ionic3使用的Angular版本与Angular-material等版本不同。
所以在安装时需要指定版本。

安装Angular-material。

就像前面解釋的那樣，請指定版本安裝Angular-material等套件。
如果是Angular 5.x.x的話，

$ npm install --save @angular/material@5.2.5 @angular/cdk@5.2.5 @angular/animations@5.2.11

※截至2019年01月08日，各个版本均为最新的5.x.x系列。

将Module添加到app.module.ts文件中。

本次仅作举例，在这里使用了 FormField、Input、Button 和 Icon。

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import {
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule
} from "@angular/material";

@NgModule({
    // 省略
    imports: [
        BrowserAnimationsModule
    ]
})

将Ionic中加载Angular-Material的CSS。

如果不执行这个步骤的话，比如说，

<mat-form-field>
    <input matInput placeholder="input">
</mat-form-field>

写下这句话时，

请将位于node_modules/@ionic/app-scripts/config目录下的copy.config.js文件复制到任何位置，但本次将其复制到项目目录直接下的package.json文件（以下简称为package.json）的相同层级。然后，在复制的文件中添加以下设置。

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

然后，在package.json中添加以下设置。

  // 省略
  "config": {
    "ionic_copy": "./copy.config.js"
  }

通过这样做，Ionic 在构建时会读取 package.json 中配置的 js 文件，并将 indigo-pink.css 复制到 www/assets/css 文件夹中。

最后，在src文件夹下的index.html中添加以下标签。

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

我试一下。

$ ionic serve

最终

我本以为会很容易上手，但在版本和样式两个方面遇到了困难。不过和之前不同的是，我对英语的文章等没有了（比之前）的抵抗感，所以解决起来意外地不花时间。学习英语真的很重要啊。

请提供相关链接

‘ElementRef’类型不是泛型类型
Ionic Angular Material集成
Ionic开发者资源/app脚本/
npm @angular/material
npm @angular/cdk
npm @angular/animations