Odtnhj

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.

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.

Updating angular animation to 4.3.0 resolved for me.

npm install --save @angular/animations@4.3.0

Need to make sure all core "@angular/*": "^4.4.5".