Using ReactiveFormsModule on module lazyloaded

Question

I have this main module in Angular 4:

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

export class AppModule { }

I also have another module, AdminModule, that is lazy loaded from this main AppModule. On the AdminModule I have some routes where I also use the reactive form. However, when I try to create a new form I keep getting errors like these:

Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'.

Trying to fix this problem, I saw that I had to export the ReactiveFormsModule from the main module in order to use with other modules, but I'm doing so and still getting the error. What am I doing wrong in here?

You have to import `ReactiveFormsModule` in the module were you have declared component that is used `[formGroup]` in template. Looks like you should import it in `AdminModule` — yurzui, Jun 22 '17 at 13:56
@yurzui within the `imports`? Because if I do, then it gives me errors unless I also declare a `import {} from`, which doesn't require me to export from the main module, since I'll be importing it again on the AdminModule. And if i don't declare `import {} from` i get compilation errors. — celsomtrindade, Jun 22 '17 at 13:59
Why are you using `exports` in AppModule? Do you import AppModule somewhere? — yurzui, Jun 22 '17 at 14:02
Yes, add `ReactiveFormsModule` to `imports` array of `AdminModule @NgModule` — yurzui, Jun 22 '17 at 14:03
@yurzui but like I said, that will generate another import of the same module. What I'd like to do is to use the ReactiveFormsModule that is imported in the AppModule, isn't it possible to do? — celsomtrindade, Jun 22 '17 at 14:07
You can use it only if you import AppModule in AdminModule but you should not do this. See also https://stackoverflow.com/questions/39601784/angular-2-use-component-from-another-module/39601837#39601837 — yurzui, Jun 22 '17 at 14:09
But in this case, isn't it going to generate 2 chunks using the same code? In this case then I would need to create a third module, lets say `ShareModule`, where I import/export only shared modules used both in the AppModule and AdminModule? Ex.: RouterModule, ReactiveFormsModule. — celsomtrindade, Jun 22 '17 at 14:12
Just try it. angular-cli has some problems with it but in common cases it should works well. — yurzui, Jun 22 '17 at 14:15

score 2 · Accepted Answer · answered Jul 04 '17 at 11:13

We needed to import ReactiveFormsModule FormsModule in AdminModule in order to make all directives to work:

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

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

export class AdminModule{}

Using ReactiveFormsModule on module lazyloaded

1 Answers1