Angular Ivy：无法绑定到“formGroup”，因为它不是“form”的已知属性。但是 ReactiveFormsModule 和 FormsModule 被导入答案

【问题标题】：Angular Ivy: Can't bind to 'formGroup' since it isn't a known property of 'form'. However ReactiveFormsModule and FormsModule is importedAngular Ivy：无法绑定到“formGroup”，因为它不是“form”的已知属性。但是 ReactiveFormsModule 和 FormsModule 被导入
【发布时间】：2021-01-31 07:04:14
【问题描述】：

我目前对如何解决此问题感到困惑。正如我从许多其他帖子中发现的那样，解决此问题的通常方法是将 ReactiveFormsModule 和 FormsModule 导入 app.module.ts

我什至将它包含在使用响应式表单的其他子模块中（OrganisationFormComponent 和 TeamFormComponent）。但是，我在 Visual Studio Code 终端中看到了下面显示的错误。

无法绑定到“formGroup”，因为它不是“form”的已知属性。

...两次用于单独的组件。看： Errors In Console Screenshot

我也试过替换

[formGroup]=

到

formGroup=

但这里没有运气。

当前错误不允许我的表单正确提交，因此无法写入 Firebase 后端。

可以在此处找到 GitHub 存储库以进行进一步分析：https://github.com/joeserve/CRUD-Project

组织形式组件

<div>
<h1>{{ !organisationId ? "Create Organisation" : "Edit Organisation" }}</h1>
<form [formGroup]="organisationForm" (submit)="onSubmit()">
    <div class="form-group">
        <label>Name</label>
        <input type="text" formControlName="name" class="form-control" maxlength="20">
    </div>
    <button type="submit">Save</button>
</form>

团队表单组件

<div>
<h1>{{ !teamId ? "Create Team" : "Edit Team" }}</h1>
<form [formGroup]="teamForm" (submit)="onSubmit()">
    <div class="form-group">
        <label>Name</label>
        <input type="text" formControlName="name" class="form-control" maxlength="20">
    </div>
    <button type="submit">Save</button>
</form>

组织模块

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { OrganisationFormComponent } from './organisation-form/organisation-form.component';
import { OrganisationRoutingModule } from './organisation-routing.module';
import { OrganisationComponent } from './organisation.component';

@NgModule({
declarations: [OrganisationComponent,OrganisationFormComponent],
exports: [OrganisationComponent,OrganisationFormComponent],
imports:[
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule ,
    OrganisationRoutingModule,
    BrowserModule],
})
export class OrganisationModule{}

团队模块

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { TeamFormComponent } from './team-form/team-form.component';
import { TeamRoutingModule } from './team-routing.module';
import { TeamComponent } from './team.component';
@NgModule({
declarations: [TeamComponent,TeamFormComponent],
exports: [TeamComponent,TeamFormComponent],
imports:[
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule ,
    TeamRoutingModule,
    BrowserModule],
})
export class TeamModule{}

app.module.ts

@NgModule({
 declarations: [
   AppComponent,
   FleetComponent,
   UnitComponent,
   AgentComponent,
   HomeComponent,
   TeamComponent,
   StaffComponent,
   LoginComponent,
],
 imports: [
   BrowserModule,
   FormsModule, 
   ReactiveFormsModule,
   HttpClientModule,
   CommonModule,
   RouterModule, 
   AngularFireModule.initializeApp(environment.firebaseConfig),
   AngularFirestoreModule,
   AngularFireDatabaseModule,
   appRoutingModule,
 ],
providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },

    // provider used to create fake backend
    fakeBackendProvider, <-- Not relevant
    OrganisationService,
    TeamService
],
bootstrap: [AppComponent]
})
export class AppModule { }

对于我在问题中提供的任何过多的 sn-ps 或信息，我深表歉意

信息更新：

我在应用内的两个模块中延迟加载：

app.routing.ts

 path: 'organisation', loadChildren: () => import('./organisation/organisation-routing.module').then(m => m.OrganisationRoutingModule)

organisation-routing.module.ts

path: ':organisationId/teams', loadChildren: () => import('./team/team-routing.module').then(m => m.TeamRoutingModule)

这可能是问题的根源吗？

【问题讨论】：

你试过重启服务器吗？
这看起来不错..应该可以工作，除非我遗漏了一些明显的东西..只是为了确保，您是否真的在您的应用程序模块中导入了您的功能模块..？还是它们是延迟加载的？
更新了关于延迟加载的帖子

标签： angular typescript forms module angular-reactive-forms

【解决方案1】：

这里的问题是您在延迟加载的路由中指向错误的模块：

app.routing.ts

{
  path: 'organisation',
  loadChildren: () => import('./organisation/organisation-routing.module')
                              .then(m => m.OrganisationRoutingModule) 
}

应该是：

{
  path: 'organisation',
  loadChildren: () => import('./organisation/organisation.module')
                                   .then(m => m.OrganisationModule)
}

organisation-routing.module.ts

{
  path: ':organisationId/teams',
  loadChildren: () => import('./team/team-routing.module').then(m => m.TeamRoutingModule)
},

应该是

{
  path: ':organisationId/teams',
  loadChildren: () => import('./team/team.module').then(m => m.TeamModule)
},

【讨论】：