Using wildcards in the middle of an angular route?

Question

I am using one page to collect and display the data for hundreds of different routes. I want my page to have "tabs" on it, to navigate between different information however I dont seem able to create a suffix or use wildcards within the component. I also want to redirect to a child of /tab1

What I have (and works)

I have an app. It has 1 route, XXX, and 1 component xxx.component.ts (the real app actually has 20 routes at the same level, but it's not important at the moment).
xxx.component.ts pulls in a menu from a json file, containing a number of links:

xxx/111/222
xxx/333/444
xxx/122/212

I have no routes in xxx.routing, just a wildcard that redirects to xxx.component.ts

xxx.component.ts essentially uses urlfragments to get 111 and 222 and goes off to the API to get data for 111/222. All of the pages under XXX are the same format, just different data.

Everything up to this point works! (Yay)

What I can't figure out

Now, I want to have tabs or another layer of navigation depending on how you want to look at it.

xxx/111/222/tab1
xxx/111/222/tab2
xxx/111/222/tab3

I also want to redirect to tab1 if I just hit xxx/111/222

I've triend including things like xxx/*/*/tab1 in the routing for the component but it's not working.
I've looked at using variables, xxx/:var1/:var2/tab1 and it's not working.

routing.ts

const routes: Routes = [
  {
    path: '',
    component: DashboardsComponent,
    children: [
        {
          path: 'xxx',
          loadChildren: './xxx/dashboards-xxx.module#DashboardsxxxModule',
          pathMatch: 'prefix',
          // canActivate: [AuthGuardService],

    },
    ],
  }, {
    path: '**',
    component: NotFoundComponent,
  },
];

xxx.routing.ts

const routes: Routes = [
  {
    path: '**',
    component: DashboardsxxxComponent,
    // canActivate: [AuthGuardService],
  },
];

Answer 1

To the best of my knowledge, you can't match a wildcard; it's designed to work as a catch-all if there isn't a path Angular can match first.

If you lose the prefix match, you should be able to use the 'xxx' route to go to your lazy module, then use route parameters to match your segments and handle the redirect.

If you structure your root routes as:

export const appRoutes: Route[] = [
  {
    path: '',
    component: DashboardComponent,
    children: [
      {
        path: 'xxx',
        loadChildren: './tabs/tabs.module#TabsModule',
      }
    ]
  }
];

and your child routes as:

export const tabRoutes: Route[] = [
  {
    path: ':param1/:param2/:tab',
    component: TabsComponent,
  },
  {
    path: ':param1/:param2',
    redirectTo: ':param1/:param2/tab1'
  }
];

it should work as expected. StackBlitz doesn't seem to like my route imports, but here's a working example: https://1drv.ms/u/s!Aun50jHsxPB0gcd5dMXKK4GsAalcbA