CODEWITHSUNDEEP
javascriptangulartypescriptecmascript-6single-page-application
rezanouri
rezanouri

Reputation: 137

Unexpected value 'FormBuilder' imported by the module 'AppModule'. Please add a @NgModule annotation

How to add formbulder in app.module

Unexpected value FormBuilder imported by the module AppModule. Please add a @NgModule annotation.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import {FormBuilder, FormControl, FormGroup, Validators, FormsModule} from '@angular/forms';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { ClientComponent } from './client/client.component';
    import { ClientTaskComponent } from './clienttask/clienttask.component';
    import { ClientService } from './client/sherad/client.service';


    @NgModule({
      declarations: [
        AppComponent, ClientComponent, ClientTaskComponent, ClientService
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        FormsModule,
        FormBuilder,
        FormGroup,
        FormControl
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Upvotes: 2

Views: 8696

Answers (5)

Rich
Rich

Reputation: 4248

When upgrading an Angular project from a non-Ivy version to one that uses Ivy, issues like these can occur due to cached build artifacts or old dependencies lingering in your project. This was my case and here's what worked for me:

  • Delete the node_modules folder: This will clear out any outdated dependencies that may not be compatible with the Ivy compiler.
rm -rf node_modules
  • Delete the .angular/cache folder: Angular keeps a cache of previous builds to speed up compilation, but this cache can sometimes conflict with newer versions of Angular or when switching to Ivy.
rm -rf .angular/cache

This process resolved the issues I encountered during my upgrade from a non-Ivy version to Ivy.

Upvotes: 0

Zia Khan
Zia Khan

Reputation: 425

Real and Simple solution that worked in my Code. Just comment these two imports in that particular Module i.e. in my Code HomeModule.ts Comment these //FormsModule, //FormControl

Upvotes: 0

Gajanan Shinde
Gajanan Shinde

Reputation: 133

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http"; import {FormBuilder, FormControl, FormGroup, Validators, FormsModule} from '@angular/forms'; ........................///Remove this

import { FormsModule, ReactiveFormsModule } from "@angular/forms";..........//Add this

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ClientComponent } from './client/client.component';
import { ClientTaskComponent } from './clienttask/clienttask.component';
import { ClientService } from './client/sherad/client.service';


@NgModule({
  declarations: [
    AppComponent, ClientComponent, ClientTaskComponent, ClientService
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    FormBuilder,.........///Remove this
    FormGroup,...........///Remove this
    FormControl..........///Remove this
    ReactiveFormsModule ..........//Add this
], 
providers: [], 
bootstrap: [AppComponent] 
}) 

export class AppModule { }

And import this in your .ts

import {FormBuilder, FormControl, FormGroup, Validators, FormsModule} from '@angular/forms';

Always remember in

@NgModule
(

declaration contains only components

imports contains only modules

providers contains only services

Upvotes: 4

Tony
Tony

Reputation: 20082

You cant add FormBuilder to your module you can only add these to your module 

import { FormsModule, ReactiveFormsModule } from "@angular/forms";

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ],

Upvotes: 2

SiddAjmera
SiddAjmera

Reputation: 39432

imports array only accepts Angular Modules.

Instead of 

import {FormBuilder, FormControl, FormGroup, Validators, FormsModule} from '@angular/forms';

Just import:

import {ReactiveFormsModule} from '@angular/forms';

ReactiveFormsModule is the module that FormBuilder, FormControl, FormGroup, Validators etc are exposed from. So to use them, you'll have to import the ReactiveFormsModule in your Angular Module.

And add just that the imports array.

@NgModule({
  declarations: [
    AppComponent, ClientComponent, ClientTaskComponent, ClientService
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

FormBuilder, FormControl, FormGroup, Validators etc, should only be imported in the Components/Services and used there. They're not really required in Angular Module Files.

Upvotes: 4

Related Questions