angular/angular · error · RuntimeError

NAMED_OUTLET_REDIRECT

NAMED_OUTLET_REDIRECT

Error message

Only absolute redirects can have named outlets. redirectTo: '${redirectTo}'

What it means

When the router applies route redirects, a redirectTo value containing a named outlet target like 'user(aux:profile)' is only valid for absolute redirects (starting with '/'), because only an absolute redirect can rebuild the full URL tree including outlet segments. namedOutletsRedirect() throws NAMED_OUTLET_REDIRECT when a relative redirect references an outlet.

Source

Thrown at packages/router/src/apply_redirects.ts:46

    // when extending errors in TS and the workaround is to explicitly set the prototype.
    // https://stackoverflow.com/questions/41102060/typescript-extending-error-class
    Object.setPrototypeOf(this, NoMatch.prototype);
  }
}

export class AbsoluteRedirect extends Error {
  constructor(public urlTree: UrlTree) {
    super();

    // Extending `Error` ends up breaking some internal tests. This appears to be a known issue
    // when extending errors in TS and the workaround is to explicitly set the prototype.
    // https://stackoverflow.com/questions/41102060/typescript-extending-error-class
    Object.setPrototypeOf(this, AbsoluteRedirect.prototype);
  }
}

export function namedOutletsRedirect(redirectTo: string): never {
  throw new RuntimeError(
    RuntimeErrorCode.NAMED_OUTLET_REDIRECT,
    (typeof ngDevMode === 'undefined' || ngDevMode) &&
      `Only absolute redirects can have named outlets. redirectTo: '${redirectTo}'`,
  );
}

export function canLoadFails(route: Route): never {
  throw navigationCancelingError(
    (typeof ngDevMode === 'undefined' || ngDevMode) &&
      `Cannot load children because the guard of the route "path: '${route.path}'" returned false`,
    NavigationCancellationCode.GuardRejected,
  );
}

export class ApplyRedirects {
  constructor(
    private urlSerializer: UrlSerializer,
    private urlTree: UrlTree,

View on GitHub (pinned to 51cb07e980)

Solutions

1. Make the redirect absolute: `redirectTo: '/user(aux:profile)'`
2. Or remove the named outlet target from redirectTo and redirect to 'user' only
3. If you need conditional outlet setup, use a canActivate guard with Router.navigate() instead of redirectTo

Example fix

// before
{path: 'old', redirectTo: 'user(aux:profile)'} // relative + named outlet -> throws

// after
{path: 'old', redirectTo: '/user(aux:profile)'} // absolute -> allowed

// Fail fast at config-definition time instead of at navigation time
function assertRedirectsValid(routes: Routes): void {
  for (const r of routes) {
    if (r.redirectTo && !r.redirectTo.startsWith('/') && /\(.+:.+\)/.test(r.redirectTo)) {
      throw new Error(
        `Route '${r.path}': relative redirect '${r.redirectTo}' cannot target a named outlet; make it absolute`,
      );
    }
    if (r.children) assertRedirectsValid(r.children);
  }
}

When it happens

Trigger: Route config such as `{path: 'old', redirectTo: 'user(aux:profile)'}` (no leading '/'); any redirectTo string containing `(outlet:...)` that does not start with '/'; navigating to the source route triggers redirect application.

Common situations: Converting absolute redirects to relative ones during refactors; copy-pasting outlet URLs from browser links into redirectTo; configuring popup/sidebar outlets via redirects.

Related errors

• MISSING_REDIRECT
• MISPLACED_OUTLETS_COMMAND
• BROWSER_ANIMATION_BUILDER_INJECTED_WITHOUT_ANIMATIONS
• Not implemented
• cannot redirect when event is not intercepted

AI-assisted analysis of angular/angular@51cb07e980 (2026-08-22). Data as JSON: /api/errors/29ae28fe18126c12. Report an issue: GitHub.