angular routes component second url not working

Current route inside does not work the second url when you go to the same link error. I hope I can explain the problem. My english is bad.

Thank you.

Problem: https://i.stack.imgur.com/zQwaZ.gif

Routes:

const routes: Routes = [
  { path: 'login', component: FrmLoginComponent },
  { path: 'detail/:id', component: DetailComponent},
];

DetailComponent:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
export class DetailComponent implements OnInit {

  constructor(private route: ActivatedRoute) {
    console.log("detail", this.route.snapshot.paramMap.get('id'));
  }
  id = +this.route.snapshot.paramMap.get('id');

  ngOnInit() {
  }
}

Html :

<h1>Detail - {{id}}</h1>