Angular 4: Fallback routes(pathMatch) doesn't redirect correctly to the fallback url, Error: Uncaught (in promise): Error: Cannot match any routes

Question

I have the following router object

const appRoutes: Routes = [
  { path: '', redirectTo: '/', pathMatch:'full'},
  { path: '', component: MainComponent },
  { path: 'signin', component:SigninComponent},
  { path: 'signup', component: SignupComponent},
  { path: 'dashboard', component: DashboardComponent,
    children: [
      { path: '', redirectTo:'/dashboard/overview', pathMatch: 'full'},
      { path: 'overview', component: OverviewCampaignsComponent },
      { path: 'active', component: ActiveCampaignsComponent},
      { path: 'history', component: HistoryCampaignsComponent}
    ] }

]

Everything is working fine except for the routes that contain a redirectTo. If I enter for example /dashboard/dsadadasdasd3213 I get an error on the console

core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/dsadadasdasd3213' Error: Cannot match any routes. URL Segment: 'dashboard/dsadadasdasd3213'

If I enter /asdasdqweqwe I get a similar error. What seems to be wrong here? Thank you very much!

Answer 1

Create a 404 error handling component Error404Component and try adding a path with a wildcard to match every path that is not specified and route to it just like this:

   const appRoutes: Routes = [
      { path: '', redirectTo: '/', pathMatch:'full'},
      { path: '', component: MainComponent },
      { path: 'signin', component:SigninComponent},
      { path: 'signup', component: SignupComponent},
      { path: 'dashboard', component: DashboardComponent,
        children: [
          { path: '', redirectTo:'/dashboard/overview', pathMatch: 'full'},
          { path: 'overview', component: OverviewCampaignsComponent },
          { path: 'active', component: ActiveCampaignsComponent},
          { path: 'history', component: HistoryCampaignsComponent}
          { path: '**', component: Error404Component}
        ] }

    ]

Answer 2

Add fallback route

{ path: '**', redirectTo: 'session/404' }

Please find below code for more understanding ...

export const AppRoutes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full'},
  // users routes
  {
    path: '',
    component: AdminLayoutComponent,
    children: [
      { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
      { path: 'containers', loadChildren: './containers/containers.module#ContainersModule' },
      { path: 'groupcontainers', loadChildren: './group-containers/group-containers.module#GroupContainersModule' },
      { path: 'mypublickeys', loadChildren: './public-keys/public-keys.module#PublicKeysModule' },
      { path: 'myservers', loadChildren: './my-servers/my-servers.module#MyServersModule' },
      { path: 'group', loadChildren: './group/group.module#GroupModule' },
      { path: 'admin', loadChildren: './admin/admin.module#AdminModule'}
    ],
    canActivate: [AuthGuardService]
  },
  //  non authentication routes
  {
    path: '',
    component: AuthLayoutComponent,
    children: [
      { path: '', loadChildren: './session/session.module#SessionModule'}
    ]
  },
  { path: '**', redirectTo: 'session/404' }
];