Skip to main content

​
Overview

The routeSplit utility function parses Angular route strings and provides helper methods to work with route parameters. It breaks down a route into its component parts and identifies dynamic parameters, making it easier to generate routes programmatically.

​
Function Signature

function routeSplit(route: string): {
  parts: SplitRoute[];
  params: SplitRoute[];
  createPath: (...data: string[]) => string;
}

​
SplitRoute Interface

interface SplitRoute {
  part: string;
  position: number;
}

​
Parameters

​
route
string
required
An Angular route string, potentially containing dynamic parameters prefixed with : (e.g., /blog/:slug or /user/:id/posts/:postId)

​
Return Value

Returns an object with three properties:
​
parts
SplitRoute[]
An array of all route segments with their positions. Each segment includes:
  • part: The route segment (including : prefix for parameters)
  • position: The zero-based index in the route path
​
params
SplitRoute[]
An array of only the dynamic parameter segments with:
  • part: The parameter name (without the : prefix)
  • position: The zero-based index where the parameter appears in the route
​
createPath
function
A function that accepts parameter values and generates a complete route path. Pass values in the order they appear in the route.Signature: (...data: string[]) => string

​
Usage Examples

​
Basic Route Parsing

import { routeSplit } from '@scullyio/scully';

const route = '/blog/:slug';
const { parts, params, createPath } = routeSplit(route);

console.log(parts);
// [
//   { part: '', position: 0 },
//   { part: 'blog', position: 1 },
//   { part: ':slug', position: 2 }
// ]

console.log(params);
// [
//   { part: 'slug', position: 2 }
// ]

// Generate a path with actual value
const path = createPath('my-first-post');
console.log(path); // '/blog/my-first-post'

​
Multiple Parameters

import { routeSplit } from '@scullyio/scully';

const route = '/user/:userId/posts/:postId';
const { params, createPath } = routeSplit(route);

console.log(params);
// [
//   { part: 'userId', position: 1 },
//   { part: 'postId', position: 3 }
// ]

// Pass values in order of appearance
const path = createPath('123', 'my-post');
console.log(path); // '/user/123/posts/my-post'

​
Handling Empty Routes

import { routeSplit } from '@scullyio/scully';

const { parts, params, createPath } = routeSplit('');

console.log(parts);      // []
console.log(params);     // []
console.log(createPath()); // ''

​
In a Router Plugin

import { registerPlugin, routeSplit } from '@scullyio/scully';

const myPlugin = async (route: string, config): Promise<HandledRoute[]> => {
  const { params, createPath } = routeSplit(route);
  
  // Fetch data for this route
  const items = await fetchItemsFromAPI();
  
  // Generate routes for each item
  return items.map(item => ({
    route: createPath(item.slug),
    type: 'contentFolder'
  }));
};

registerPlugin('router', 'myPlugin', myPlugin);

​
Building Route Variants

import { routeSplit } from '@scullyio/scully';

const route = '/products/:category/:productId';
const { createPath } = routeSplit(route);

const categories = ['electronics', 'books', 'clothing'];
const productIds = ['product-1', 'product-2', 'product-3'];

// Generate all combinations
const routes = [];
for (const category of categories) {
  for (const productId of productIds) {
    routes.push(createPath(category, productId));
  }
}

console.log(routes);
// [
//   '/products/electronics/product-1',
//   '/products/electronics/product-2',
//   '/products/electronics/product-3',
//   '/products/books/product-1',
//   ...
// ]

​
How It Works

1

Route Parsing

The function splits the route string by / and creates a SplitRoute object for each segment with its position.
2

Parameter Identification

Segments starting with : are identified as parameters. The : prefix is removed from the parameter name in the params array.
3

Path Generation

The createPath function maps the provided values to their respective parameter positions and reconstructs the complete path with slashes.

​
Edge Cases

If the route is null or undefined, the function returns:
{
  parts: [],
  params: [],
  createPath: () => ''
}
Static routes (e.g., /about/team) work perfectly fine. The params array will be empty, and createPath will return the original route.
const { params, createPath } = routeSplit('/about/team');
console.log(params);       // []
console.log(createPath()); // '/about/team'
The function preserves the structure but doesn’t add trailing slashes. If your route has a trailing slash, it will be maintained.

​
Common Use Cases

Route Generation

Generate concrete routes from parameterized route templates in router plugins

Route Analysis

Analyze routes to understand their structure and parameter requirements

Dynamic Sitemap

Build sitemaps by combining route templates with actual data

Testing

Create test routes programmatically for plugin development

​
Best Practices

Always pass parameter values to createPath in the same order they appear in the route. The function maps values by position, not by name.
The createPath function doesn’t validate that you’ve provided the correct number of parameters. Passing too few values will result in parameters remaining in the path (e.g., /blog/:slug).

Route Discovery

Understand how Scully discovers and processes routes

Router Plugins

Learn about creating custom router plugins

Handled Routes

See how routes are handled and transformed

​
Source Code

Location: libs/scully/src/lib/utils/routeSplit.ts:5

Build docs developers (and LLMs) love

Get started for freeTalk to us