Resolution for Nullinjectorerror: no provider for formbuilder
Issue Description:
The angular application gives an error “nullinjectorerror: no provider for formbuilder” in the browser,
nullinjectorerror: no provider for formbuilder!
OR
nullinjectorerror: r3injectorerror
Resolution:
To resolve the issue, please register FormsModule or ReactiveFormsModule in NgModule as explained below.
Please add ‘FormsModule’/ReactiveFormsModule’ in the imports section of NgModule.
Step1: In app.module.ts, please add below import statement,
import { FormsModule } from '@angular/forms'
import { ReactiveFormsModule} from '@angular/forms'
Step2: Also please update the import section as below,
imports: [
BrowserModule,
ReactiveFormsModule,//Add if needed
FormsModule, //Add if needed
HttpClientModule,
],
Example:
Sample example app.module.ts as below,
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserSettingsFormComponent } from './user-settings-form/user-settings-form.component';
@NgModule({
declarations: [
AppComponent,
UserSettingsFormComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
HttpClientModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
TEST project spec file
If the same error occurs in your TEST .spec.ts files, please register the same in .spec files.
Please add ‘FormsModule’/ReactiveFormsModule’ in the imports section of configureTestingModule.
Example:
Sample .spec file
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms'
import { ReactiveFormsModule } from '@angular/forms';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule,
ReactiveFormsModule,
FormsModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'my-app'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('my-app');
});
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to my-app!');
});
});
References:
Did the above steps resolve your issue? Please sound off in the comments below!
Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published(2024) best practices and guidelines for software design and development.
Thank you so much to exploring the solution of related problem that i have faced.
And finally i got the solution of my problem
Thanks, Akhilesh. Glad it helped you!
Thank you very much. It works
Thank you Maneesha. Glad it helped you!
i got the same question, and i also add FormsModule & ReactiveFormsModule into xxx.module.ts, but it still can not work
Hi Chole – Thanks for your query. Please add the required import statement as well along with the module.ts update. Please let me know if you still face the issue.
i had this error. FormBuilder is a child of ReactiveFormsModule. I confused FormBuilder with FormModule and didn’t read carefully. My app makes no use of FormModule but ReactiveFormModule to provide for FormBuilder. That’s just what my team went with. And even though in prod it is only required in the parent app.module.ts, in specs it seems to be required in the individual component spec – i.e. fooComponent.spec.ts, in the configureTestingModule function call. I don’t know why but I can guess. Maybe this fixes your issue.
thanks ,really works.
Thank you Austin, Glad it helped you!
Thanks bro
i just did the first two updates and it works !!
Thanks Mohamed, Glad it helped you!
Vlw pela dica, deu certo aqui.
Thank you Rafael. I appreciate your feedback. (I did use google translate to understand your feedback 🙂