Angular 8 router not redirecting to routes

Question

My app.component.html:

<router-outlet></router-outlet>

my app-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MenuComponent } from './components/menu/menu.component';
import { BlogComponent } from './components/blog/blog.component';
import { TeamComponent } from './components/team/team.component';

const routes: Routes = [
  { path: '', component: MenuComponent },
  { path: '**', component: MenuComponent },
  { path: 'menu', component: MenuComponent },
  { path: 'blog', component: BlogComponent },
  { path: 'team', component: TeamComponent }
];

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

When I write the route in the url to go to (i.e. http://localhost:4200/blog) no error is given but I stay in the MenuComponent. Also when I refresh, the link stays http://localhost:4200/blog.

Am I missing something?

P.S: If any code is needed I can edit my question to show it, do not downvote immediately :)

Answer 1

You need to order your routes, the router is finding the first match, which is your menu component, try this.

const routes: Routes = [
  { path: 'menu', component: MenuComponent },
  { path: 'blog', component: BlogComponent },
  { path: 'team', component: TeamComponent },
  { path: '', component: MenuComponent },
  { path: '**', component: MenuComponent }
];

The order of the routes in the configuration matters and this is by design. The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. In the configuration above, routes with a static path are listed first, followed by an empty path route, that matches the default route. The wildcard route comes last because it matches every URL and should be selected only if no other routes are matched first.

From angular website here