2017-07-15 2 views
9

Ich bin neu für Angular und habe eckiges Material installiert. Ich habe versucht, Datepicker und sein mir diesen Fehler zeigt:Getting type error using Angular Material

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> 

ich nehme Bezug von der offiziellen Website davon und Funktionalität funktioniert einwandfrei, aber ich möchte die Fehler beheben.

Vielen Dank.

+0

teilen Sie Ihre 'app.module.ts' und html – Nehal

+0

@Nehal Bitte werfen Sie einen Blick auf die aktualisierte Version der Frage. Sowohl app.module.ts als auch HTML-Code werden jetzt hinzugefügt. – Rush1312

+0

danke für das Hinzufügen dieser Dateien. Könnten Sie bitte 'package.json' hinzufügen? Es scheint, als ob etwas von @ angular/core fehlt, was dieses Problem verursacht! – Nehal

Antwort

23

Versuchen Sie, Winkelabhängigkeiten zu aktualisieren.

Zuerst laufen:

npm outdated 

in dem Ordner, in dem package.json befindet.

Wenn es veraltet Abhängigkeiten sind, laufen:

npm update 

Ich war auch dieses Problem heute konfrontiert und nach Paketen alles begann Aktualisierung gut zu funktionieren.

+1

Ich habe das gleiche Problem wie oben beschrieben, nachdem ich @ angular/cli aktualisiert habe. Folgte Ihrem Vorschlag, nach Updates zu suchen und fand heraus, dass etwa 10 veraltet waren. Nach dem Update ging der Fehler weg. Vielen Dank! – dc922

+0

Dieser hat mir auch geholfen! Danke (Y) – Faisal

-1

Sicherstellen, dass alle Kern "@ angular/*": "^ 4.4.5". enter image description here

+2

War es wirklich einfacher für Sie, den Bildschirm zu nehmen und ihn irgendwo hochzuladen, anstatt nur Text zu kopieren/einfügen? – Styx