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 acplish 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', ponent: ContentComponent },
        { path: 'privacy-policy', ponent: ContentComponent },
        { path: 'about-us', loadChildren: './about-us/about-us.module#AboutUsModule' },
        { path: '', ponent: HomeComponent },
    ]
};

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

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 acplish 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', ponent: ContentComponent },
        { path: 'privacy-policy', ponent: ContentComponent },
        { path: 'about-us', loadChildren: './about-us/about-us.module#AboutUsModule' },
        { path: '', ponent: HomeComponent },
    ]
};

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

• javascript
• angular
• typescript

2 Answers 2

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;
}

you can make two different matcher for different path

{matcher:languageMatcher,ponent:AboutUs},
{matcher:homePageMatcher,ponent:HomePage},

for more information you can read this blog: https://medium./@lenseg1/loading-different-angular-modules-or-ponents-on-routes-with-same-path-2bb9ba4b6566