Unable to setRoot after login successful

I am making a login view for my app using my own basic login structure to check a database for login credentials.

When doing that, I’ve got the setRoot function in main.js as ‘login’, and so it displays the login view just fine. But when I successfully login, I am unable to setRoot again to ‘app’.

This is the console error:

Uncaught TypeError: Cannot read property 'setRoot' of undefined

When I log the value of aurelia, it’s undefined.

I am not sure what I am missing.

here is my login.js file:

import {Aurelia, inject} from 'aurelia-framework';
import jquery from 'jquery';
import {AureliaCookie} from 'aurelia-cookie';

window.jQuery = jquery;
window.$ = jquery;

export class Login {

  constructor(aurelia) {
    this.aurelia = aurelia;
    this.loginResponse = null;

    heading = 'Login';

    username    = '';
    password = '';
    login() {
        if ( this.username && this.password )
            var params = '?username=' + this.username + '&password=' + this.password;
            var url = 'http://[ip address]/login.pl'; // + params;
              type: "GET",
              url: url, // URL of the Perl script
              contentType: "application/json; charset=utf-8",
              dataType: "jsonp",
              headers: { 'Access-Control-Allow-Origin': '*' },
              mode: 'no-cors',
              crossDomain: true,
              jsonp: 'callback',

              // send username and password as parameters to the Perl script
              data: "username=" + this.username + "&password=" + this.password,
              // script call was *not* successful
              error: function(XMLHttpRequest, textStatus, errorThrown) { 
                jquery('div#loginResult').text("responseText: " + XMLHttpRequest.responseText 
                  + ", textStatus: " + textStatus 
                  + ", errorThrown: " + errorThrown);
              }, // error 
              // script call was successful 
              // data contains the JSON values returned by the Perl script
              success: function(data){
                if (data.error) { // script returned error
                  jquery('div#loginResult').text("data.error: " + data.error);
                } // if
                else { // login was successful
                  jquery('div#loginResult').text("data.success: " + data.success 
                    + ", data.userid: " + data.username);

                  AureliaCookie.set( 'ARIS', 'value', {
                    expiry: 8, //8 hrs is a normal workday
                    domain: '',
                    REMOTE_USER: data.username,

                   // this is where I get the error that aurelia is null
                  this.aurelia.setRoot( 'app' );

                } //else
              } // success
            }); // ajax
        } // if
        else {
          jquery('div#loginResult').text("enter username and password");
        } // else
        return false;

1 Like

Looks like the callback function “success” doesn’t access the right “this”.
I suggest trying to define const self = this as the first statement of the login() function and then in success, do


Hope this works for you.

1 Like

Thanks for the suggestion. I tried that, but I am still getting the same error.

Am I calling/constructing the aurelia section of this properly?

I feel like it’s something basic that I am missing.

1 Like

Next thing is I can’t find the injection code for the aurelia instance.
You should inject the dependency on your class by using @inject(Aurelia), @autoinject or with static inject = [Aurelia]
Hope this helps.

1 Like

If I add the line:



window.jQuery = jquery;
window.$ = jquery;

I get the following error:

Leading decorators must be attached to a class declaration (9:0)

The lines it’s complaining about now are the window.jQuery lines which I need in order to make ajax work properly.

1 Like

So I changed what I was doing a bit, and added the line you suggested from self.aurelia.setRoot…

and then I got a new error:


self.aurelia.setRoot( PLATFORM.moduleName( 'app' ) );


Error: Unable to find module with ID: app at WebpackLoader.eval

I imported PLATFORM, because I originally was just doing a setRoot('app'), and got the same error.

1 Like

If you use @inject, it must be just before the class declaration.

You might do this as well:

export class Login {
static inject = [Aurelia];

  constructor(aurelia) {
1 Like

Thank you for this reply.

I was able to get things working by setting the app class to this:

export default class App

That exported the module ‘app’ so that I could setRoot with it in my login module.