Angular 4中Angular Material进度转盘与进度条无法显示问题求助

Hey，我碰到过类似的Angular 4 + Material组件不显示的问题，结合你的操作步骤，这几个地方大概率是问题所在，一步步排查下：

• 先搞定版本兼容性问题
  Angular 4只能适配Angular Material 2.x的beta版本，你直接执行npm install --save @angular/material @angular/cdk会拉取最新版，这和Angular 4完全不兼容，组件自然无法渲染。先卸载现有包，安装对应版本：

  npm uninstall @angular/material @angular/cdk
  npm install --save @angular/material@2.0.0-beta.12 @angular/cdk@2.0.0-beta.12
  

• 别忘了导入Material主题样式
  Angular Material组件依赖主题样式才能正常显示，没有主题的话组件会“隐身”。打开全局样式文件src/styles.css，添加一行：

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

  如果你用的是老版Angular CLI（对应Angular 4），也可以在.angular-cli.json的styles数组里加入这个路径，效果是一样的。

• 必须添加动画模块依赖
  很多Material组件（包括进度转盘和进度条）需要动画模块支持，在app.module.ts里导入并配置：

  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  @NgModule({
    imports: [
      // 你已有的其他模块（比如BrowserModule等）
      BrowserAnimationsModule,
      MatProgressBarModule,
      MatProgressSpinnerModule
    ]
  })
  export class AppModule { }
  

• 检查模板代码是否完整
  你提到的进度条代码写了一半，当mode="determinate"时，value属性是必填项，得给它一个数值才能显示。修正后的模板代码应该是这样：

  <!-- 进度转盘 -->
  <mat-spinner></mat-spinner>
  
  <!-- 进度条（示例设置进度为50%） -->
  <mat-progress-bar mode="determinate" value="50"></mat-progress-bar>
  

• 最后确认组件已正确声明
  虽然你用ng g c first生成组件，CLI会自动把它加到app.module.ts的declarations里，但保险起见还是检查一下：

  @NgModule({
    declarations: [
      AppComponent,
      FirstComponent // 确保这一行存在
    ]
  })
  

按上面的步骤操作后，重启项目应该就能看到进度转盘和进度条正常显示了～

内容的提问来源于stack exchange，提问作者Rapido