angular/angular-cli · error · Error

Invalid fromPath: The string must start with a '/'. Received

Error message

Invalid fromPath: The string must start with a '/'. Received: '${fromPath}'

What it means

This is the second check in buildPathWithParams: the source path (fromPath) must also be a root-relative absolute path starting with '/'. fromPath supplies the parameter values that get merged into the destination path, so a relative source cannot be interpreted.

Source

Thrown at packages/angular/ssr/src/utils/url.ts:190

 *
 * @example
 * ```typescript
 * // Example with placeholders resolved
 * const resolvedPath = buildPathWithParams('/*\/details', '/123/abc');
 * console.log(resolvedPath); // Outputs: '/123/details'
 *
 * // Example with a static path
 * const staticPath = buildPathWithParams('/static/path', '/base/unused');
 * console.log(staticPath); // Outputs: '/static/path'
 * ```
 */
export function buildPathWithParams(toPath: string, fromPath: string): string {
  if (toPath[0] !== '/') {
    throw new Error(`Invalid toPath: The string must start with a '/'. Received: '${toPath}'`);
  }

  if (fromPath[0] !== '/') {
    throw new Error(`Invalid fromPath: The string must start with a '/'. Received: '${fromPath}'`);
  }

  if (!toPath.includes('/*')) {
    return toPath;
  }

  const fromPathParts = fromPath.split('/');
  const toPathParts = toPath.split('/');
  const resolvedParts = toPathParts.map((part, index) =>
    toPathParts[index] === '*' ? fromPathParts[index] : part,
  );

  return joinUrlParts(...resolvedParts);
}

const MATRIX_PARAMS_REGEX = /;[^/]+/g;

/**

View on GitHub (pinned to bb72145f9a)

Solutions

Ensure fromPath starts with '/': normalize with ('/' + fromPath.replace(/^\/+/, '')).
Check you are passing the full request/config URL to fromPath, not a split remainder.
Validate both inputs with startsWith('/') before the call.

Example fix

// before
buildPathWithParams('/static/path', 'users/42');
// after
buildPathWithParams('/static/path', '/users/42');

Defensive patterns

Strategy: validation

Validate before calling

if (!fromPath.startsWith('/')) {
  throw new TypeError(`fromPath must be absolute: got '${fromPath}'`);
}
buildPathWithParams(toPath, fromPath);

Type guard

function isRootRelative(p: unknown): p is string {
  return typeof p === 'string' && p.startsWith('/');
}

Try / catch

try {
  return buildPathWithParams(toPath, fromPath);
} catch (e) {
  if (e instanceof Error && e.message.startsWith('Invalid fromPath:')) {
    return buildPathWithParams(toPath, '/' + fromPath.replace(/^\/+/, ''));
  } throw e;
}

Prevention

Pass the full URL pathname (e.g. new URL(req.url).pathname) as fromPath, never a split remainder.
Never pass route parameter fragments like ':id' as the source path.
Add a unit test asserting both inputs start with '/'.

When it happens

Trigger: Calling buildPathWithParams('/static/path', 'base/unused') or any fromPath without a leading slash (empty string, 'foo', './foo').

Common situations: Passing a route param segment like 'users/:id' directly; accidentally passing only the tail of a URL after splitting on '/'; server-base or deploy-url config missing its leading slash.

Related errors

AI-assisted analysis of angular/angular-cli@bb72145f9a (2026-08-30). Data as JSON: /api/errors/19cef932642c1a33. Report an issue: GitHub.