I am encountering issues with route navigation between child routes, as I keep receiving "routes not found" errors. Despite trying multiple solutions like injecting and refreshing after child configuration, I still face difficulties in navigating to a specific route.
For example, when attempting to navigate from create.ts to account_view, it indicates that the route name does not exist. Upon inspecting all the routes listed in this.router within create.ts, only accounts_overview and accounts_create are displayed, but not the child routes of accounts_overview.
app.ts
import {inject} from 'aurelia-framework';
import {RouterConfiguration, Router} from 'aurelia-router';
import {HttpClient} from "aurelia-fetch-client";
import {AureliaConfiguration} from "aurelia-configuration";
import {Container} from 'aurelia-dependency-injection';
import {AuthorizeStep} from 'app/authorize-step';
export class App {
private router: Router;
configureRouter(config: RouterConfiguration, router: Router): void {
config.title = 'Optios partners';
config.addAuthorizeStep(AuthorizeStep);
config.map([
{ route: '', redirect: "login" },
{ route: '/accounts', name: 'accounts', moduleId: 'account/view/index', title: 'Accounts', settings: { roles: [ 'partner', 'admin' ] } }
]);
this.router = router;
}
}
accounts/view/index.ts
import {computedFrom} from 'aurelia-framework';
import {RouterConfiguration, Router} from 'aurelia-router';
export class Index {
router: Router;
hasSearchFocus: boolean;
search: string = '';
configureRouter(config: RouterConfiguration, router: Router)
{
config.map([
{ route: '/overview', name: 'accounts_overview', moduleId: 'account/view/overview', nav: true },
{ route: '/create', name: 'accounts_create', moduleId: 'account/view/create', nav: true }
]);
this.router = router;
this.router.refreshNavigation();
}
}
accounts/view/overview.ts
import {AccountRepository} from "../repository/account-repository";
import {inject, computedFrom} from 'aurelia-framework';
import {RouterConfiguration, Router} from 'aurelia-router';
import {EventAggregator} from 'aurelia-event-aggregator';
@inject(AccountRepository, EventAggregator)
export class Overview {
router: Router;
eventAggregator: EventAggregator;
accountRepository: AccountRepository;
accounts: string[];
previousLetter: string = 'Z';
configureRouter(config: RouterConfiguration, router: Router)
{
config.map([
{ route: ['', '/blank'], name: 'account_blank', moduleId: 'account/view/blank', nav: true },
{ route: '/:id', name: 'account_view', moduleId: 'account/view/view', nav: true, href: '0' }
]);
this.router = router;
this.router.refreshNavigation();
}
}
accounts/view/create.ts
import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
import {computedFrom} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import {AccountRepository} from "../repository/account-repository";
@inject(AccountRepository, Router)
export class Create
{
router: Router;
accountRepository: AccountRepository;
name: string;
isSubmitted: boolean = false;
constructor(accountRepository: AccountRepository, router: Router)
{
this.accountRepository = accountRepository;
this.router = router;
}
create()
{
this.isSubmitted = true;
if (this.isValid()) {
this.accountRepository
.create(this.name)
.then(response => {
if (! response.ok) {
throw Error(response.statusText);
}
return response.json();
})
.then(response => {
console.log(this.router.routes);
this.router.navigateToRoute('account_view');
return response;
})
.catch(error => {
console.error(error);
});
}
}
}