Question

当我使用md-form-field标签时，我收到一个错误，如下所述。

错误是：

ERROR Error: Found the synthetic property @transitionMessages. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
    at checkNoSyntheticProp (platform-browser.es5.js:2930)
    at DefaultDomRenderer2.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.setProperty

但是我在BrowserAnimationsModule文件中导入了.module.ts，但我收到错误的描述如下：

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
    at new BrowserModule (platform-browser.es5.js:4161)
    at _createClass (core.es5.js:9528)

如何解决？我的素材版本为@angular/material@2.0.0.beta.10和@angular/CDK@2.0.0.beta.10。

home.html文件

<md-form-field>
  <input type="text" mdInput >
</md-form-field>

app.module.ts文件

   import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from './common/common.module';
import { AppComponent } from './app.component';
import { AuthLayoutComponent } from './common/services/index.service';
import { AppRoutesModule } from './app.routing';
import {
   SessionModule
} from './session/session.module';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthService } from './common/services/authservice';
import { AuthGuard } from './common/services/auth-guard.service';
import { SourcesModule } from './sources/sources.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    AuthLayoutComponent,
    DashboardComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutesModule,
    MaterialModule,
    SessionModule,
    SourcesModule
  ],
  providers: [AuthGuard, AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

将BrowserAnimationsModule或NoopAnimationsModule添加到模块的imports: []部分。请务必安装此软件包：npm install --save @angular/animations。

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

或

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

将提供您可以导入的模块。这是official documentation。

没有工作的md-form-field并且收到错误

1 个答案: