Angular 8 Routing: Changing URL doesn't navigate to expected page

Question

I'm creating a simple Angular project with two components: home and submit. My app-routing.module.ts look like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule, ActivatedRoute } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SubmitComponent } from './submit/submit.component';


const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'submit', component: SubmitComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

In my browser if I change the path to /submit the page looks like it reloads and then defaults back to /home. I have already tried changing the path: '' to path: '**'. It does not navigate to the submit component. Any ideas what I am doing incorrectly?

Angular 8.2.14 Google Chrome

Do you have <base href="/"> added in your index.html head? — Ashish
– Ashish, Commented Jan 27, 2020 at 19:47
how does your app-routing module look? Please share some more details. — nircraft
– nircraft, Commented Jan 27, 2020 at 19:48

Kyler Johnson · Accepted Answer · 2020-01-27 20:28:49Z

There isn't anything wrong with your routing configuration. We don't have enough information to help you pinpoint your issue beyond that.

When I am approached with this question, it's usually one of the following problems:

Missing <base href="/"> in your index.html head element
Not importing AppRoutingModule into your AppModule
Missing <router-outlet></router-outlet> element in parent component

I saw in the comments that you have the <base href="/"> in your index.html file so we'll forget that one for now.

From here:

Check to make sure you're importing your AppRoutingModule in your App.Module.ts file.

If that's not the issue, make sure you have a <router-outlet></router-outlet> element in your parent component (probably your app.component.html based on the simplicity of your app). The Angular router searches your routes for one that matches the URI and injects an instance of the component specified in your routing configuration into the closest router-outlet that is higher up in the component tree. In other words, if there is no router-outlet, the Angular router doesn't know where to render the component you specified in your routing configuration.

If neither of those solve your problem, try posting more information so we can help further. It would be helpful to see your app.module.ts and app.component.html files at a minimum. Alternatively, try recreating your app in a stackblitz and posting the link.

Collectives™ on Stack Overflow

Angular 8 Routing: Changing URL doesn't navigate to expected page

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related