Angular does not load my html form but doesn't throw an error either

I'm following a course on Udemy and I'm trying my best but this is a problem I can't fix on my own.

this is my auth.component.html that i would like to load

<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>


this is my 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)
);
}
}


this is my 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 { }


this is 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 { }


no error are given and my other html page works fine. If needed I can create a GitHub project to show you the full code but i hope that this is enough

Continue reading...