I configured the routes in Angular v16 and encountered a blank page issue with the login and register functionality. I suspect it has to do with routing, but after checking multiple times, I couldn't pinpoint the exact problem. Below are snippets of the code:
Here is the access service implementation:
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;
}
}
Below you can find the application routes configuration:
export const routes: Routes = [
{ path: '', redirectTo: '/main', pathMatch: 'full' },
// Define all other paths here
];
Lastly, here is the register component implementation:
@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 {
// Handle registration logic here
}
}
I have verified the connection to the backend API and confirmed that the issue lies within the Angular setup rather than the backend. Additionally, I am trying to retrieve endpoints from the backend API.