角度材质扩展面板错误 - TypeError：this.driver.containsElement不是函数

Question

角度材质扩展面板取决于BrowserAnimationsModule。我已经包含了动画模块，但是当我创建一个简单的扩展面板时，它崩溃并出现错误：

错误TypeError：this.driver.containsElement不是TransitionAnimationEngine.push ../ node_modules上TransitionAnimationEngine.push ../ node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine._balanceNamespaceList( browser.js:2765）的函数。在TransitionAnimationEngine.push .. / node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.register（browser.js：/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.createNamespace( browser.js：2743） 2784）在InjectableAnimationEngine.push ../ node_modules/@angular/animations/fesm5/browser.js.AnimationEngine.register（browser.js：3815），在AnimationRendererFactory.push ../ node_modules / @ angular / platform-b​​rowser / fesm5 / createComponentView（core.js）上的DebugRendererFactory2.push ../ node_modules/@angular/core/fesm5/core.js.DebugRendererFactory2.createRenderer(core.js:12225）的animations.js.AnimationRendererFactory.createRenderer（animations.js：140） ：11179）在Object.de的callWithDebugContext（core.js：12204） createViewNodes上的bugCreateComponentView [as createComponentView]（core.js：11715）（core.js：11220）

home.component.html

<div class="container-fluid">
    <div id="sidebar">
        <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                This is the expansion title
              </mat-panel-title>
              <mat-panel-description>
                This is a summary of the content
              </mat-panel-description>
            </mat-expansion-panel-header>
            <p>This is the primary content of the panel.</p>
          </mat-expansion-panel>
    </div>
    <div id="map" style="height: 550px"></div>
</div>

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';

import { CoreModule } from '@app/core';
import { SharedModule } from '@app/shared';
import { HomeRoutingModule } from './home-routing.module';
import { HomeComponent } from './home.component';
import { QuoteService } from './quote.service';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { MatExpansionModule } from '@angular/material/expansion'

@NgModule({
  imports: [
    CommonModule,
    TranslateModule,
    CoreModule,
    SharedModule,
    HomeRoutingModule,
    LeafletModule,
    MatExpansionModule
  ],
  declarations: [
    HomeComponent
  ],
  providers: [
    QuoteService
  ]
})
export class HomeModule { }

请注意，这是一个安装了@ angular / material，@ angular / cdk和@ angular / animations的简单Angular 6应用程序

角度和包版本：

Angular CLI：6.0.7节点：8.9.3 OS：win32 x64 Angular：6.0.3

@ angular-devkit / architect 0.6.7 @ angular-devkit / build-angular 0.6.7 @ angular-devkit / build-optimizer 0.6.7 @ angular-devkit / core 0.6.7 @ angular-devkit / schematics 0.6.7 @角度/动画6.0.6 @ angular / cdk 6.3.1 @ angular / cli 6.0.7 @ angular / material 6.3.1 @ ngtools / webpack 6.0.7 @ schematics / angular 0.6.7 @ schematics / update 0.6.7 rxjs 6.2 .0 typescript 2.7.2 webpack 4.8.3

Answer 1

这个版本的动画包似乎有一个错误。执行临时修复并回滚到6.0.5。它将解决您的问题，如此stackblitz所示（您的动画版本会引发错误）。

npm install --save @angular/[email protected]

如果这不能解决问题，请对相关软件包进行全面更新：

$ ng update @angular/cli
$ ng update @angular/core
$ ng update @angular/material

Answer 2

此错误附带最新版本的动画模块，即@ angular / animations @ 6.0.9。但是如果我们安装@ angular / animations @ 6.0.5，问题就会排序。对于paginator以及mat-sort-header属性，此问题已得到解决。