Aurelia compose element view model, configureRouter not being called

Question

I have a parent view with routing (view):

<div class="render-body ${nav.hide === true?'hide':''}">

    <router-view class="router-view flex"></router-view>

    <div class="right-flyout ${rightFlyout.show?'show':''}">

        <i click.delegate="rightFlyoutCloseClick()" class="fa fa-close right-                flyout-close"></i>

        <compose class="add-widget-container flex" view-model="../add-              widget/add-widget"></compose>

    </div><!-- right-flyout -->

</div><!-- render-body -->

parent (view model):

configureRouter(config, router){

    this.router = router;
    config.title = "NexLP Dashboard";
    config.map([
        { route:['', 'insights'], moduleId:'../insights/insights', nav:     true, title: 'insights' },
        { route:'investigate', moduleId:'../investigate/investigate', nav: true, title: 'investigate' },
        { route:'research', moduleId:'../research/research', nav: true, title: 'research' }
    ]);

}//configureRouter()

then in my view model for my compose element (add-widget module) the configureRouter is never being called but it is loading the module because the html is rendering to the page:

export class AddWidget{

  configureRouter(config, router){
    console.log('in configureRouter in add-widget');
    console.log(router);
    this.router = router;
    router.title = 'add widget';
    config = config;
    config.map([
        { route:['', 'chart'], moduleId:'./chart', nav: true, title: 'chart', name: 'chart' },
        { route:'gecko', moduleId:'./gecko', nav: true, title: 'gecko', name: 'gecko' },
        { route:'list', moduleId:'./list', nav: true, title: 'list', name: 'list' }
    ]);

  }//configureRouter()

  constructor(){

    console.log('add widget ctor');

  }//constructor()
}//class AddWidget

view:

   <template>

add template

<ul class="add-widget-nav flex">
    <li repeat.for="route of router.navigation">
        ${route.title}
    </li>
</ul>

the two console.log()'s never get called. So I have surmised that the consfigureRouter() is never getting called. Why would this be?

Ashley Grant Ashley Grant · Accepted Answer · 2016-10-18T16:42:22

Custom Elements don't support child routers, only pages.

Also, you are misusing the compose element here. You have a statically determined view and viewmodel, so there is no need to use the compose element.

Aurelia compose element view model, configureRouter not being called

1 Answers