在嵌套的导入模块中导入 ReactiveFormsModule 会使应用程序崩溃答案

【问题标题】：Importing ReactiveFormsModule in a nested imported module makes app crash在嵌套的导入模块中导入 ReactiveFormsModule 会使应用程序崩溃
【发布时间】：2020-02-23 13:19:02
【问题描述】：

我正在使用一个带有共享组件的模块，我在整个应用程序中都使用它，我们称之为 SharedModule。所以直到现在一切正常，但我在 SharedModule 中添加了一个使用表单的组件，因此我将 ReactiveFormsModule 添加到 SharedModule 导入中。然后当我在另一个导入 SharedModule 并且也有一个表单的模块中遇到一个令人困惑的错误时，它也导入了 ReactiveFormsModule。错误如下：

ERROR Error: Uncaught (in promise): Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup

我已尝试从后面的模块中删除 ReactiveFormsModule，但随后显示错误，指出 formgroup 是表单的未知属性，需要转换为 ReactiveFormsModule。

所以我的 SharedModule 看起来像这样：

@NgModule({
  imports: [CommonModule, TranslateModule.forChild(), IonicModule, ReactiveFormsModule], <-- ReactiveFormsModule import
  declarations: [
    FooterComponent,
    HeaderComponent,
    NoContentComponent,
    ModalLiveDeploy,
    PickerDirective,
    SelectComponent,
    InputComponent,
    RadioGroupComponent,
    CardComponent,
    SliderComponent,
    AccordionComponent,
    RadioComponent,
    CmbModalComponent <-- this is the one with the form in it
  ],
  entryComponents: [ModalLiveDeploy, CmbModalComponent],

另一个显示错误的模块是这样的：

@NgModule({
  declarations: [MainComponent], <-- this component has a form
  imports: [
    CommonModule,
    IonicModule,
    RouterModule.forChild(routes),
    TranslateModule.forChild(),
    SharedModule, <-- SharedModule which also imports ReactiveFormsModule 
    ReactiveFormsModule <-- ReactiveFormsModule import
  ]
})

在将冲突组件添加到 SharedModule 和 ReactiveFormsModule 之前，它就像一个魅力，所以这就是为什么我认为显示的错误不相关。任何想法为什么会发生这种情况？

【问题讨论】：

您的反应式表单是否有 formGroup？从字面上看，该错误表示您的 formControls 没有父 formGroup - 所以我可以确认您的表单设置有表单组吗？
是的，事实上，如果我从 SharedModule 中删除冲突组件和 ReactiveForm 导入，它可以正常工作
另外，请确保不要在同一个输入中混合 [(ngModule)] 和 formControlName。始终将您的 formControls 包装在容器中，例如
是的，我已经检查过以防万一，但我没有在任何输入中混合 ngModel 和 formControlName

标签： angular ionic-framework

【解决方案1】：

我发现了错误，以防将来对任何人有帮助：

所以问题是我实际上使用了 formControlName 属性而不使用 formGroup，但它位于 SharedModule 的旧组件中，而不是新组件中。它之前没有引发任何标志，因为我没有在 SharedModule 中导入 ReactiveFormsModule，一旦我这样做它就崩溃了，问题是错误跟踪指向了一个不同的模块，一个我正在使用有上述错误的组件的地方，那就是是什么让我发疯。

总结一下，如果你将 ReactiveFormsModule 添加到一个模块中，然后突然看到这样的错误，请确保检查每个组件，即使是你有一段时间没有修改的组件。

【讨论】：

它还帮助我使用“npm update”，它给了我更好的错误信息。