activate-or-redirect.ts

import { ActivatedRouteSnapshot, Route } from '@angular/router';

const GET_FAIL_ROUTE = Symbol('getFailRoute');

export function getRedirectOnFailTarget(
  guardInstance: any,
  routeSnapshot: ActivatedRouteSnapshot
): string[] | undefined {
  return isGetFailRouteAvailable(routeSnapshot.data)
    ? routeSnapshot.data[GET_FAIL_ROUTE](guardInstance)
    : undefined;
}

export function processActivateOrRedirectRoute(
  inputRoute: ActivateOrRedirectRoute
): Route {
  // separate `activateOrRedirect` property
  const { activateOrRedirect, ...route } = inputRoute;
  // construct canActivate array
  const canActivate = activateOrRedirect.map(
    ({ canActivate: _canActivate }) => _canActivate
  );
  // prepare redirection lookup function and "hide" it in data under our symbol
  const getFailRoute = createGetFailRouteFn(activateOrRedirect);
  const data = {
    ...route.data,
    [GET_FAIL_ROUTE]: getFailRoute
  };

  // this ends up being a standard `Route` object
  return { ...route, canActivate, data };
}

function createGetFailRouteFn(
  activateOrRedirectDefs: ActivateOrRedirectDef[]
): GetFailRouteFn {
  return guardInstance => {
    // get matching redirection targets
    const targetRoute = activateOrRedirectDefs
      .filter(({ canActivate }) => guardInstance instanceof canActivate)
      .map(({ redirectTo }) => redirectTo);

    // return first match
    return targetRoute[0];
  };
}

// note that the type used in this type guard needs Typescript >= v2.7
function isGetFailRouteAvailable(data: {
  [name: string]: any;
}): data is { [name: string]: any; [GET_FAIL_ROUTE]: GetFailRouteFn } {
  return !!data[GET_FAIL_ROUTE];
}

interface ActivateOrRedirectDef {
  canActivate: any; // class of CanActivate guard
  redirectTo: string[];
}

type ActivateOrRedirectRoute = Route & {
  activateOrRedirect: ActivateOrRedirectDef[];
};

type GetFailRouteFn = (guardInstance: any) => string[] | undefined;