ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[FormBuilder]

Question

in my angular app when I add routes in gifts-routing.module.ts this error appears and when i remove the routes it works but i still need to route so how can i solve this error

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[FormBuilder]: 
  StaticInjectorError(Platform: core)[FormBuilder]: 
    NullInjectorError: No provider for FormBuilder!
NullInjectorError: StaticInjectorError(AppModule)[FormBuilder]: 
  StaticInjectorError(Platform: core)[FormBuilder]: 
    NullInjectorError: No provider for FormBuilder!

gifts.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { GiftsRoutingModule } from './gifts-routing.module';
import { GiftListComponent } from './components/gift-list/gift-list.component';
import { GiftFormComponent } from './components/gift-form/gift-form.component';
import { SharedModule } from '../shared/shared.module';


@NgModule({
  declarations: [GiftListComponent, GiftFormComponent],
  imports: [
    CommonModule,
    GiftsRoutingModule,
    SharedModule
  ]
})
export class GiftsModule { }

gifts-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from '../shared/components/layout/layout.component';
import { GiftListComponent } from './components/gift-list/gift-list.component';


const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path:'',
        component: GiftListComponent
      }
    ]
  }
];


@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class GiftsRoutingModule { }

and I also import the ReactiveFormsModule and FormsModule inside my shared module

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SharedRoutingModule } from './shared-routing.module';
import { LayoutComponent } from './components/layout/layout.component';
import { NavbarComponent } from './components/layout/navbar/navbar.component';

import { ReactiveFormsModule, FormsModule } from '@angular/forms'
import {
  MatButtonModule,
  MatCardModule,
  MatInputModule,
  MatIconModule,
  MatTabsModule,
  MatTableModule,
  MatPaginatorModule,
  MatSortModule,
  MatProgressSpinnerModule,
  MatSlideToggleModule,
  MatDialogModule,
  MatSelectModule,
  MatDatepickerModule,
  MatToolbarModule,
  MatListModule,
  MatMenuModule,
  MatSidenavModule,
  MatTooltipModule,
  MatRadioModule,
  MatStepperModule,
  MatCheckboxModule,
  MatExpansionModule,
  MatProgressBarModule,
  MatNativeDateModule,
} from '@angular/material';
import { RouterModule } from '@angular/router';
import { FloatingButtonComponent } from './components/floating-button/floating-button.component';
import { ConfirmComponent } from './components/confirm/confirm.component';
@NgModule({
  declarations: [LayoutComponent, NavbarComponent, FloatingButtonComponent, ConfirmComponent],
  imports: [
    CommonModule,
    SharedRoutingModule,
    ReactiveFormsModule,
    RouterModule,
    FormsModule,
    CommonModule,
    MatButtonModule,
    MatMenuModule,
    MatSidenavModule,
    MatListModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatTabsModule,
    MatInputModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatProgressSpinnerModule,
    MatSlideToggleModule,
    MatDialogModule,
    MatSelectModule,
    MatDatepickerModule,
    MatProgressBarModule,
    MatTooltipModule,
    MatRadioModule,
    MatStepperModule,
    MatCheckboxModule,
    MatExpansionModule,
    MatNativeDateModule,

  ],
  exports: [
    CommonModule,
    ReactiveFormsModule,
    RouterModule,
    FormsModule,
    CommonModule,
    MatButtonModule,
    MatMenuModule,
    MatSidenavModule,
    MatListModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatTabsModule,
    MatInputModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatProgressSpinnerModule,
    MatSlideToggleModule,
    MatDialogModule,
    MatSelectModule,
    MatDatepickerModule,
    MatProgressBarModule,
    MatTooltipModule,
    MatRadioModule,
    MatStepperModule,
    MatCheckboxModule,
    MatExpansionModule,
  ],
  entryComponents: [ConfirmComponent]
})
export class SharedModule { 

}

what I should do to solve this error, please?

Need more info, It complains about formbuilder injection, Can you provide the code where you are using and injecting FORMBUILDER, also child route array has an empty path, give either parent or children non empty path. — iaq, Feb 19 '20 at 01:04
Have you used `FormBuilder` in your any component? if yes then provide that code! — Prashant Pimpale, Feb 19 '20 at 05:53
if you use FormBuilder in any component without declare please import that in component file. — StackUser, Feb 19 '20 at 06:02

score 4 · Accepted Answer · edited May 29 '20 at 14:11

4

You need to move the imports shared module to main module FormsModule and ReactiveFormsModule do not work as shared module.

edited May 29 '20 at 14:11

Monish Sen

1,773
3
20
32

answered Feb 19 '20 at 05:51

Sourav Golui

583
1
6
13

score 4 · Answer 2 · answered Feb 17 '21 at 08:38

4

I got this error when I tried to add a component in constructor as a service. I've resolved this issue by using @injectable().

you can use

@Injectable({
   providedIn: 'root',
})
export class component{}

answered Feb 17 '21 at 08:38

AMAL MOHAN N

1,416
2
14
26

score 0 · Answer 3 · edited Aug 23 '21 at 20:10

0

Import this in your app module.ts :

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

And In Imports :

imports: [
    FormsModule,
    ReactiveFormsModule,
  ],

edited Aug 23 '21 at 20:10

EJoshuaS - Stand with Ukraine

11,977
56
49
78

answered Feb 19 '20 at 06:03

void

915
8
20

but it is already working on another typical module so why here it is not can you explain that for me, please? – Kyrillos Mamdoh Feb 21 '20 at 12:58
I am not getting u..But in my opinion it should work..The fact is that in the component where u are using the formbuilder instance you have to import the Formsmodule and Reactive formsmodule in that particular component's parent Module.ts – void Feb 21 '20 at 13:32

score 0 · Answer 4 · answered Jul 27 '20 at 04:58

I figured it out. I had to include ConsoleService, which ng-select exports as "es"

So, in my app.module.ts, I had to add:import { NgSelectConfig } from '@ng-select/ng-select'; import { ɵs } from '@ng-select/ng-select';

And in providers, I added: NgSelectConfig and es

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[FormBuilder]

4 Answers4