title: Angular <mat-expansion-panel-header> does not load
body: <p>Whenever I use tag mat-expansion-panel-header in html I get error in console.</p>
  
  <p>Using <a href="https://material.angular.io/components/expansion/overview" rel="nofollow noreferrer">https://material.angular.io/components/expansion/overview</a> basic expansion panel example.</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'pipe' of undefined
  at new MatExpansionPanelHeader (expansion.es5.js:326)
  at createClass (core.js:9103)
  at createDirectiveInstance (core.js:8978)
  at createViewNodes (core.js:10198)
  at callViewAction (core.js:10514)
  at execComponentViewsAction (core.js:10433)
  at createViewNodes (core.js:10226)
  at createRootView (core.js:10112)
  at callWithDebugContext (core.js:11143)
  at Object.debugCreateRootView [as createRootView] (core.js:10630)
  View_TrainingOptionsComponent_0 @ TrainingOptionsComponent.html:25
  </code></pre>
  
  <p>I have MatExpansionModule in module.ts.</p>
  
  <p>Versions in package.json:</p>
  
  <ul>
  <li>"@angular/material": "^6.3.3",</li>
  <li>"@angular/material-moment-adapter": "^6.3.3",</li>
  <li>"typescript": "^2.7.2"</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div fxLayoutAlign="space-between stretch" class="options-list-container"&gt;
            &lt;div class="options-list"&gt;
              &lt;mat-divider class="mat-divider"&gt;&lt;/mat-divider&gt;
              &lt;mat-accordion *ngFor="let option of filteredHeaders" class="option mat-accordion" data-id="{{option.id}}"&gt;
                &lt;mat-expansion-panel #optionPanel&gt;
                  &lt;mat-expansion-panel-header class="mat-expansion-panel-header"&gt;
                    &lt;mat-panel-title fxFlex.lg="70" fxFlex.xs="70" fxFlex.md="70"&gt;
                      {{option.title}}
                    &lt;/mat-panel-title&gt;
                    &lt;mat-panel-title fxFlex.lg="15" fxFlex.xs="70" fxFlex.md="70"&gt;
                      {{option.dateFrom | date:'dd-MM-yyyy'}}
                    &lt;/mat-panel-title&gt;
                    &lt;mat-panel-title class="status" fxFlex.lg="15" fxFlex.xs="15"&gt;
                      {{option.price}} + ~{{option.additionalPrice}} EUR
                    &lt;/mat-panel-title&gt;
                  &lt;/mat-expansion-panel-header&gt;
                  &lt;app-option-details *ngIf="optionPanel._getExpandedState() === 'expanded'"
                                      [id]="option.id"
                                      (dateEmitter)="getDates($event)"&gt;
  
                  &lt;/app-option-details&gt;
                  &lt;div fxFlex="100" fxLayout="row" fxLayoutAlign="end center"&gt;
                    &lt;div fxFlex="50" fxLayout.lt-lg="100" fxLayoutAlign="start center"&gt;
                      &lt;button mat-raised-button color="primary" (click)="openEditOption(option.id); editMode = true"&gt;EDIT OPTION&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div fxFlex="100" fxLayout.lt-lg="100" fxLayoutAlign="end center"&gt;
                      &lt;button mat-raised-button color="primary" (click)="openDialog(option);"&gt;APPLY&lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/mat-expansion-panel&gt;
              &lt;/mat-accordion&gt;
            &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { trigger, style, animate, transition } from '@angular/animations'
  import { HttpErrorResponse } from '@angular/common/http';
  import { Observable } from 'rxjs';
  import { MatDialog } from '@angular/material';
  import { ITrainingOption } from '../shared/trainingOption.model';
  import { ISelector } from '../shared/selector.model';
  import { IOptionHeader } from '../shared/optionHeader.model';
  import { ApiService } from '../shared/api.service';
  import { FormGroup, FormControl } from '@angular/forms';
  import { ApplicationsComponent } from './applications/applications.component';
  import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
  import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
  
  export const dateFormat = {
    parse: {
      dateInput: 'l',
    },
    display: {
      dateInput: 'l',
      monthYearLabel: 'MMM YYYY',
      dateA11yLabel: 'l',
      monthYearA11yLabel: 'MMMM YYYY',
    },
  };
  
  export interface IIsInternalSelect {
    value: boolean;
    viewValue: string;
  }
  
  @Component({
    selector: 'app-options',
    templateUrl: './training-options.component.html',
    styleUrls: ['./training-options.component.scss'],
    providers: [
      {
        provide: DateAdapter,
        useClass: MomentDateAdapter,
        deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MAT_DATE_FORMATS]
      },
      {
        provide: MAT_DATE_FORMATS,
        useValue: dateFormat
      },
      { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
      { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
    ],
    animations: [
      trigger(
        'enterAnimation', [
          transition(':enter',
            [
              style({ transform: 'translateX(100%)' }),
              animate('400ms', style({ transform: 'translateX(0)' }))
            ]),
          transition(':leave', [
            style({ transform: 'translateX(0)' }),
            animate('200ms', style({ transform: 'translateX(100%)' }))
          ])
        ]
      )
    ],
  })
  
  export class TrainingOptionsComponent implements OnInit {
    constructor(private apiService: ApiService, public dialog: MatDialog) { }
  
    ngOnInit(): void {
      this.getCategories();
      this.getEventTypes();
      this.getHeaders();
    }
  
    form = new FormGroup({
      id: new FormControl(),
      title: new FormControl(),
      link: new FormControl(),
      description: new FormControl(),
      categoryId: new FormControl(),
      periodFrom: new FormControl(),
      periodTo: new FormControl(),
      price: new FormControl(),
      additionalPrice: new FormControl(),
      eventTypeId: new FormControl(),
      isInternal: new FormControl(),
      isFullDay: new FormControl(),
      createdById: new FormControl()
    });
  
    isAddOptionShown: boolean;
    minDateFrom: Date = new Date();
    minDate: Date;
    maxDate: Date;
  
    categories: ISelector[] = [];
    eventTypes: ISelector[] = [];
    headers: IOptionHeader[] = [];
    filteredHeaders: IOptionHeader[] = [];
    optionDates: Date[] = [];
  
    organizerTypes: IIsInternalSelect[] = [
      { value: true, viewValue: 'Internal' },
      { value: false, viewValue: 'External' }
    ];
  
    openDialog(option: IOptionHeader): void {
      this.dialog.open(ApplicationsComponent, {
        data: {
          opt: option,
          dates: this.optionDates
        }
      });
    }
  
    set searchString(value: string) {
      this.filteredHeaders = value ? this.performFilter(value) : this.headers;
    }
  
    performFilter(filterBy: string): IOptionHeader[] {
      filterBy = filterBy.toLocaleLowerCase();
      return this.headers.filter((header: IOptionHeader) =&gt;
        header.title.toLocaleLowerCase().indexOf(filterBy) !== -1);
    }
  
    submitOption(option: ITrainingOption) {
      this.apiService.addOrUpdateOption(option).subscribe(() =&gt; {
        this.isAddOptionShown = false;
        this.getHeaders();
      });
    }
  
    getHeaders() {
      this.apiService.getTrainingOptionHeaders().subscribe(
        x =&gt; {
          this.headers = x;
          this.filteredHeaders = x;
        }
      );
    }
  
    getCategories() {
      this.apiService.getCategories().subscribe(
        categories =&gt; {
          this.categories = categories;
        });
    }
  
    getEventTypes() {
      this.apiService.getEventTypes().subscribe(
        eventTypes =&gt; {
          this.eventTypes = eventTypes;
        });
    }
  
    openEditOption(editOptionId: number) {
      this.apiService.getTrainingOption(editOptionId).subscribe(x =&gt; {
        this.form.setValue({
          'id': x.id,
          'title': x.title,
          'description': x.description,
          'link': x.link,
          'categoryId': x.categoryId,
          'eventTypeId': x.eventTypeId,
          'isInternal': x.isInternal,
          'price': x.price,
          'additionalPrice': x.additionalPrice,
          'periodFrom': x.periodFrom,
          'periodTo': x.periodTo,
          'isFullDay': x.isFullDay,
          'createdById': x.createdById
        });
        this.isAddOptionShown = true;
        this.minDateFrom = x.periodFrom;
        this.minDate = x.periodFrom;
        this.maxDate = x.periodTo;
      });
    }
  
    getDates(dates: Date[]) {
      this.optionDates = dates;
    }
  
    resetForm() {
      this.form.setValue({
        'id': 0,
        'title': '',
        'description': '',
        'link': '',
        'categoryId': '',
        'eventTypeId': '',
        'isInternal': false,
        'price': 0,
        'additionalPrice': 0,
        'periodFrom': null,
        'periodTo': null,
        'isFullDay': false,
        'createdById': '.'
      });
      this.minDateFrom = new Date();
      this.minDate = this.minDateFrom;
      this.maxDate = null;
    }
  }
  </code></pre>
  
  <p>module.ts</p>
  
  <pre><code>import {
    MatExpansionModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatInputModule,
    MatToolbarModule,
    MatIconModule,
    MatListModule,
    MatSelectModule,
    MatDatepickerModule,
    MatNativeDateModule,
  } from '@angular/material';
  import { MatChipsModule } from '@angular/material/chips';
  import { CoreModule } from '../core/core.module';
  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { TrainingOptionsComponent } from './training-options.component';
  import { FlexLayoutModule } from '@angular/flex-layout';
  import { MatCardModule } from '@angular/material/card';
  import { CommonModule } from '@angular/common';
  import { MatCheckboxModule } from '@angular/material/checkbox';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { ApplicationsComponent } from './applications/applications.component';
  import { TrainingRequestsModule } from '../training-requests/training-requests.module';
  
  export const appRoutes: Routes = [
    { path: '', component: TrainingOptionsComponent },
    { path: 'application', component: ApplicationsComponent }
  ];
  
  @NgModule({
    imports: [
      MatCardModule,
      FlexLayoutModule,
      MatButtonModule,
      MatButtonToggleModule,
      MatInputModule,
      MatToolbarModule,
      MatIconModule,
      MatCheckboxModule,
      MatListModule,
      MatChipsModule,
      MatSelectModule,
      MatDatepickerModule,
      MatNativeDateModule,
      MatExpansionModule,
      CoreModule,
      CommonModule,
      RouterModule.forChild(appRoutes),
      FormsModule,
      ReactiveFormsModule,
      TrainingRequestsModule
    ],
    declarations: [TrainingOptionsComponent, ApplicationsComponent],
    exports: [],
  })
  export class TrainingOptionsModule { }
  </code></pre>
  
  <p>EDIT: Added code. For a record, doesn't work even if I change html to basic expansion panel example's html. Link is in second line.</p>