CODEWITHSUNDEEP
aurelia
realnsleo
realnsleo

Reputation: 715

Router object always has an undefined state

I am having trouble using Aurelia's Routing mechanism in my application. My app is composed of 3 pages currently. App (main file), Welcome and Form pages. I was able to implement Social Login using Auth0. My idea is when someone logs in from the Welcome page, they are redirected to the Form page. I have tried and tried by importing Router from aurelia-router but it always shows undefined. I am still getting the hang of this awesome framework and I would greatly appreciate if someone would show me where I have gone wrong.

Thank you for your time guys. The code is below:

// app.js:
import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

@inject(Router)

export class App {
    constructor(router) {
        this.router = router;
        this.router.configure(config => {
            config.title = 'My App';
            config.map([
                {route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome'},
                {route: ['form', 'form'], name: 'form', moduleId: 'form', nav: false, title: 'Provide your Details'}
            ]);
        });
        console.log(this.router) // this properly displays the object in the console
    }
}

//welcome.js:
import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import {Router} from 'aurelia-router';

@inject(HttpClient)
@inject(Router)

export class Welcome {
    heading = 'Welcome to my App!';
    lock = new Auth0Lock('xxxxxxxxxx', 'xxxxxxxxxx');
    isAuthenticated = false;

    constructor(http, router) {
        this.http = http;
        this.router = router;

        console.log(router) // Shows undefined
    }

    login() {
      // In welcome.html there is a button that succcessfully returns a successful facebook login. This function should navigate the user to the home page using:
      this.router.navigate('form');  
      // But this says navigate property is not defined
    }

}

I hope i have explained quite well. Thanks for the help!

Upvotes: 0

Views: 654

Answers (1)

realnsleo
realnsleo

Reputation: 715

I figured out the problem. I noticed I could not use:

@inject(HttpClient)
@inject(Router)

And I had to use on one line like:

@inject(HttpClient, Router)

Now it works as intended! Thank you!

Upvotes: 1

Related Questions