Angular - Can't bind to 'formGroup' since it isn't a known property of 'form'

Question

I created new app with 2 moodule, when I try to add form to one of my modules I'm getting error:

Can't bind to 'formGroup' since it isn't a known property of 'form'.

I know this is quite common issue so I google a bit and made sure I have ReactiveFormsModule in my module before I wrote this ticket. But I still see an error so issue is obviously there, because of that here is my code:

// app.module.ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule,
  ],
  providers: [
    // My providers
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

In App modul everything works fine, if I try to make form there things works without any issue.

// auth.module.ts
@NgModule({
  imports: [CommonModule, ReactiveFormsModule, RouterModule],
  declarations: [LoginComponent],
  providers: [
    // My providers
  ],
})
export class AuthModule {}

Inside my LoginComponent(which is registered in AuthModule I have code like this:

  public form: FormGroup;

  constructor(private fb: FormBuilder) {}
  public ngOnInit(): void {
    this.form = this.fb.group({
      username: ['', [Validators.required]],
      password: ['', Validators.required],
    });
  }

and my template is simple as this:

<form [formGroup]="form"></form>

I verified milion times that I have ReactiveFormsModule imported in both of my modules and also that I have everything saved. I restarted CLI multiple times to make sure it just didn't freez somewhere.

I am out of ideas what I'm doing wrong.

Answer 1

You should import AuthModule to your AppModule. Refer Documentation

// app.module.ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule,
    AuthModule
  ],
  providers: [
    // My providers
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}