I have a problem where ngOnInit doesnt get triggered when i refresh the page or when i try to directly access my url knowing i havent implemented any kind of protection or any kind of guards. meaning when i try to enter mydomain/AdminPage ngOnInit doesn't get triggered but when i use router link to navigate to the AdminPage from the login page it gets triggered once and when i try to refresh the page nothing happens. i also havent implemented any kind of authentication to the login page or the admin page. (expected the page to load on each try) the thing is on another page (app.component for instance) ngOnInit gets triggered each time i do a refresh.
below is my code
AdminPage.Component :
import { HttpClientModule } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { GuestsService } from '../guests.service';
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-admin-page',
standalone: true,
imports: [FormsModule,
MatCardModule,
HttpClientModule,
CommonModule
],
templateUrl: './admin-page.component.html',
styleUrl: './admin-page.component.css'
})
export class AdminPageComponent implements OnInit {
ProfissionValue:number = 0;
guests: any;
filteredGuests:any;
filterData(){
if (this.ProfissionValue != 0)
this.guests = this.filteredGuests.filter((d: any) => d.category == this.ProfissionValue);
else this.guests = this.filteredGuests;
}
constructor(private guestService: GuestsService,private router: Router) { }
ngOnInit(): void {
this.guestService.getGuests().subscribe(res => {
this.guests = res.data;
this.filteredGuests = res.data;
});
}
ldata: dataToSelect[] = [
{
Name: 'المهنه',
Id: 0
},
{
Name: 'كاتب سيناريوهات',
Id: 1
},
{
Name: 'كاتب اغاني',
Id: 2
},
{
Name: 'ممثل',
Id: 3
},
{
Name: 'الانتاج',
Id: 4
},
{
Name: 'مونتاج reels',
Id: 5
}, {
Name: 'غناء',
Id: 6
}, {
Name: 'بحث \\ كتابة محتوى',
Id: 7
}, {
Name: 'مقدم-ة محتوى',
Id: 8
}, {
Name: 'Animation \\ after effect',
Id: 9
},
{
Name: 'مصمم جرافيكي',
Id: 10
},
{
Name: 'اخر',
Id: 11
},
]
}
interface dataToSelect {
Name: string,
Id: number
}
login.component:
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { UsersService } from '../users.service';
@Component({
selector: 'app-login',
standalone: true,
imports: [
RouterOutlet,
CommonModule,
HttpClientModule,
FormsModule,
RouterOutlet,
RouterLink,
RouterLinkActive
],
templateUrl: './login.component.html',
styleUrl: './login.component.css'
})
export class LoginComponent {
email: string = "";
password: any = "";
userID: number = 0;
constructor(private userService: UsersService,private router:Router) { }
onLoginClick() {
const user = {
Email : this.email,
Password : this.password
}
this.userService.login(user).subscribe(res => {
if (res.data != -1){
this.router.navigate(['AdminPage']);
}
else {
alert(res.message);
}
})
}
}
app.component:
import { Component, OnInit } from '@angular/core';
import { NavigationEnd, Router, RouterLink, RouterLinkActive, RouterModule, RouterOutlet, Routes } from '@angular/router';
import { FormsModule, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { GuestsService } from './guests.service';
@Component({
selector: 'app-root',
standalone: true,
imports: [
ReactiveFormsModule,
MatToolbarModule,
HttpClientModule,
MatButtonModule,
CommonModule,
FormsModule,
RouterOutlet,
RouterLink,
RouterModule,
RouterLinkActive
],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent implements OnInit{
constructor(public router:Router) { }
ngOnInit(): void {
if (this.router.url == "")
this.router.navigate(['Home']);
}
title = "نفس"
}
app.routes:
import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { GuestRegisterComponent } from './guest-register/guest-register.component';
import { HomePageComponent } from './home-page/home-page.component';
import { AdminPageComponent } from './admin-page/admin-page.component';
import { ThanksForRegisterComponent } from './thanks-for-register/thanks-for-register.component';
export const routes: Routes = [
{ path: 'login', component: LoginComponent, pathMatch: 'full' },
{ path: 'guestRegister' , component: GuestRegisterComponent, pathMatch: 'full' },
{ path: 'Home' , component: HomePageComponent , pathMatch: 'full'},
{ path: 'AdminPage' , component: AdminPageComponent, pathMatch: 'full'},
{ path: 'Welcome' , component: ThanksForRegisterComponent, pathMatch: 'full'},
{ path: '**' , component: HomePageComponent},
];
i have tried alot of things including trying to catch a router event. on local host everything works properly and when i refresh the page it gets called each time i do a refresh the problem occures only on deployment on iis server
UPDATE: I accidentally deployed my angular app without changing my api url from https://localhost:port/api to mydomain/api and it worked when i refreshed the page it called the api and worked as expected :// its mind blowing i cant identify what the problem is .. could the cause of this problem be my api?
If the routing works locally and when you deploy it does not, it may be that you are missing rewriting rules for the url
Example of rewrite for iis server