Angular 10 References/ Router


Router uses UrlMatcher to decide that Route.path from configuration is fit to a current navigation URL. Router splits url to segments and calls UrlMatcher function.

type UrlMatcher = (segments: UrlSegment[], group: UrlSegmentGroup, route: Route) => UrlMatchResult;

A custom URL matcher can be provided when a combination of path and pathMatch isn't expressive enough.

For instance, the following matcher matches html files.

export function htmlFiles(url: UrlSegment[]) {
  return url.length === 1 && url[0].path.endsWith('.html') ? ({consumed: url}) : null;

export const routes = [{ matcher: htmlFiles, component: AnyComponent }];


If Route.urlMatcher is not defined, will be used defaultUrlMatcher.

defaultUrlMatcher splits path to segments usign delimeter /. If segment starts from : it marks as parameter with the same name (except : at beginning).

Path URL
blog /blog
blog/post /blog/post
blog/post/:id /blog/post/123
Links & Tutorials