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.
