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?

Sulfapyridine

could you provide the AppModule? – Willaims

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. – Bottomless

Have you used FormBuilder in your any component? if yes then provide that code! – Barrow

if you use FormBuilder in any component without declare please import that in component file. – Burnard

Answer 1

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

Housework

Answer 2

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{}

Leprosarium

Answer 3

Import this in your app module.ts :

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

And In Imports :

imports: [
    FormsModule,
    ReactiveFormsModule,
  ],

Sublunar

but it is already working on another typical module so why here it is not can you explain that for me, please? – Sulfapyridine

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 – Sublunar

Answer 4

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

Naara