错误错误：未捕获（在承诺中）：错误：StaticInjectorError（AppModule）[UserRegistrationComponent - > FormBuilder]：

Question

当我点击链接routerLink =“user / registration”时：

表单应该出现在src / app / user / user-registration.component.html中，但控制台中出现错误：

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[UserRegistrationComponent -> FormBuilder]: 
  StaticInjectorError(Platform: core)[UserRegistrationComponent -> FormBuilder]: 
    NullInjectorError: No provider for FormBuilder!
Error: StaticInjectorError(AppModule)[UserRegistrationComponent -> FormBuilder]: 
  StaticInjectorError(Platform: core)[UserRegistrationComponent -> FormBuilder]: 
    NullInjectorError: No provider for FormBuilder!
    at _NullInjector.get (core.js:1002)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveNgModuleDep (core.js:10854)
    at NgModuleRef_.get (core.js:12087)
    at resolveDep (core.js:12577)
    at _NullInjector.get (core.js:1002)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveNgModuleDep (core.js:10854)
    at NgModuleRef_.get (core.js:12087)
    at resolveDep (core.js:12577)
    at resolvePromise (zone.js:809)
    at resolvePromise (zone.js:775)
    at eval (zone.js:858)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1517)

该链接位于组件src / app / core / menu / menu.component.html中

<ul>         
    <li>
        <a class="nav-link" routerLink="user/registration">Rejestracja</a>
    </li>         
</ul>

核心模块包含src / app / core / core.module.html：

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [MenuComponent],
  exports: [MenuComponent ]
})
export class CoreModule { }

src / user / user.module.ts包含以下代码：

const routes = [
  {
    path: 'user/registration',
    component: UserRegistrationComponent
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    UserRegistrationComponent
  ],
  exports: [UserRegistrationComponent, FormsModule]
})
export class UserModule { }

app.module.ts包含代码：

const routes: Routes = [
 {
    path: '',
    component: MenuComponent
  }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CoreModule,
    UserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我不知道错误是什么造成的。

Answer 1

在您的UserModule中

import { ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule, // -> this registers the formbuilder service for your module
    RouterModule.forChild(routes)
  ],
  declarations: [
    UserRegistrationComponent
  ]
})
export class UserModule { }

除非它是共享模块，否则您不需要声明导出，并且您希望在模板中使用UserModule之外的UserRegistrationComponent。