javascript - 如何正确导入/注入(inject) aurelia 以使用 'setRoot' ？

Question

我正在尝试使用两个“外壳”设置一个应用程序，一个用于登录，一个用于身份验证后的应用程序。我正在按照 Mathew James Davis https://foursails.github.io/sentry 友情提供的此处概述的示例进行操作，也显示在这个问题中 How to switch between login page and app with Aurelia .

我的代码如下。我收到如下所示的错误。我想我没有使用来自“aurelia-framework”的 {Aurelia} 的导入和注入(inject)，但我无法找出错误。

感谢任何帮助。谢谢。

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

}

当我启动应用程序时，它会按预期显示“登录” View 。它有一个调用 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');

导致错误而不是上一行。感谢您的帮助!