I have been working on my app. I want to use ReactiveFormsModule module but I am getting

Error: Unexpected module 'ReactiveFormsModule' declared by the module 'AppModule'

I have installed angular/forms into my project but nothing seems to work. Any idea?

My ponent.ts file

import {Component} from '@angular/core';
import {FormGroup, FormControl} from '@angular/forms';


@Component({
  selector: 'app-crm-search',
  templateUrl: './crm-searchponent.html',
  styleUrls: ['./crm-searchponent.css'],
})
export class CrmSearchComponent{
  constructor() {
  }

  userForm = new FormGroup({
    searchTerm: new FormControl()
  });

  onSubmit(){
    console.log(this.userForm.value());
  }
}

My app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {AlertModule} from 'ng2-bootstrap';
import {Select2Module} from 'ng2-select2';
import {RoutingModule} from './routing.module';
import {ReactiveFormsModule} from '@angular/forms';


import {AppComponent} from './appponent';
import {NavBarComponent} from './ponents/nav-bar/nav-barponent';
import {IndexComponent} from './index/indexponent';
import {CrmIndexComponent} from './crm/crm-index/crm-indexponent';

import {CrmSearchComponent} from './crm/crm-search/crm-searchponent';
import {CrmSearchResultComponent} from './crm/crm-search-result/crm-search-resultponent';

@NgModule({
    declarations: [
        AppComponent,
        NavBarComponent,
        IndexComponent,
        CrmIndexComponent,
        CrmSearchComponent,
        CrmSearchResultComponent,
        ReactiveFormsModule

    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RoutingModule,
        Select2Module,
        [AlertModule.forRoot()]
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

I have been working on my app. I want to use ReactiveFormsModule module but I am getting

Error: Unexpected module 'ReactiveFormsModule' declared by the module 'AppModule'

I have installed angular/forms into my project but nothing seems to work. Any idea?

My ponent.ts file

import {Component} from '@angular/core';
import {FormGroup, FormControl} from '@angular/forms';


@Component({
  selector: 'app-crm-search',
  templateUrl: './crm-search.ponent.html',
  styleUrls: ['./crm-search.ponent.css'],
})
export class CrmSearchComponent{
  constructor() {
  }

  userForm = new FormGroup({
    searchTerm: new FormControl()
  });

  onSubmit(){
    console.log(this.userForm.value());
  }
}

My app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {AlertModule} from 'ng2-bootstrap';
import {Select2Module} from 'ng2-select2';
import {RoutingModule} from './routing.module';
import {ReactiveFormsModule} from '@angular/forms';


import {AppComponent} from './app.ponent';
import {NavBarComponent} from './ponents/nav-bar/nav-bar.ponent';
import {IndexComponent} from './index/index.ponent';
import {CrmIndexComponent} from './crm/crm-index/crm-index.ponent';

import {CrmSearchComponent} from './crm/crm-search/crm-search.ponent';
import {CrmSearchResultComponent} from './crm/crm-search-result/crm-search-result.ponent';

@NgModule({
    declarations: [
        AppComponent,
        NavBarComponent,
        IndexComponent,
        CrmIndexComponent,
        CrmSearchComponent,
        CrmSearchResultComponent,
        ReactiveFormsModule

    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RoutingModule,
        Select2Module,
        [AlertModule.forRoot()]
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

• javascript
• angular
• typescript
• import

1 Answer 1

You need to add it to your imports, rather than your declarations