ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[FormBuilder]
ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[FormBuilder]
在我的 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 { }
礼物-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 {
}
请问我应该怎么做才能解决这个错误?
您需要将导入 shared module
移动到 main module
FormsModule
和 ReactiveFormsModule
不像 shared module
那样工作。
将此导入您的应用程序 module.ts :
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
在进口中:
imports: [
FormsModule,
ReactiveFormsModule,
],
我明白了。我必须包括 ConsoleService,它 ng-select 导出为“es”
因此,在我的 app.module.ts 中,我必须添加:import { NgSelectConfig } from '@ng-select/ng-select'; import { ɵs } from '@ng-select/ng-select';
并且在提供程序中,我添加了:NgSelectConfig 和 es
当我尝试在构造函数中添加组件作为服务时出现此错误。我已经通过使用@injectable() 解决了这个问题。
你可以使用
@Injectable({
providedIn: 'root',
})
export class component{}
在我的 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 { }
礼物-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和FormsModuleshared.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 {
}
请问我应该怎么做才能解决这个错误?
您需要将导入 shared module
移动到 main module
FormsModule
和 ReactiveFormsModule
不像 shared module
那样工作。
将此导入您的应用程序 module.ts :
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
在进口中:
imports: [
FormsModule,
ReactiveFormsModule,
],
我明白了。我必须包括 ConsoleService,它 ng-select 导出为“es”
因此,在我的 app.module.ts 中,我必须添加:import { NgSelectConfig } from '@ng-select/ng-select'; import { ɵs } from '@ng-select/ng-select';
并且在提供程序中,我添加了:NgSelectConfig 和 es
当我尝试在构造函数中添加组件作为服务时出现此错误。我已经通过使用@injectable() 解决了这个问题。
你可以使用
@Injectable({
providedIn: 'root',
})
export class component{}