Angular 16 routing blank page

I set up the routes with angular v16 and got blank page for login and register I'm pretty sure it's with the routing but I checked it million time and didn't figure it out where is the issue exactly, this is the code snippets:

this is the access service

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import {Login} from "../../model/login";
import {Register} from "../../model/register";
import { JwtHelperService } from '@auth0/angular-jwt';

@Injectable({
  providedIn: 'root'
})
export class AccessService {
  private baseUrl = 'http://localhost:8096';

  constructor(private http: HttpClient, private jwtHelper: JwtHelperService) { }

  login(loginData: Login): Observable<any> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post(`${this.baseUrl}/login`, loginData, { headers });
  }

  register(registerData: Register): Observable<any> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post(`${this.baseUrl}/customerRegister`, registerData, { headers });
  }

  saveTokens(tokens: { jwtToken: string, refreshToken: string }): void {
    localStorage.setItem('jwtToken', tokens.jwtToken);
    localStorage.setItem('refreshToken', tokens.refreshToken);
  }

  getJwtToken(): string | null {
    return localStorage.getItem('jwtToken');
  }

  getRefreshToken(): string | null {
    return localStorage.getItem('refreshToken');
  }

  removeTokens(): void {
    localStorage.removeItem('jwtToken');
    localStorage.removeItem('refreshToken');
  }

  isTokenExpired(): boolean {
    const jwtToken = this.getJwtToken();
    return jwtToken ? this.jwtHelper.isTokenExpired(jwtToken) : true;
  }
}

This is the app routes:

export const routes: Routes = [
  { path: '', redirectTo: '/main', pathMatch: 'full' },
  { path: 'main', component: MainComponent },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'otp', component: OtpComponent },
  { path: 'otp-reset', component: OtpResetComponent },
  { path: 'settings', component: SettingsComponent },
  { path: 'shop', component: ShopComponent },
  { path: 'product-detail', component: ProdDetailComponent },
  { path: 'cart', component: AddCartComponent },
  { path: 'checkout', component: CheckoutComponent },
];

And finally this is the register componenet:

@Component({
  selector: 'app-register',
  standalone: true,
  imports: [CommonModule, FormsModule, HttpClientModule],
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent {

  constructor(private accessService: AccessService, private router: Router) { }

  onSubmit(registerData: Register): void {
    this.accessService.register(registerData).subscribe(
      () => {
        // Handle the successful registration response
        Swal.fire({
          icon: 'success',
          title: 'تم التسجيل',
          text: 'تمت عملية التسجيل بنجاح!',
        }).then(() => {
          this.router.navigate(['/shop']);
        });
      }
    );
  }
}

Also I connect it directly to the backend api I checked it also but the problem in angular not in the backend

trying to get endpoint from backend api

You have a dependency issue. HttpClientModule needs to be imported in your standalone component.

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [CommonModule, HttpModuleClient], // You need to import your modules here
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {