Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

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

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 }
];
7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.