扩展面板的上下文错误

Question

预先：我在使用mat-expansion-panel组件时遇到了一些复制官方示例的问题。

我开始使用the documentation中概述的基本代码块。这出来的是非常直接的复制粘贴;所以文件看起来像

video.component.html

<mat-expansion-panel>
<mat-expansion-panel-header>
  This is the expansion title
</mat-expansion-panel-header>
<p>This is the primary content of the panel.</p>
<mat-action-row>
  <button mat-button>Click me</button>
</mat-action-row>

video.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule }    from '@angular/http';
import { MatCardModule,MatExpansionModule } from '@angular/material';
import { VideoComponent } from './video.component';

@NgModule({
  declarations: [
    VideoComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    MatCardModule,
    MatExpansionModule
  ],
  providers: [],
  bootstrap: [VideoComponent]
})
export class VideoModule { }

video.components.ts

import { Component } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'video-root',
  templateUrl: './video.component.html',
  styleUrls: ['./video.component.css']  /* this is a blank file */
})
export class VideoComponent {
  title = 'video';
  /* snipped */
  constructor(private http: Http) { }
}

../ styles.css的

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

在页面加载时，我收到一个指向MatExpansionPanel.html的控制台错误：1：61 然后，扩展面板也不起作用〜因为它看起来或行为与文档显示的不同。 顺便说一下，你看到的按钮没有做任何事情。

我很困惑，因为我只是能够以很大程度上模仿文档的方式使用MatCard模块 - 复制粘贴的代码以及video.component.ts中的导入使得行为正常（即当我使用ngFor时表现得像我预期的那样。这有点像我把CSS带入的问题，但会导致控制台错误并导致页面上的其他角元素失败吗？

Answer 1

问题似乎是缺失导入。一旦我添加了

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

到 video.module.ts （并将BrowserAnimationsModule添加到@ NgModule.imports），一切正常。我觉得自己像个白痴或白痴的学生，但是发布这个以防其他人遇到同样的问题。