CODEWITHSUNDEEP
angularangular-material2
ayaz kodiya
ayaz kodiya

Reputation: 511

Not Worked md-form-field and getting errors

When i am using md-form-field tag, i getting one error as describe bellow.

Error is:

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

But i import BrowserAnimationsModule in .module.ts file but i getting error is describing bellow:

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)

How to solve it? My Material version is @angular/[email protected] and @angular/[email protected].

home.html file

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

app.module.ts file

   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 { }

Upvotes: 1

Views: 2275

Answers (1)

Igor Soloydenko
Igor Soloydenko

Reputation: 11815

Add BrowserAnimationsModule or NoopAnimationsModule to the imports: [] section of your module. Make sure to install this package: npm install --save @angular/animations.

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

or

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

will provide the module you can import. Here's the official documentation.

Upvotes: 2

Related Questions