Page not found handling without changing url Angular 2

Question

I have routes:

    const routes: Routes = [
        { path: '', component: DashboardComponent, canActivate: [RouteGuard, AuthGuard] },
        { path: 'signup', component: SignUpTenantComponent, canActivate: [RouteGuard] },
        { path: 'signin', component: SignInComponent, canActivate: [RouteGuard] },
        { path: ':url', component: DashboardComponent, canActivate: [RouteGuard, AuthGuard] },
        { path: 'page-not-found', component: PageNotFoundComponent },
        { path: '**', redirectTo: 'page-not-found' }
    ];

And I have guard where I check url and if it's wrong then redirect on PageNotfoundComponent:

this.router.navigate(['page-not-found']);

And as a result I see in url localhost:port/page-not-found. But I want to do that without changing url. If I add { skipLocationChange: true } to router.navigate then I will see main url localhost:port/. I want to see wrong url, for example localhost:port/rgqadff with PageNotFoundComponent content.

How can I resolve that?

Answer 1

I'm using the below way and it works fine, whatever you write it will show the NotFoundComponent without changing the url

const APP_ROUTES: Routes = [
   {path: '' , component: HomeComponent },
   {path: 'about', component: AboutComponent },
   {path: '**', component: NotFoundComponent }
];