Ndtyjky

Preface:
Part of my URL strategy has an optional parameter. Meaning, the URL path could start with a region code and language code or just a language code. These codes are then proceeded by the actual app route.

/us/eng --> Home page

/us/eng/about-us --> About Us page

/eng/about-us --> About Us page

I am trying to use a UrlMatcher to accomplish the the optional region code in the URL.

My problem is, the Home page is always displayed. It never shows the About Us page or any other child route.

partial app.routes.ts

export function baseRouteMatcher(url: UrlSegment) {

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

    const consumed: UrlSegment = url;

    if (url[0].path.length === 2 && url[1].path.length === 3) {

        posParams.region = url[0];

        posParams.lang = url[1];

    } else if(url[0].path.length === 3) {

        posParams.region = new UrlSegment('world', {});

        posParams.lang = url[0];

    }

    return ({consumed, posParams});

}



export const appRoute = {

    name: 'app',

    matcher: baseRouteMatcher,

    children: [

        { path: 'terms-of-service', component: ContentComponent },

        { path: 'privacy-policy', component: ContentComponent },

        { path: 'about-us', loadChildren: './about-us/about-us.module#AboutUsModule' },

        { path: '', component: HomeComponent },

    ]

};

It's quite possible I completely misunderstand how UrlMatcher functions. It's hard finding complex examples. Any help is appreciated!

It's true. I didn't understand how UrlMatcher worked. Two things were happening:

1. I was consuming part of the url every time the matcher function was run (as opposed to returning null when I didn't need to).


2. I was also consuming ALL segments every time the matcher function was run instead of just the parts I needed to. This resulted in getting the HomeComponent each time.

Here's the working code:

export function baseRouteMatcher(segments) {



    // If we don't have any segments

    if (!segments[0]) {

        return null;

    }



    // If we only have a language, consume just the first segment

    // Else if we have a region and a language, consume first two segments

    if (segments[0].path.length === 3) {

        return { consumed: segments.slice(0, 1), posParams: { region: 'world', lang: segments[0].path } };

    } else if (segments[0].path.length === 2 && segments[1].path.length === 3) {

        return { consumed: segments.slice(0, 2), posParams: { region: segments[0].path, lang: segments[1].path } };

    }



    // The segments don't contain a region or language, don't consume anything

    return null;

}