title: ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[FormBuilder]
body: <p>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</p>
  
  <pre><code>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!
  </code></pre>
  
  <p><strong>gifts.module.ts</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>gifts-routing.module.ts</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>and I also import the <strong>ReactiveFormsModule</strong> and <strong>FormsModule</strong> inside my shared module</p>
  
  <p><strong>shared.module.ts</strong></p>
  
  <pre><code>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 { 
  
  }
  </code></pre>
  
  <p>what I should do to solve this error, please?</p>