'NoMatch' Exception with NS angular template


#1

A freshly generated app with

tns create NoElementException --template tns-template-drawer-navigation-ng

always hit the following exception:

function match$1(segmentGroup, route, segments) {
    if (route.path === '') {
        if (route.pathMatch === 'full' && (segmentGroup.hasChildren() || segments.length > 0)) {
            throw new NoMatch$1();
        }
        return { consumedSegments: [], lastChild: 0, parameters: {} };
    }
    var /** @type {?} */ matcher = route.matcher || defaultUrlMatcher;
    var /** @type {?} */ res = matcher(segments, segmentGroup, route);
    if (!res)
        **throw new NoMatch$1();**   <<<===

TNS is 3.3.1.

To reproduce, attach VS Code debugger, turn on “All Exceptions”, and then try to navigate to different routes.

Just to be clear that this is not related to the specific template in the example. Generic angular template like ‘tns create my-app --ng’ has the same behavior.

The exception appears harmless except it’s annoying when debugging. Is this expected? Appreciate any feedback. Thanks


#2

That comes directly from the router implementation from the Angular team:

If you have a default path assigned to '' and have given the route a pathMatch: "full" it’s going to throw that no match error, even when you have child routes grouped under it.


#3

Thanks Sean. Briefly reviewed Angular Router section and code history (it was changed to this exception as a part of a feature check-in titled “Implement terminal” but I couldn’t find more reference), but still not sure the rational for throwing the exception. Since it produces the expected result regardless, I will move on.


#4

So is there any way not to get those exceptions ?


#5

Don’t declare an empty path route with pathMatch full and have nested children. It’s the incorrect way of declaring route definitions. You should not use pathMatch in that instance and just catch unhandled routes with the last route definition and redirect it to root.


#6

@sean-perkins
I guess I don’t follow you.

this is the routing table : ( it happens also if i change the order)

[
   
    {
        path      : '',
        redirectTo: "app/login/welcome", 
        pathMatch : "full"
    },
    {
        
        
        
        path    : 'app', //componentless , just for prefix
        children: [
       
            {
                path    : "login",
                children: LoginRoutes
            } 
        ]
    } 
]

And still I get :

Is there something wrong ?

the default route should be app/login/welcome

(btw - login routes are : nothing but)

export   const LoginRoutes: Routes = [
    {
        path     : 'welcome',
        component: WelcomeComponent
    },
    {
        path     : 'loginSms',
        component: LoginSmsComponent
    },
    {
        path     : 'loginPassword',
        component: LoginPasswordComponent
    },
    {
        path     : 'passwordExpired',
        component: PasswordExpiredComponent
    },
    {
        path     : 'forgotPassword',
        component: ForgotPasswordComponent
    },
    {
        path     : 'sneakPeek',
        component: SneakPeekComponent
    },
      {
          path     : 'test1',
          component: Digitizer2Component
      }
];