在模块延迟加载上使用 ReactiveFormsModule答案

【问题标题】：Using ReactiveFormsModule on module lazyloaded在模块延迟加载上使用 ReactiveFormsModule
【发布时间】：2017-06-22 13:53:27
【问题描述】：

我在 Angular 4 中有这个主模块：

@NgModule({
    imports: [
        //.. other modules
        ReactiveFormsModule,
    ],
    declarations: [
        AppComponent,
        ...routingComponents,
    ],
    providers: [
        ...routingGuards,
    ],
    exports: [
        ReactiveFormsModule,
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

我还有另一个模块 AdminModule，它是从这个主 AppModule 延迟加载的。在 AdminModule 上，我有一些路线，我也使用反应形式。但是，当我尝试创建新表单时，我不断收到以下错误：

错误：模板解析错误：无法绑定到“formGroup”，因为它不是“form”的已知属性。

试图解决这个问题，我看到我必须从主模块中导出 ReactiveFormsModule 才能与其他模块一起使用，但我这样做了，但仍然出现错误。我在这里做错了什么？

【问题讨论】：

如果您在模板中声明了使用[formGroup] 的组件，则必须在模块中导入ReactiveFormsModule。看起来你应该把它导入AdminModule
@yurzui 在imports?因为如果我这样做了，那么它会给我错误，除非我还声明了 import {} from，这不需要我从主模块导出，因为我将在 AdminModule 上再次导入它。如果我不声明 import {} from 我会得到编译错误。
为什么在 AppModule 中使用exports？你在某处导入 AppModule 吗？
是的，将ReactiveFormsModule 添加到imports 数组AdminModule @NgModule
@yurzui 但就像我说的那样，这将生成同一模块的另一个导入。我想做的是使用在AppModule中导入的ReactiveFormsModule，不可以吗？

标签： angular

【解决方案1】：

我们需要在 AdminModule 中导入 ReactiveFormsModule FormsModule 以使所有指令生效：

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...

@NgModule({
  imports: [
    ...,
    FormsModule,    //added here too
    ReactiveFormsModule //added here too
  ],
  declarations: [...],
  providers: [...]
})

export class AdminModule{}

【讨论】：