title: Aurelia bindable Router not working with CLI
body: <p>I seem to have problem with using <code>@bindable</code> and <code>&lt;nav-bar router.bind="router"&gt;&lt;/nav-bar&gt;</code>. I spent some good amount of time trying to find what could be missing but from what I can tell, I all seems to be complete however none of my route shows up. It's completely empty and also looking at the DOM, I can as well see that nothing got populated. This used to work in <code>WebPack</code>, so I'm not sure why this wouldn't work in <code>CLI</code>. </p>
  
  <p>Also to give a little bit of history, the routes are all showing correctly if I use <code>&lt;require from="./nav-bar.html"&gt;&lt;/require&gt;</code> (that is with <code>.html</code>), however I want to add <code>Aurelia-Auth</code> to my project and so I do need to add some code in the <code>nav-bar.js</code> file. I have almost identical code with <code>WebPack</code> and that doesn't seem to fail there, so I'm not sure why <code>CLI</code> is not showing anything.</p>
  
  <p>Here's a briefing of my code.</p>
  
  <p><em>app.html</em></p>
  
  <pre><code>&lt;template&gt;
    &lt;require from="./styles/bootstrap.css"&gt;&lt;/require&gt;
    &lt;require from="./styles/styles.css"&gt;&lt;/require&gt;
    &lt;require from="./nav-bar"&gt;&lt;/require&gt;
  
    &lt;nav-bar router.bind="router"&gt;&lt;/nav-bar&gt;
  
    &lt;div class="page-host"&gt;
      &lt;loading-indicator loading.bind="router.isNavigating || api.isRequesting"&gt;&lt;/loading-indicator&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><em>app.js</em></p>
  
  <pre><code>export class App {
    configureRouter(config, router) {
      config.title = 'Aurelia';
      config.map([
        { route: ['', 'welcome'], name: 'home',     moduleId: 'welcome',                nav: true, title: 'Welcome' },
        { route: 'contacts',      name: 'contacts', moduleId: 'modules/contacts/index', nav: true,  title: 'Contacts' },
        { route: 'todo',          name: 'TODO',     moduleId: 'modules/todo/index',     nav: true,  title: 'TODO' }
      ]);
  
      this.router = router;
    }
  }
  </code></pre>
  
  <p><em>nav-bar.html</em></p>
  
  <p><em>(also, as noted in the comments with/without bindable="router"> doesn't make any differences here)</em></p>
  
  <pre><code>&lt;template bindable="router"&gt; 
    &lt;nav class="navbar navbar-fixed-top navbar-light bg-faded"&gt;
      &lt;a class="navbar-brand" href="#"&gt;
        &lt;i class="fa fa-home"&gt;&lt;/i&gt;
        &lt;span&gt;${router.title}&lt;/span&gt;
      &lt;/a&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li repeat.for="row of router.navigation" class="nav-item ${row.isActive ? 'active' : ''}"&gt;
            &lt;a class="nav-link" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href"&gt;${row.title}&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><em>nav-bar.js</em></p>
  
  <pre><code>import {inject} from 'aurelia-framework';
  import {customElement, bindable} from 'aurelia-framework';
  
  @inject(Element)
  @customElement('nav-bar')
  
  export class NavBar {
    @bindable router;
  
    constructor() {
      console.log('navbar constructor');
      console.log(this.router);
    }
  }
  </code></pre>
  
  <p>aurelia.json</p>
  
  <pre><code>    "transpiler": {
      "id": "babel",
      "displayName": "Babel",
      "fileExtension": ".js",
      "options": {
        "plugins": [
          "transform-class-properties",
          "transform-decorators-legacy",
          "transform-es2015-modules-amd"
        ]
      },
      "source": "src\\**\\*.js"
    },
    ...
    "dependencies": [
                "aurelia-binding",
                "aurelia-bootstrapper",
                "aurelia-dependency-injection",
                "aurelia-event-aggregator",
                "aurelia-fetch-client",
                "aurelia-framework",
                "aurelia-history",
                "aurelia-history-browser",
                "aurelia-http-client",
                "aurelia-loader",
                "aurelia-loader-default",
                "aurelia-logging",
                "aurelia-logging-console",
                "aurelia-metadata",
                "aurelia-pal",
                "aurelia-pal-browser",
                "aurelia-path",
                "aurelia-polyfills",
                "aurelia-route-recognizer",
                "aurelia-router",
                "aurelia-task-queue",
                "aurelia-templating",
                "aurelia-templating-binding"
      ]
  </code></pre>
  
  <p>If anyone wants to see the full picture, and/or download or test the code, I have a public repo available on <a href="https://github.com/ghiscoding/Realtime-TODO-Aurelia-RethinkDB/tree/master/client-cli/src" rel="nofollow noreferrer">Github</a> which contain both packages, that is <code>CLI</code> and <code>WebPack</code>.</p>
  
  <p>Also note that I updated all packages to latest available versions (that include Babel, Aurelia-CLI and the rest). </p>