angular routing multiple paths to same component

Question

Is there a way to optimize this code from this

{
  path: \'access-requests\',
  canActivate: [AccessGuard],
  component: AccessRequestsComponent,
  children:         


        

Answer 1

Building on CornelC's answer, I wrote a method that accepts an array of string as paths and spits out a url matcher that will match an element of the array:

export const routingMatcher: ((paths: string[]) => UrlMatcher) = (paths: string[]) => {
  const result: UrlMatcher = (segments) => {
    const matchingPathIndex = paths.findIndex((path, index) => {
      const pathSegments = path.split("/");
      return segments.every((segment, i) =>
        pathSegments.length > i && (
          pathSegments[i].startsWith(":") ? true : segment.path.toLowerCase() === pathSegments[i].toLowerCase()));
    });

    if (matchingPathIndex >= 0) {
      const matchingPath = paths[matchingPathIndex];

      const consumed: UrlSegment[] = [];
      const params = {};

      matchingPath.split("/").forEach((path, i) => {
        consumed.push(segments[i]);
        if (path.startsWith(":")) {
          const param = path.substring(1);
          params[param] = segments[i];
        }
      });

      return {
        consumed: consumed,
        posParams: params
      };
    }

    return null;
  };

  return result;
};

You can use it like this in your routing definitions:

children: [
  // excluding the other paths for brevity
    matcher:  routingMatcher(['today', 'tomorrow', 'expired'])
    component: AccessRequestsComponent
  }))
]