angular - 使用 Angular Material 获取类型错误

Question

我是 Angular 的新手，已经安装了 Angular Material 。我已经尝试过 datepicker，它向我显示了这个错误:

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)

应用程序模块.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>

我已经引用了它的官方网站并且功能正常工作，但我想解决错误。

谢谢。

Answer 1

尝试更新 Angular 依赖。

首先，运行:

npm outdated

在您的 package.json 所在的文件夹中。

如果有过时的依赖，运行:

npm update

我今天也遇到了这个问题，更新软件包后一切都开始正常工作。