Unable to navigate to child router route in aurelia

Question

I've two child apps "Solace" and "UM" for which I intend to have their own routers. My main app is "mcc-gui".

Currently, I'm trying to navigate a route "mcc-gui/um" defined in the main router to the child router (i.e. UM's router) but I'm unable to do this.

I do receive an error "Unexpected token <" instead because it cannot find the route.

When I do however to the other child app "Solace" directly from the main router using the route mcc-gui/solace/devices the required view is rendered.

This is my app.js for the main router:

export class App {
    configureRouter(config,router){
        config.title = 'MCC GUI';
        config.options.pushState=true;
        config.map(
          [
            {route:  '', name:'default',redirect: 'mcc-gui/solace/devices'},
{route:  'mcc-gui/solace/devices', name:'solace_devices',moduleId: './sections/middleware/solace/devices/devices', nav: true, title: 'Devices',settings:{icon: 'fa fa-server'}},
            {route:  'mcc-gui/um', name:'um', title: 'UM', moduleId: './sections/middleware/um/main', nav: true, settings:{icon: 'glyphicon-road'}},

        ]);
        this.router=router;
    }
}

This is my child router main.js (within mcc-gui\src\sections\middleware\um)

export class Main {

  configureRouter(config,router){
    config.title = 'MCC For UltraMessaging!';
    config.options.pushState=true;

     config.map([
                  {route:  '', name:'default', redirect: 'transports'},

                  {route:  'transports', name:'transports', moduleId: './transports/transports', nav: true, title: 'Transports',settings:{icon: 'glyphicon-road'}}


                 ]);
    this.router=router;
  }
}

This is my main.html

 <template>
      <require from='./nav-bar'></require>

      <!--<nav-bar router.bind="router"></nav-bar>-->

      <div class="page-host">
        <router-view></router-view>
      </div>
    </template>

This is my project layout: C:\dev\messagingcommandcenter\mcc-gui\htdocs\mcc-gui\src>tree

        ├───sections  
        │   └─── middleware  
        │        ├───solace  
        │       │   ├───connections  
        │       │   └───devices  
        │       └───um  
        │           ├───receivers  
        │           ├───sources  
        │           └───transports  
        |           |      |  
        |           |      |--transports.html  
        |           |         transports.js  
        |           |       
        |           |---main.html  
        |               main.js  
        |               nav-bar.html  
        |               nav-bar.js  
        |    
        |--.eslintrc  
            app.html  
            app.js       
            main.js  
            nav-bar.html  
            nav-bar.js

classicalConditioning classicalConditioning · Accepted Answer · 2016-12-02T00:39:58

it seems to me that in the router you have configured in your App class - you are doing a redirect to the route that does not exist.

Unable to navigate to child router route in aurelia

1 Answers