complex.url.matcher.ts

/**
 * Copyright (c) Matan Shukry
 * All rights reserved.
 */

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

// export type UrlMatchResult = {
    // consumed: UrlSegment[]; posParams?: { [name: string]: UrlSegment };
// };

export function ComplexUrlMatcher(paramName: string, regex: RegExp) {
    return (
        segments: UrlSegment[],
        segmentGroup: UrlSegmentGroup,
        route: Route) => {

        const parts = [regex];
        const posParams: { [key: string]: UrlSegment } = {};
        const consumed: UrlSegment[] = [];

        let currentIndex = 0;

        for (let i = 0; i < parts.length; ++i) {
            if (currentIndex >= segments.length) {
                return null;
            }
            const current = segments[currentIndex];

            const part = parts[i];
            if (!part.test(current.path)) {
                return null;
            }

            posParams[paramName] = current;
            consumed.push(current);
            currentIndex++;
        }

        if (route.pathMatch === 'full' &&
            (segmentGroup.hasChildren() || currentIndex < segments.length)) {
            return null;
        }

        return { consumed, posParams };
    }
}

routing.module.ts

/**
 * Copyright (c) Matan Shukry
 * All rights reserved.
 */
 
export const UserRoutes: Routes = [
  {
    path: 'users',
    component: UserComponent,
    children: [
      {
        path: '',
        component: UserListComponent
      },
      {
        matcher: ComplexUrlMatcher("id", /[0-9]+/),
        component: UserItemComponent
      },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(UserRoutes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

@matanshukry :- i have replicated your code into my demo project.... but it shows error "Expression form not supported" while building project , currently i am using lastest version of angular i,e angular4... can you please guide me if i am misssing something.

My requirement is as follows :-

../xyz/abc/file/asd/dsa/das
../xyz/abc/file/qwe/dfg/yrf

if url contains "file" word, it should redirect to specific component.

@matanshukry I'm experiencing the same issue as @ronaksharma8 and am just as stumped as to what to do. Any help would be greatly appreciated!!!

getting following error.

Type '{ path: string; children: ({ path: string; loadChildren: string; } | { path: string; canActivate:...' is not assignable to type 'Route[]'.
Type '{ path: string; children: ({ path: string; loadChildren: string; } | { path: string; canActivate:...' is not assignable to type 'Route'.
Types of property 'children' are incompatible.
Type '({ path: string; loadChildren: string; } | { path: string; canActivate: typeof AuthGuard[]; loadC...' is not assignable to type 'Route[] | undefined'.
Type '({ path: string; loadChildren: string; } | { path: string; canActivate: typeof AuthGuard[]; loadC...' is not assignable to type 'Route[]'.
Type '{ path: string; loadChildren: string; } | { path: string; canActivate: typeof AuthGuard[]; loadCh...' is not assignable to type 'Route'.
Type '{ matcher: (segments: UrlSegment[], segmentGroup: UrlSegmentGroup, route: Route) => { consumed: U...' is not assignable to type 'Route'.
Types of property 'matcher' are incompatible.
Type '(segments: UrlSegment[], segmentGroup: UrlSegmentGroup, route: Route) => { consumed: UrlSegment[]...' is not assignable to type 'UrlMatcher | undefined'.
Type '(segments: UrlSegment[], segmentGroup: UrlSegmentGroup, route: Route) => { consumed: UrlSegment[]...' is not assignable to type 'UrlMatcher'.
Type '{ consumed: UrlSegment[]; posParams: { [key: string]: UrlSegment; }; } | null' is not assignable to type 'UrlMatchResult'.
Type 'null' is not assignable to type 'UrlMatchResult'.

@matanshukry i also facing same issue.how can i solve it?

@matanshukry i am also facing same issue
ERROR in app/app-routing.module.ts(120,49): Error during template compile of 'AppRoutingModule' Expression form not supported.
when i am making production build . i am using angular 5

For mine use case where a matcher can have optionally parameter

/**
 * Generic matcher function
 *
 * Set in route data variable with a named regex to get parameters
 * ie:
 * data: {
 *     regex: /^(?<currency_pair>[a-z_]{3,6}-[a-z_]{3,6})?$/
 * }
 */
export function matcher(segments: UrlSegment[], segmentGroup: UrlSegmentGroup, route: Route): UrlMatchResult {
    const regex = route.data.regex;
    const url = segments.length == 1 ? segments[0].toString() : '';

    let params = url.match(regex);
    if (params) {
        const posParams: { [key: string]: UrlSegment } = {};

        // Named parameter based in name group of regexp
        for (const [name, value] of Object.entries(params.groups)) {
            posParams[name] = new UrlSegment(value, {});;
        }

        return { consumed: segments, posParams };
    }

    return null;
}