Angular material expansion panel error - TypeError: this.driver.containsElement is not a function

Question

Angular material's expansion panel depends on BrowserAnimationsModule. I have included animation module but when I create a simple expansion panel it crashes with error:

ERROR TypeError: this.driver.containsElement is not a function at TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine._balanceNamespaceList (browser.js:2765) at TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.createNamespace (browser.js:2743) at TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.register (browser.js:2784) at InjectableAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.AnimationEngine.register (browser.js:3815) at AnimationRendererFactory.push../node_modules/@angular/platform-browser/fesm5/animations.js.AnimationRendererFactory.createRenderer (animations.js:140) at DebugRendererFactory2.push../node_modules/@angular/core/fesm5/core.js.DebugRendererFactory2.createRenderer (core.js:12225) at createComponentView (core.js:11179) at callWithDebugContext (core.js:12204) at Object.debugCreateComponentView [as createComponentView] (core.js:11715) at createViewNodes (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 { }

Note that this is a simple Angular 6 application installed with @angular/material , @angular/cdk and @angular/animations

Angular and Package Versions:

Angular CLI: 6.0.7 Node: 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 @angular/animations 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

Lucas Lucas · Accepted Answer · 2018-06-27T06:49:19

There seems to be a bug with that version of animations package. Do a temporary fix and rollback to 6.0.5. It will solve your issue as shown on this stackblitz(your version of animations throws the error).

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

If this does not fix the issue, do a full update of packages in question:

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

Angular material expansion panel error - TypeError: this.driver.containsElement is not a function

2 Answers