Cfrgtkky

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".