Angular11已导入ReactiveFormsModule仍提示formGroup不是form已知属性

从报错输出来看该问题和其他同类问题相似，但已尝试所有可找到的解决方案和写法，问题仍未解决。

项目相关文件结构 #

- src
-- modules
--- authentication
---- login
------ login.component.ts
------ login.component.html
---- authentication.module.ts
-- app.module.ts

相关代码 #

app.module.ts #

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

authentication.module.ts #

import { NgModule } from '@angular/core';
import { LoginComponent } from './login/login.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

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

login.component.html 相关代码 #

...
    <form [formGroup]="form" (ngSubmit)="onSubmit()" class="form-validate is-alter" autocomplete="off">
...

上述配置下报错仍然存在，也尝试过将ReactiveFormsModule导入到app.module.ts中，依然没有效果。

补充：login.component.ts 代码 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthService } from 'src/app/services/auth.service';
import { Router, ActivatedRoute } from '@angular/router';
import { first } from 'rxjs/operators';

@Component({ selector: 'app-login', templateUrl: './login.component.html' })
export class LoginComponent implements OnInit {
  form!:FormGroup;
  loading = false;
  submitted = false;

  constructor(
      private formBuilder: FormBuilder,
      private authService: AuthService,
      private router: Router,
      private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      username: [ '', [ Validators.required ] ],
      password: [ '', [ Validators.required ] ]
    })
  }

  get f() { return this.form.controls }

  showingPassword = false;
  
  loginInformation = {
    username: '',
    password: ''
  };

  onSubmit() {
    this.submitted = true;
    
    console.log( this.form.invalid );
    console.log( this.f.username.errors );
    console.log( this.f.password.errors );
    console.log( this.form.errors );

    if ( this.form.invalid ) return;
    
    this.loading = true;

    console.log( this.f.username.value );
    console.log( this.f.password.value );
    return;

    this.authService.login( this.f.username.value, this.f.password.value )
      .pipe(first())
      .subscribe({
        next: () => {
          const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
          this.router.navigateByUrl(returnUrl);
        }, error: ( error: any ) => {
          console.log( error );
          this.loading = false;
        }
      })
  }
}

你遇到的问题由两处配置错误导致，按以下步骤修改即可解决：

1. 修正特性模块的错误导入并导出组件
   BrowserModule只能在根模块app.module.ts中导入一次，特性模块需要替换为CommonModule。同时你需要在AuthenticationModule的exports数组中导出LoginComponent，才能让其他模块使用该组件。
   修改后的authentication.module.ts代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  exports: [LoginComponent]
})
export class AuthenticationModule { }

2. 根模块导入特性模块
   你需要在app.module.ts的imports数组中加入AuthenticationModule，让根模块识别到认证模块下的组件。
   修改后的app.module.ts代码：

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthenticationModule } from './modules/authentication/authentication.module';

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

如果你的项目采用路由懒加载方式加载认证模块，不需要在根模块直接导入AuthenticationModule，只要在路由配置中正确配置loadChildren指向认证模块即可。

内容的提问来源于stack exchange，提问作者Jorge Ferrari