4

在我的角度应用程序中，当我在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!

礼物.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 { }

礼物-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 { 

}

请问我应该怎么做才能解决这个错误？

4

4 回答 4

4

您需要将导入移动shared module到main module FormsModule并且ReactiveFormsModule不作为shared module.

于 2020-02-19T05:51:14.070 回答
3

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

您可以使用

@Injectable({
   providedIn: 'root',
})
export class component{}
于 2021-02-17T08:38:19.633 回答
0

将此导入您的应用程序 module.ts ：

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

在进口中：

imports: [
    FormsModule,
    ReactiveFormsModule,
  ],
于 2020-02-19T06:03:26.493 回答
0

我想到了。我必须包括 ConsoleService，它 ng-select 导出为“es”

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

在提供程序中，我添加了： NgSelectConfig 和 es

于 2020-07-27T04:58:57.790 回答