How create a route in Angular where a parameter is within X possible values

I'm trying to create a route in Angular where a parameter is within X possible values. I'm trying it with a matcher in the routes:

{
    path: '',
    component: DefaultComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        component: CountryLandingComponent,
        pathMatch: 'full',
      },
      {
        matcher: (url) => {
          if (url.length > 0 && (Object.values(COUNTRIES_SLUGS) as string[]).includes(url[0].path.toLowerCase())) {
            return {consumed: url, posParams: {[COUNTRY_SLUG_PARAM]: new UrlSegment(url[0].path, {})}};
          }

          return null;
        },
        component: CountryProviderComponent,
        children: [
          {
            path: '',
            component: SearchIndexPage,
            pathMatch: 'full',
          },
          {
            path: 'houses',
            loadChildren: () =>
              import('../modules/houses/houses.module').then((m) => m.HousesModule),
          },
          {
            path: 'outing',
            loadChildren: () =>
              import('../modules/outing/outing.module').then((m) => m.OutingModule),
          },

....

export enum COUNTRIES_SLUGS {
  country1 = 'country1',
  country2 = 'country2'
}

export const COUNTRY_SLUG_PARAM = 'country-slug';

However, routes like https://platform.docker.vm:4201/country1/houses/924/view are not being activated, and they were activated fine without using the route matcher. Can someone help me?

Solution

I created a small app on Stackblitz that demonstrates a similar scenario with a route matcher. Hope you will find it helpful.

Perhaps the difference is the consumed part of the matcher's return value. You should include only the segment that was already consumed - url[0], so the algorithm can continue with the rest. Like this:

    return { consumed: [url[0]], ... };

There is a nice blog about routes with explanation and examples, including route matchers.