点击链接 routerLink ="用户/注册" :
表单应显示为 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 { }
我不知道错误导致的是什么。
答案 0 :(得分:0)
在您的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。