Getting Type error using Angular Material

Question

I am new for Angular and have installed angular material. I have tried for datepicker and its showing me this error :

MdInputContainer.html:1 ERROR TypeError: this.engine.setProperty is not a function
    at AnimationRenderer.webpackJsonp.../../../platform-browser/@angular/platform-browser/animations.es5.js.AnimationRenderer.setProperty (animations.es5.js:502)
    at DebugRenderer2.webpackJsonp.../../../core/@angular/core.es5.js.DebugRenderer2.setProperty (core.es5.js:13781)
    at setElementProperty (core.es5.js:9443)
    at checkAndUpdateElementValue (core.es5.js:9362)
    at checkAndUpdateElementInline (core.es5.js:9296)
    at checkAndUpdateNodeInline (core.es5.js:12375)
    at checkAndUpdateNode (core.es5.js:12321)
    at debugCheckAndUpdateNode (core.es5.js:13182)
    at debugCheckRenderNodeFn (core.es5.js:13161)
    at Object.eval [as updateRenderer] (MdInputContainer.html:1)

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {AppRoutingModule} from './app-routing.module';
import { NavigationComponent } from './navigation/navigation.component';
import { HomeComponent } from './home/home.component';
import { EditComponent } from './edit/edit.component';
import { AddComponent } from './add/add.component';
import { ShowComponent } from './show/show.component';
import { EmpService } from './emp.service';
import 'hammerjs';
import { AppComponent } from './app.component';

import {
  MdAutocompleteModule,
  MdButtonModule,
  MdButtonToggleModule,
  MdCardModule,
  MdCheckboxModule,
  MdChipsModule,
  MdCoreModule,
  MdDatepickerModule,
  MdDialogModule,
  MdExpansionModule,
  MdGridListModule,
  MdIconModule,
  MdInputModule,
  MdListModule,
  MdMenuModule,
  MdNativeDateModule,
  MdPaginatorModule,
  MdProgressBarModule,
  MdProgressSpinnerModule,
  MdRadioModule,
  MdRippleModule,
  MdSelectModule,
  MdSidenavModule,
  MdSliderModule,
  MdSlideToggleModule,
  MdSnackBarModule,
  MdSortModule,
  MdTableModule,
  MdTabsModule,
  MdToolbarModule,
  MdTooltipModule,
} from '@angular/material';

import {CdkTableModule} from '@angular/cdk';

@NgModule({
  declarations: [
    AppComponent,
    NavigationComponent,
    HomeComponent,
    EditComponent,
    AddComponent,
    ShowComponent

  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule ,
    MdDatepickerModule,
    MdNativeDateModule,
    MdInputModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    AppRoutingModule
  ],

  providers: [EmpService],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTML

<md-input-container>
  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

I have take reference from the official website of it and functionality working properly but i want to resolve the errors.

Thank you.

Answer 1

Updating angular animation to 4.3.0 resolved for me.

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

Answer 2

Try to update angular dependencies.

First, run:

npm outdated

in the folder where your package.json is situated.

If there are outdated dependencies, run:

npm update

I was also facing that problem today, and after updating packages all things started to work nicely.