How do you combine a pathless route with a fallback route?

I want to combine a pathless route and a fallback route in Angular alongside some normal routes

What I mean by a pathless route is the "home" component of the app which is reached without a path, just by "/"

const homeRoute: Route = { path: "", component: HomeComponent }


What I mean by fallback route is the component that is displayed when I try to reach a path that does not exist

const fallbackRoute: Route = { path: "**", component: PageNotFoundComponent }


Normal routes are just for my various components

const coolFeatureRoute: Route = { path: "/coolfeature", component: CoolFeatureComponent }


But if I set it up as described above, the fallback route won't be reached. It'll go to my actual feature when the path can be resolved, otherwise to the homecomponent

Here are my actual routes

const routes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'vorgangsarten',
loadChildren: () => CoolFeatureModule,
},
{ path: '**', component: PageNotFoundComponent },
];

Continue reading...