Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[FormBuilder -> FormBuilder -> FormBuilder]

Question

I have to use my FormsModule & ReactiveFormsModule to only shared.module.ts as importing these modules are increasing main.js bundle size.

Consider an example I have module named shared.module.ts in which my FormsModule & ReactiveFormsModule and I want to use this SharedModule in some other module; but Angular compiler is throwing me an error "Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[FormBuilder -> FormBuilder -> FormBuilder]"; means anyways I need to import in AppModule & it's affecting my main.js size.

Is there any way to import in the sub-module?

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../shared/shared.module';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
  ],
  declarations: [
    HomeComponent,
  ],
})
export class HomeModule {}

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    RecaptchaFormsModule,
  ],
  declarations: [
   SomeComponent
  ],
})
export class SharedModule {}

Answer 1

Looks like you are using the FormBuilder inside a component that is declared in your AppModule.

If so you should ensure your

• SharedModule imports the two FormModules
• SharedModule also exports those two modules
• import your SharedModule inside your AppModule.