Question

0

122

Views

Angular application is not loading my component path when manually navigated to in the browser

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 { }

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-28T06:01:56.768Z

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 }
];