ОШИБКА Ошибка: Uncaught (в обещании): NullInjectorError: StaticInjectorError (AppModule) [FormBuilder]

Question

в моем приложении angular, когда я добавляю маршруты в gifts-routing.module.ts, эта ошибка появляется, и когда я удаляю маршруты, она работает, но мне все еще нужно маршрутизировать, так как я могу решить эту ошибку

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

и я также импортирую ReactiveFormsModule и FormsModule внутри моего общего модуля

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 { 

}

что я должен делать Чтобы решить эту ошибку, пожалуйста?

Answer 1

Вам нужно переместить импорт shared module в main module FormsModule, а ReactiveFormsModule не работают на shared module.

Answer 2

Импортируйте это в ваше приложение module.ts: import {FormsModule, ReactiveFormsModule} из '@ angular / forms'; И в импорте: импорт: [FormsModule, ReactiveFormsModule,],