importroutesaureliarouteconfig

RouterConfiguration and Router undefined in aurelia


I am very new to Aurelia and just trying to apply navigation to my project.Though i import aurelia-router still it says RouterConfiguration and Router are undefined in constructor

import {Todo} from './ToDo/todo';
import {RouterConfiguration, Router} from 'aurelia-router';


export class App {
    heading = "Todos";
    todos: Todo[] = [];
    todoDescription = '';
    router :any;
    list: any[];

    constructor(RouterConfiguration: RouterConfiguration, Router: Router) {

        this.todos = [];
        this.configureRouter(RouterConfiguration, Router);
        //console.log("klist", this.list);
    }

    //config.map() adds route(s) to the router. Although only route, name, 
    //moduleId, href and nav are shown above there are other properties that can be included in a route.
    //The class name for each route is 
    configureRouter(config: RouterConfiguration, router: Router): void {
        this.router = router;
        config.title = 'Aurelia';
        config.map([
            { route: '', name: 'home', moduleId: 'home/home', nav: true, title: 'Home' },
            { route: 'users', name: 'users', moduleId: './Friends/Friends', nav: true },
            //{ route: 'users/:id/detail', name: 'userDetail', moduleId: 'users/detail' },
            //{ route: 'files/*path', name: 'files', moduleId: 'files/index', href: '#files', nav: 0 }
        ]);
    }

    addTodo() {
        if (this.todoDescription) {
            this.todos.push(new Todo(this.todoDescription));
           // this.todoDescription = '';
        }
    }

 }

Solution

  • By convention, Aurelia looks in the initial class that loads (App) for the configureRouter() function and executes it. This means, you do not have to inject anything in the constructor.

    It looks like you've simply added too much. I think fixing your sample seems to be as easy as removing some stuff, like so:

    import { Todo } from './ToDo/todo';
    import { RouterConfiguration, Router } from 'aurelia-router';
    
    export class App {
        heading = "Todos";
        todos: Todo[] = [];
        todoDescription = '';
        list: any[];
    
        constructor() {
          // note: removed routing here entirely (you don't need it)
          // also, you've already declared this.todos above, so no need to do it here again
        }
    
        configureRouter(config : RouterConfiguration, router : Router): void {
            this.router = router;
            config.title = 'Aurelia';
            config.map([
                { route: '', name: 'home', moduleId: 'home/home', nav: true, title: 'Home' },
                { route: 'users', name: 'users', moduleId: './Friends/Friends', nav: true }
            ]);
        }
    
        addTodo() {
          // removed this for brevity
        }
    
     }
    

    This should resolve your 'undefined' errors on Router and RouteConfiguration. As an additional note, don't forget to add the <router-view> to your html template as well. Otherwise, you'll get no errors but the views won't show up either:

     <template>
        <div class="content">
          <router-view></router-view>
        </div>
     </template>
    

    Great documentation on this can be found at the Aurelia Docs - Routing.