Angular HTML表单无法加载且无报错，求排查解决

我在Udemy学习Angular课程时，练习遇到问题：auth组件的表单无法正常加载，控制台无任何报错，其他HTML页面可正常运行。

相关代码文件 #

auth.component.html #

<form [formGroup]="authForm" (ngSubmit)="saveForm()">
    <label>Username</label>
    <br>
    <input type="text" formControlName="username">
    <br>
    <label>Password</label>
    <input type="password" formControlName="password">
    <br>
    <input type="password" formControlName="password"><br>
    <button type="submit">Submit</button>
</form>

auth.component.ts #

import { Component, OnInit, Inject } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

import { ApiService } from '../api.service';


@Component({
  selector: 'app-auth',
  standalone: false,
  templateUrl: './auth.component.html',
  styleUrl: './auth.component.css'
})

export class AuthComponent implements OnInit{

  authForm: any = new FormGroup({
    username: new FormControl(''),
    password: new FormControl(''),
  });

  constructor(
    @Inject('url') private apiService: ApiService
  ) { }

  ngOnInit(): void {
  }

  saveForm() {
    this.apiService.loginUser(this.authForm.value).subscribe(
      (result: any) => console.log(result),
      (error: any) => console.log(error)
    );
  }
}

auth.module.ts #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { ReactiveFormsModule } from '@angular/forms';

import { AuthComponent } from './auth.component';
import { AppComponent } from '../app.component';




const routes: Routes = [
  {path: 'auth', component: AuthComponent},
];

@NgModule({
  declarations: [
    AppComponent,
    AuthComponent,
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    ReactiveFormsModule

  ],
  exports: [
    RouterModule,
  ],
})
export class AuthModule { }

app.module.ts #

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

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

import { ReactiveFormsModule } from '@angular/forms';

import { AuthModule } from './auth/auth.module';
import { MainModule } from './main/main.module';
import { AppComponent } from './app.component';
import { AuthComponent } from './auth/auth.component';


const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'auth'},
];

@NgModule({
  declarations: [],
  imports: [
    FontAwesomeModule,
    BrowserModule,
    AuthModule,
    MainModule,
    HttpClientModule,
    RouterModule.forRoot(routes),
    ReactiveFormsModule,
  ],
  exports: [
    RouterModule,
  ],
  providers: [],
  bootstrap: [AppComponent, AuthComponent]
})
export class AppModule { }

问题根源及修复方案 #

核心问题 #

1. 组件重复声明：AppComponent在auth.module.ts的declarations中被声明，但根组件只能在根模块（app.module.ts）中声明，子模块不能重复声明根组件。
2. Bootstrap数组错误：app.module.ts的bootstrap数组同时包含AppComponent和AuthComponent，但Bootstrap数组仅用于指定应用的根启动组件，AuthComponent应通过路由加载，而非直接bootstrap。
3. 冗余导入：ReactiveFormsModule在根模块和子模块重复导入，虽不报错但没必要。

修复后的代码 #

修改后的auth.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { ReactiveFormsModule } from '@angular/forms';

import { AuthComponent } from './auth.component';

const routes: Routes = [
  {path: 'auth', component: AuthComponent},
];

@NgModule({
  declarations: [
    AuthComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    ReactiveFormsModule
  ],
  exports: [
    RouterModule,
  ],
})
export class AuthModule { }

修改后的app.module.ts

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

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

import { AuthModule } from './auth/auth.module';
import { MainModule } from './main/main.module';
import { AppComponent } from './app.component';

const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'auth'},
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FontAwesomeModule,
    BrowserModule,
    AuthModule,
    MainModule,
    HttpClientModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者Giacomo Bellomo