如何正确导入/注入 aurelia 以使用“setRoot”？答案

【问题标题】：How do I correctly import/inject aurelia to use 'setRoot'?如何正确导入/注入 aurelia 以使用“setRoot”？
【发布时间】：2019-04-30 09:36:42
【问题描述】：

我正在尝试设置一个带有两个“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

【问题讨论】：

我认为这与 commonjs/webpack 模块解析的循环引用有关。或者至少您的代码与AuthService 导入相关。你确定是import AuthService from '...' 而不是import { AuthService } from '...'？
谢谢 bigopon，您的提示导致了解决方案。

标签： javascript dependency-injection aurelia

【解决方案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');

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

【讨论】：