如何正确导入/注入aurelia以使用'setRoot'？

Question

我正在尝试设置一个带有两个“shell”的应用程序，一个用于登录，另一个用于认证后的应用程序。我遵循Mathew James Davis，https://foursails.github.io/sentry友好提供的例子，How to switch between login page and app with Aurelia也出现在这个问题中。

我的代码如下。我收到如下所示的错误。我想我不是从'aurelia-framework'使用{Aurelia}的导入和注入，但我无法弄清楚错误。

任何帮助表示赞赏。谢谢。

在main.js中

import {AuthService} from './auth-service';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources');

  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }


  aurelia.start().then(() => {
    var auth = aurelia.container.get(AuthService);
      let root = auth.isLoggedIn() ? 'app' : 'login';
    aurelia.setRoot(root);
  });
}

在login.js中

import { inject, Aurelia } from 'aurelia-framework';
import {AuthService} from './auth-service';

@inject(AuthService, Aurelia)
export class login {
    constructor(authService, aurelia) {
        this.auth = authService;
        this.app = aurelia;
    }

    login(){
        this.auth.login();
        this.app.setRoot('app');
    }

}

在app.js

import { inject, Aurelia } from 'aurelia-framework';
import AuthService from 'auth-service';

@inject(AuthService, Aurelia)
export class App {
  constructor(authService, aurelia){
    this.auth = authService;
    this.app= aurelia;
  }

  logout(){
    this.auth.logout();
    this.app.setRoot('login');
  }
}

在auth-service.js中（现在只是模拟）

 export class AuthService {



    constructor(){
        this.userLoggedIn = false;

    }

    login() {
        this.userLoggedIn = true;
    }

    logout(){
        this.userLoggedIn = false;
    }

    isLoggedIn(){
        return this.userLoggedIn;
    }

}

当我启动应用程序时，它会按预期显示“登录”视图。它有一个调用login（）的按钮。我希望这个函数然后运行this.app.setRoot（'app'）。但是我收到以下错误：

aurelia-pal.js:37 Uncaught (in promise) Error: Error invoking App. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Inner Error Stack:
Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
    at validateKey (http://localhost:9000/scripts/vendor-bundle.js:54152:11)
    at Container.get (http://localhost:9000/scripts/vendor-bundle.js:54356:5)
    at Object.invoke (http://localhost:9000/scripts/vendor-bundle.js:54214:31)
    at InvocationHandler.invoke (http://localhost:9000/scripts/vendor-bundle.js:54172:166)
    at Container.invoke (http://localhost:9000/scripts/vendor-bundle.js:54443:23)
    at StrategyResolver.get (http://localhost:9000/scripts/vendor-bundle.js:53805:36)
    at Container.get (http://localhost:9000/scripts/vendor-bundle.js:54382:21)
    at http://localhost:9000/scripts/vendor-bundle.js:70122:71
End Inner Error Stack
------------------------------------------------

    at new AggregateError (http://localhost:9000/scripts/vendor-bundle.js:57264:11)
    at Container.invoke (http://localhost:9000/scripts/vendor-bundle.js:54445:13)
    at StrategyResolver.get (http://localhost:9000/scripts/vendor-bundle.js:53805:36)
    at Container.get (http://localhost:9000/scripts/vendor-bundle.js:54382:21)
    at http://localhost:9000/scripts/vendor-bundle.js:70122:71
AggregateError  @   aurelia-pal.js:37
invoke  @   aurelia-dependency-injection.js:692
get @   aurelia-dependency-injection.js:52
get @   aurelia-dependency-injection.js:629
(anonymous) @   aurelia-templating.js:4902
Promise.then (async)        
setRoot @   aurelia-framework.js:215
login   @   login.js:23
evaluate    @   aurelia-binding.js:1555
callSource  @   aurelia-binding.js:5275
handleEvent @   aurelia-binding.js:5284

Answer 1

谢谢@bigopon，你的小费导致了解决方案。将AuthService的导入编写为：

import {AuthService} from './auth-service';

工作。我查看了MDN link的相关文件。如果在'auth-service.js'中我曾经使用过

export default AuthService {...

然后

import AuthService from './auth-service;

会工作。但是，我不明白为什么来自login.js行的错误

this.app.setRoot('app');

导致错误而不是前一行。谢谢你的帮助！