My application starts on a login
page which has a button to a create-account
page.
If I am on the create-account
page and I refresh my browser, it goes back to the login
page.
Why is that? I tried reading through the documentation to find a solution, but it wasn't entirely clear. I can see from the browser that if I manually navigate to http://localhost/create-account
, it returns a 301 and goes back to the login
page. What must be done to the route to fix this in order to allow create-account
to be hit?
Here is my app-routing.module.ts
:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CreateAccountComponent } from './create-account/create-account.component';
import { LoginComponent } from './login/login.component';
import { PasswordResetComponent } from './password-reset/password-reset.component';
const routes: Routes = [
{ path: "login", component: LoginComponent },
{ path: "create-account", component: CreateAccountComponent },
{ path: "password-reset", component: PasswordResetComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Whoops, it was because my app.component.ts
had this in it, and it gets called for every route when the application is initialized (first browsed to):
ngOnInit() {
this.router.navigate(['/login']);
}
I have refactored this to:
ngOnInit() { }
I have also added a wildcard route resolver to the LoginComponent
instead, so that URL routes that have no mapping will go to the login
page, if you look at the last element added in the Routes
here:
const routes: Routes = [
{ path: "login", component: LoginComponent },
{ path: "create-account", component: CreateAccountComponent },
{ path: "password-reset", component: PasswordResetComponent },
{ path: "**", component: LoginComponent }
];