Material环境配置

值得庆幸的是，在最近的Material版本中，已经提供了Schematics，使得我们可以使用 ng add 命令来安装Material组件，并通过交互的方式，方便快捷的让我们选在Material的主题，手势支持等等。
通过使用 ng add 安装Material，可以自动的帮我们配置到imports，css，package.json等内容。

主题

使用 ng add ，schematics会自动帮我们设置angular.json中的styles内容：

"styles": [
    "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.scss"
],

原来我们引入的方式实在style.scss中，通过@import引入的：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

imports

schematics会自动帮我们设置app.module.ts中的imports：

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

index.html

在index.html中自动帮我们引入icon样式、字体：

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

package.json

@angular/cdk
@angular/material
@angular/forms
@angular/animations

hammerjs

手势，可选项