Component 404 is not working properly. Why is page not found not working?

Question

I don't know how to deal with it. The code looks like a pattern. Page is not loading. Here are my paths.

Does not work

it works

Can anyone explain why this is so? Thanks for your comments

I did routing according to the pattern.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PageNotFoundComponent } from './components/page-not- 
found/page-not-found.component';
import { DetailComponent } from 
'./pages/detail/detail.component';
import { HomeComponent } from './pages/home/home.component';
import { RegisterComponent } from 
'./pages/register/register.component';

const routes: Routes = [

 { path: '', component: HomeComponent },
 { path: 'register', component: RegisterComponent },
 { path: ':id', component: DetailComponent },

 { path: '**', pathMatch:'full', component: 
  PageNotFoundComponent },

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

In my path '**' setting doesn't work for me ...

if I change the order of a track, it works

const routes: Routes = [
 { path: '', component: HomeComponent },
 { path: 'register', component: RegisterComponent },

 { path: '**', pathMatch:'full', component: 
  PageNotFoundComponent },

 { path: ':id', component: DetailComponent },
 ];