Aurelia bindable Router не работает с CLI

Question

У меня, кажется, проблема с использованием @bindable и <nav-bar router.bind="router"></nav-bar>. Я потратил немало времени, пытаясь найти то, что можно было бы потерять, но из того, что я могу сказать, все, кажется, все в порядке, но ни один из моих маршрутов не появляется. Он полностью пуст, а также смотрит на DOM, я также могу видеть, что ничего не заселено. Это работало в WebPack, поэтому я не уверен, почему это не сработает в CLI.

Кроме того, чтобы дать немного истории, маршруты показывают, что все правильно, если я использую <require from="./nav-bar.html"></require> (то есть с .html), но я хочу, чтобы добавить Aurelia-Auth в мой проект и поэтому мне нужно добавить код в nav-bar.js файл. У меня почти идентичный код с WebPack, и, похоже, он не работает, поэтому я не уверен, почему CLI ничего не показывает.

Вот мой код.

app.html

<template> 
    <require from="./styles/bootstrap.css"></require> 
    <require from="./styles/styles.css"></require> 
    <require from="./nav-bar"></require> 

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

    <div class="page-host"> 
    <loading-indicator loading.bind="router.isNavigating || api.isRequesting"></loading-indicator> 
    <router-view></router-view> 
    </div> 
</template> 

app.js

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

нав-bar.html

(также, как отмечалось в комментарии с/без bindable = "router"> не делает никаких различий h ЭРД)

<template bindable="router"> 
    <nav class="navbar navbar-fixed-top navbar-light bg-faded"> 
    <a class="navbar-brand" href="#"> 
     <i class="fa fa-home"></i> 
     <span>${router.title}</span> 
    </a> 
     <ul class="nav navbar-nav"> 
     <li repeat.for="row of router.navigation" class="nav-item ${row.isActive ? 'active' : ''}"> 
      <a class="nav-link" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a> 
     </li> 
     </ul> 
    </nav> 
</template> 

нав-bar.js

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

aurelia.json

"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" 
    ] 

Если кто-то хочет, чтобы увидеть полную картину, и/или загрузить или тестировать код, у меня есть публичное репо на Github, которое содержит оба пакета, то есть CLI и WebPack.

Также обратите внимание, что я обновил все пакеты до последних доступных версий (включая Babel, Aurelia-CLI и остальное).

Answer 1

После перезапуска с нуля и по частям с неподвижным Aurelia-App-Contact в качестве базового репо. Я, наконец, нашел проблему, которая в моем случае была связана с 2-мя проблемами. Сначала я отсутствовал в файле конфигурации .babelrc, а во-вторых, потому что мне не хватало этот файл, я нашел на сайте Babel, что мне нужно 2 плагина, чтобы использовать декораторы (например, @inject), и я вручную ввел их в конфигурацию aurelia.json, однако это были несовместимо.

Содержание пропавшего .babelrc является

{ 
    "sourceMap": true, 
    "moduleIds": false, 
    "comments": false, 
    "compact": false, 
    "code": true, 
    "presets": [ "es2015-loose", "stage-1"], 
    "plugins": [ 
    "syntax-flow", 
    "transform-decorators-legacy", 
    "transform-flow-strip-types" 
    ] 
} 

Тогда моя главная проблема была вызвана добавлением двух Babel плагинов к файлу aurelia.json конфигурации. Те из них не полностью совместимы с Aurelia, поэтому по этой причине .babelrc.

"plugins": [ 
    "transform-class-properties", // CAUSE OF THE ISSUE 
    "transform-decorators-legacy", // CAUSE OF THE ISSUE 
    "transform-es2015-modules-amd" 
] 

Результат Babel плагина внутри aurelia.json должен быть этой

"transpiler": { 
    "id": "babel", 
    "displayName": "Babel", 
    "fileExtension": ".js", 
    "options": { 
     "plugins": [ 
     "transform-es2015-modules-amd" 
     ] 
    }, 
    "source": "src/**/*.js" 
    }, 

Кроме того, как указывал @mgiesa, я должен удалить bindable="router" из моего шаблона. Это заменит это <template bindable="router"> на это <template>