Aurelia bindable Router funktioniert nicht mit CLI

Question

Ich habe Probleme mit der Verwendung @bindable und <nav-bar router.bind="router"></nav-bar>. Ich verbrachte einige Zeit damit, herauszufinden, was noch fehlte, aber nach allem, was ich sagen kann, scheint mir alles vollständig zu sein, aber keiner meiner Wege zeigt sich. Es ist komplett leer und schaut auch auf das DOM, ich kann auch sehen, dass nichts aufgefüllt wurde. Dies funktioniert in WebPack, so dass ich nicht sicher bin, warum das in CLI nicht funktionieren würde.

auch ein wenig Geschichte zu geben, werden die Routen aller zeigt richtig, wenn ich <require from="./nav-bar.html"></require> verwenden (dh mit .html), aber ich möchte Aurelia-Auth meinem Projekt hinzuzufügen und so ich brauche einige Code in der hinzufügen nav-bar.js Datei. Ich habe fast identischen Code mit WebPack und das scheint nicht zu versagen, also bin ich mir nicht sicher, warum CLI nichts zeigt.

Hier ist eine Einweisung meines Codes.

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

nav-bar.html

(auch, wie in den Kommentaren darauf hingewiesen, mit/ohne bindable = "router"> macht keine Unterschiede h ere)

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

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

Wenn jemand will, das ganze Bild sehen, und/oder herunterladen oder testen Sie die Code, ich habe eine öffentliche Repo zur Verfügung Github, die beide Pakete enthalten, das ist CLI und WebPack.

Beachten Sie auch, dass ich alle Pakete auf die neuesten verfügbaren Versionen aktualisiert (einschließlich Babel, Aurelia-CLI und den Rest).

Answer 1

Nach dem Neustart von Grund auf und Stück für Stück, mit immer noch die Aurelia-App-Contact als Basis Repo. Ich fand schließlich das Problem, das in meinem Fall mit 2 Problemen zusammenhing. Zuerst fehlte mir eine .babelrc Konfigurationsdatei und zweitens, weil ich diese Datei vermisste, hatte ich auf Babel Website gefunden, dass ich 2 Plugins brauche, um Dekoratoren (wie @inject) zu verwenden, und ich sie manuell in meine aurelia.json Konfiguration einfügte, jedoch waren diese nicht direkt kompatibel.

Der Inhalt der fehlenden .babelrc ist

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

Dann wurde mein Hauptproblem, indem zwei Babel Plugins zur aurelia.json Konfigurationsdatei verursacht. Diejenigen von denen waren nicht vollständig kompatibel mit Aurelia, daher ist die .babelrc aus diesem Grund.

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

Das Ergebnis der Babel Plugin innerhalb aurelia.json sollte dies

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

auch, wie durch @mgiesa darauf hingewiesen, sollte ich die bindable="router" von meiner Vorlage entfernen. Das ersetzt dieses <template bindable="router"> zu diesem <template>