I have an application on Angular 8 and after I login when in dev environment everything works just fine, the app is redirected to "/" (Here (1)) just like it should.
The problem is when I deploy it, after login the app goes to "url.com/login" and throw a 404 error. If I manually set to "url.com" everything works just fine.
This is the code on login Component:
ngOnInit() {
...
// get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
this.routeUsername = this.route.snapshot.params.username;
}
onSubmit() {
this.authenticationService.login(this.f.username.value, this.f.password.value)
.pipe(first())
.subscribe(
async data => {
if (data.auth) {
await this.commonSer.setLoginDetail(data);
this.router.navigate(['/']); <-- Here (1)
location.reload(); <-- Here (2)
} else {
...
}
}, error => {
...
});
}
I also tried replacing "this.router.navigate(['/']);" for "this.router.navigateByUrl(this.returnUrl);", but the result was exactly the same.
Another 2 awkwards situations are:
- if I type any url on dev environment it works just fine, if I type a url on server, it throws a 404 error.
- I had to add a location.reload() (Here (2)) in order to run any url. Otherwise even if I click on menu the url on browser changes but, nothing happens (both dev and production). And that´s something I don´t see in other people codes that often. I don´t know why I need it.
What am I missing here? What makes everything behaves the way it is?
This is app-routing.module.ts
const routes: Routes = [
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
...
//Login and Register Routes
{ path: 'login', component: LoginComponent },
{ path: 'login/:username', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'emailConfirmation', component: EmailConfirmationComponent },
{ path: 'emailConfirmation/:username', component: EmailConfirmationComponent },
...
// Root
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
// Otherwise redirect to home
{ path: '**', redirectTo: '/' }
];
UPDATE 1: This is .htaccess
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
`enter code here`RewriteRule ^ /index.html
UPDATE2:
I also can´t use back and forward on browser. The url changes but it has an effect only if I reload page.
