Angular: reactive module import does not find `formGroup` directive

Question

I have already taken a look at this question which had a lot of answers (all the same) but it could not fix my problem.

Let me quickly lay out my project structure

@NgModule({
  declarations: [AppComponent],
  imports: [AppRoutingModule, GlobalModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}


const routes: Routes = [
  {
    path: 'Session',
    loadChildren: () => import('./session/session-routing.module').then((m) => m.SessionRoutingModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

I have a fairly new project and I employ lazy loading routes. The session routing module is defined as following

const routes: Routes = [{ path: 'Login', component: LoginComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SessionRoutingModule {}

and my LoginComponent is declared in the SessionModule

@NgModule({
  declarations: [LoginComponent],
  imports: [GlobalModule]
})
export class SessionModule {}

You can see that both the SessionModule and the AppModule import the GlobalModule. This is a module I made to import everywhere since it will export a lot of stuff which will be used practically everywhere.

@NgModule({
  declarations: [],
  exports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialComponentsModule, PipesModule, BrowserModule, PlatformModule]
})
export class GlobalModule {}

That's all there is to the modules. Now for the loginComponent's HTML

<form [formGroup]="form" (ngSubmit)="submit()" class="vh-100 gradient-custom"></form>

This will throw the error

Error: src/app/session/login/login.component.html:1:7 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

All answers I could find is 'You need to import the ReactiveFormsModule'. But I definitely do that by importing the globalModule which exports those. I also simply out of frustation added those to my SessionModule

@NgModule({
  declarations: [LoginComponent],
  imports: [GlobalModule, FormsModule, ReactiveFormsModule]
})
export class SessionModule {}

But still the same error. And I cannot find where it comes from. The LoginComponent is declared in the same module that imports those FormModules. Has it something to do with routing? What am I missing? I already tried a lot of combinations for my imports.

EDIT: Even VsCode can find the documentation of the directive when I ctrl+click on it Error screenshot below

Pretty sure your `GlobalModule` also needs to have `imports: [... all the modules]` in order for them to be exported. — , Jul 11 '22 at 09:43
@MikeS. that was also something I wasn't fully sure of wether or not I need to import what I export. But this is one of the countless combination I also tried as well; importing all the exporting modules in my `GlobalModule`. It still yields the same error — Wouter Vandenputte, Jul 11 '22 at 09:45
I just checked and you indeed do not need to import it beforehand, learned something new ;) — , Jul 11 '22 at 09:47
There isn't much else I can see that produces that error, can you by any chance reproduce this on [stackblitz](https://www.stackblitz.com)? — , Jul 11 '22 at 09:48
@MikeS. Sure, it was weirdly enough very simple to recreate it https://stackblitz.com/edit/angular-ivy-nnmgbs?file=src%2Fapp%2Fsession%2Fsession.module.ts,src%2Fapp%2Fglobal%2Fglobal.module.ts — Wouter Vandenputte, Jul 11 '22 at 09:55
Thanks for the reproducer, I took a look and found that `SessionModule` isn't imported anywhere. If you add it to a `NgModule`, angular should pick up the fact you're already importing `ReactiveFormsModule` (Your stackblitz will complain about `hello` not being a known element but that's just because you hadn't removed it from `app.component.html`) . Hope this helps! — , Jul 11 '22 at 10:09
I knew it had to be something simple that I was just looking over... thanks! When importing it in the session-routing module all compiles just fine! — Wouter Vandenputte, Jul 11 '22 at 10:38

score 1 · Answer 1 · answered Jul 11 '22 at 17:14

Your global.module.ts should look like

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { PlatformModule } from '@angular/cdk/platform';
import { MaterialComponentsModule } from './your/path/to/MaterialComponentsModule';
import { PipesModule } from './your/path/to/PipesModule';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialComponentsModule,
    PipesModule,
    BrowserModule,
    PlatformModule
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialComponentsModule,
    PipesModule,
    BrowserModule,
    PlatformModule
  ]
})
export class GlobalModule { }

Angular: reactive module import does not find `formGroup` directive

1 Answers1