Ошибка панели расширения углового материала - Ошибка типа: this.driver.containsElement не является функцией - PullRequest
0 голосов
/ 27 июня 2018

Панель расширения углового материала зависит от BrowserAnimationsModule. Я включил модуль анимации, но когда я создаю простую панель расширения, она вылетает с ошибкой:

ОШИБКА TypeError: this.driver.containsElement не является функцией в TransitionAnimationEngine.push ../ node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine._balanceNamespaceList (browser.js: 2765) в TransitionAnimationEngine.push ../ node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.createNamespace (browser.js: 2743) в TransitionAnimationEngine.push ../ node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.register (browser.js: 2784) в 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) на DebugRendererFactory2.push ../ node_modules/@angular/core/fesm5/core.js.DebugRendererFactory2.createRenderer (core.js: 12225) в createComponentView (core.js: 11179) в callWithDebugContext (core.js: 12204) в Object.debugCreateComponentView [as createComponentView] (core.js: 11715) в 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 { }

Обратите внимание, что это простое приложение Angular 6, установленное с @ angular / material, @ angular / cdk и @ angular / animations

Версии с угловым и корпусом:

Угловой CLI: 6.0.7 Узел: 8.9.3 ОС: win32 x64 Угловой: 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 typcript 2.7.2 webpack 4.8.3

Ответы [ 2 ]

0 голосов
/ 20 июля 2018

эта ошибка возникает в последней версии модуля анимации, то есть в @ angular / animations @ 6.0.9. Но если мы установим @ angular / animations @ 6.0.5, проблема будет решена. Эта проблема решена для paginator, а также для свойства mat-sort-header.

0 голосов
/ 27 июня 2018

Кажется, есть ошибка в этой версии пакета анимации. Сделать временное исправление и откат до 6.0.5. Это решит вашу проблему, как показано на этом stackblitz (ваша версия анимации выдает ошибку).

npm install --save @angular/animations@6.0.5

Если это не решает проблему, выполните полное обновление пакетов, о которых идет речь:

$ ng update @angular/cli
$ ng update @angular/core
$ ng update @angular/material
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...