错误：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 { 

}

请问我应该做什么来解决这个错误？

- Kyrillos Mamdoh

---

你能提供 AppModule 吗？ - Andrei

需要更多信息，它抱怨了formbuilder注入。您能提供使用和注入FORMBUILDER的代码吗？此外，子路由数组具有空路径，请提供父级或子级非空路径。 - iaq

你在任何组件中使用过 FormBuilder 吗？如果是的话，请提供那段代码！ - Prashant Pimpale

如果您在任何组件中使用FormBuilder而没有声明，请在组件文件中导入它。 - StackUser

Answer 1

当我试图在构造函数中将组件作为服务添加时，出现了这个错误。通过使用 @injectable()，我已经解决了这个问题。

你可以使用

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

- AMAL MOHAN N

Answer 2

你需要将导入共享模块移到主模块中。 FormsModule和ReactiveFormsModule不适用于共享模块。

- Sourav Golui

Answer 3

我解决了这个问题。我需要包含ConsoleService，它被ng-select导出为“es”

因此，在我的app.module.ts中，我必须添加：import { NgSelectConfig } from '@ng-select/ng-select'; import { ɵs } from '@ng-select/ng-select';

并且在providers中，我添加了：NgSelectConfig和es

- shwetali

Answer 4

在你的应用模块中导入此文件：

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

在 Imports 中：

imports: [
    FormsModule,
    ReactiveFormsModule,
  ],

- void

---

但它已经在另一个典型的模块上运行，为什么在这里不行呢？你能为我解释一下吗？ - Kyrillos Mamdoh

我不太明白你的意思，但我认为它应该可以工作。事实上，在使用表单构建器实例的组件中，您必须在该特定组件的父模块.ts中导入Forms模块和Reactive Forms模块。 - void