How to handle unknown child routes with wildcard in Angular

Question

I need help with routing today. I've a set of components each with a different route. I want to add 'PageNotFoundComponent' for wildcard route in parent as well as child. What I mean is, this is my URL:

http://localhost:8888/programs/cohorts

cohorts is a child of programs. I want to redirect to PageNotFoundComponent when either programs or cohorts is wrong. Here is my code:

app-routing.module.ts

...
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
    { path: 'login', component: LoginComponent },
    {
        path: '',
        component: ProgramsComponent,
        canActivate: [AuthGuard]
        children: [
            {
                path: 'programs/:dashboardId',
                component: DashboardComponent
            },
            {
                path: 'programs/:dashboardId/:subPageId',
                component: DashboardComponent
            },
            {
                path: 'programs/**',
                component: PageNotFoundComponent 
            }
        ]
    },
    { path: '**', component: PageNotFoundComponent }
];

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

I'm making mistake somewhere. Please point out and help me.

This is working perfectly fine: http://localhost:8888/prrrooogrm/cohorts

But this is giving blank screen: http://localhost:8888/programs/cooohrt

I tried this also:

imports: [
    RouterModule.forRoot(routes),
    RouterModule.forChild([
        {
            path: '**',
            component: PageNotFoundComponent
        }
    ])
],

Answer 1

Url http://localhost:8888/programs/cooohrt is matched by programs/:dashboardId

So blank screen is probaly result of DashboardComponent

If you want to match id to valid object you can use RouteGuard or simply redirect from your component when you realize that object doesn't exist

this.router.navigate(['404-not-found'], { skipLocationChange });

skipLocationChange is there to keep original (wrong) url to be visible for user. '404-not-found' is simply anything which is not matched by any url (to be correct matched by your wildcard url)

Answer 2

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    pathMatch: 'full'
  },
  {
    path: 'not-found',
    component: NotFoundComponent,
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'not-found',
    pathMatch: 'full'
  }
];

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