Javascript Routing Issue in Aurelia

Hi ,

we are not able get routes even though added routes in app.js.
we are using below code to navigate to route. But getting error saying no route available.

this.router.navigateToRoute(‘Summary’, { replace: true, trigger: true });

app.js code:

import { inject } from ‘aurelia-framework’;

@inject(Element)
export class App {
constructor(element) {
debugger
this.element = element;
this.Id = null;
this.message = ‘App’;
if (element)
this.Id = element.dataset[‘id’];
}
configureRouter(config, router) {
config.title = ‘App’;

    config.map([
        {
            route: 'Summary',
            name: 'Summary',
            moduleId: '../src/summary-control',
            nav: true
        },
        {
            route: 'Detail',
            name: 'Detail',
            moduleId:'../src/detail-control',
            nav: true,
            title: 'Details'
        },
    ]);
    this.router = router;
}

}

1 Like

What bundler are you using? webpack or the CLI built in bundler? Also can you help elaborate what you meant with “not able to get routes”?

Webpack only. I mean this.router object has routes array. WHen we use typescript, routes array has values whichever we are configuring.

But in javascript, we are getting empty routes array.

Because of that we are not able to navigate.

Hope this helps

1 Like

If it was webpack, shouldn’t you have PLATFORM.moduleName as well:

    config.map([
        {
            route: 'Summary',
            name: 'Summary',
            moduleId: PLATFORM.moduleName('../src/summary-control'),
            nav: true
        },
        {
            route: 'Detail',
            name: 'Detail',
            moduleId: PLATFORM.moduleName('../src/detail-control'),
            nav: true,
            title: 'Details'
        },
    ]);

Also, I’d recommend give your route some better name, as having Detail/Detail/Details as information on a route makes it very confusing. Maybe name: 'Product.Detail'?

About your main issue, I’m confused by how you can have different values in different languages. Also how are you able to see any value in TS?

We have tried with PLATFORM.modulename as well, But still we could not get routes.

This is what has been in typescript for another project. It is working

configureRouter(config: RouterConfiguration, router: Router) {
config.title = ‘Medical Review’;
config.options.pushState = true;

    config.map([{
        route: ['', 'home/:retain?'],
        name: 'home',
        settings: { icon: 'home' },
        moduleId: PLATFORM.moduleName('../dashboard/dashboard'),
        nav: true,
        breadcrumb: true
    },
    {
        route: 'abstraction-dashboard/:id/:retain?',
        name: 'abstractionDashBoard',
        settings: { icon: 'th-list' },
        moduleId: PLATFORM.moduleName('../dashboard/dashboard'),
        nav: false
    }]);

config.mapUnknownRoutes(’…/error/error’);
this.router = router;
}

1 Like

Well, probably it’s quite close to impossible to help without seeing the error that you are having. Can you help paste the errors here?

below is screenshot of error. But i have encountersummary route in config

1 Like

app.js

1 Like

If your app.js is at src/app.js, try PLATFORM.moduleName('./controls/edit-mode/sass-encouter-master-control')

1 Like

Getting below error

ERROR [app-router] Router navigation failed, and no previous location or fallbackRoute could be restored.

1 Like

I am getting values in routes array when i inject app.js and router in our control getting below error

ERROR [app-router] Router navigation failed, and no previous location or fallbackRoute could be restored.

kindly suggest

1 Like

Any updates on this? We are waiting for your response.

1 Like

Any updates on this? We are waiting for your response. Please see my all previous comments

1 Like

I am getting values in routes array when i inject app.js and router in our control getting below error

ERROR [app-router] Router navigation failed, and no previous location or fallbackRoute could be restored.

kindly suggest

1 Like

The error you see is because what it says: cannot find the route. It seems you triggered the navigation from an event, probably click? It’s hard to say what’s going on. Though i can suggest a few things to make it clearer for debugging:

  • “route” should not be the same with “name”, or it’ll be confusing. For your example: “route” can be encounter-summary and “name” can be Encounter.Summary. Name can be anything, “route” needs to be valid url characters.
  • try to add a unknown route config to see if your app is even able to run with the configuration.

Tried with below code. still getting same error. ERROR [app-router] Router navigation failed, and no previous location or fallbackRoute could be restored.

configureRouter(config, router) {
debugger

    config.title = 'Assessment Renderer';


    config.map([
        {
            route: 'saas-encounter-control',
            name: 'EncounterSummary',
            moduleId: '../src/controls/edit-mode/saas-controls/saas-encounter-control',
            nav: false,
            breadcrumb: false
        },
        {
            route: 'saas-encounter-detail',
            name: 'EncounterDetail',
            moduleId: '../src/controls/edit-mode/saas-controls/saas-encounter-detail',
            nav: false,
            title: 'Encounter Details'
        },

    ]);



    config.mapUnknownRoutes('../src/error/error');

    this.router = router;



}
1 Like

Any update on this issues?

1 Like

The config i see in your app seems a bit unusal. And the error message is quite plain, so probably we will need to have some better way to replicate it to progress further. Can you give a gist, or a sample project?