Routing is not working when routerLink has data

Question

I am a newbie in Angular and learning how routing works when i pass id with the route. I am not able to route to component that i have added in app.module.ts Attaching my component html code and app.module.ts

HomeCoponent.html

<div class="container">

<div class="rows">

    <div *ngFor="let blog of blogData">


        <div class="card border-primary col-md-5 card-layout">
            <!-- <img class="card-img-top" src="image1.jpg" alt="Card image cap"> -->
            <div class="card-body ">
                <h5 class="card-title text-primary">{{blog.title}}</h5>

                <p class="card-text">{{blog.description}}</p>
                <br>

                <a [routerLink]="['/blog',blog.blogid]" class="btn btn-primary btn-block">View</a>
            </div>


        </div>

    </div>
</div>
<router-outlet></router-outlet>

Bog-view component.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { RouterModule } from '@angular/router';
@Component({
  selector: 'app-blog-view',
  templateUrl: './blog-view.component.html',
  styleUrls: ['./blog-view.component.css']
})

export class BlogViewComponent implements OnInit {


  constructor(private _route: ActivatedRoute, private router: Router) {
    console.log('constructor is called');
  }

  ngOnInit(): void {
    console.log(this._route.snapshot.paramMap.get('blogid'))



  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { BlogViewComponent } from './blog-view/blog-view.component';
import { BlogCreateComponent } from './blog-create/blog-create.component';
import { BlogEditComponent } from './blog-edit/blog-edit.component';
import { NotFoundComponent } from './not-found/not-found.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    BlogViewComponent,
    BlogCreateComponent,
    BlogEditComponent,
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot([
      { path: 'home', component: HomeComponent },
      { path: 'create', component: BlogCreateComponent },
      { path: '**', component: NotFoundComponent },
      { path: 'blog/:blogid', component: BlogViewComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Surely i am missing something here. Please help

Answer 1

I think that you have a wrong order of routes. The '*' should be at the end:

 RouterModule.forRoot([
  { path: 'home', component: HomeComponent },
  { path: 'create', component: BlogCreateComponent },
  { path: 'blog/:blogid', component: BlogViewComponent },
  { path: 'blog', component: BlogViewComponent },
  { path: '**', component: NotFoundComponent },
])

If the id is mandatory, you can ignore this line:

  { path: 'blog', component: BlogViewComponent },