Javascript Routing Issue in Aurelia

#1

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
#2

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”?

#3

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
#4

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?

#5

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
#6

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?

#7

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

image
image1284×138 71.7 KB

1 Like
#8

app.js

image
image928×660 101 KB

1 Like
#9

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

1 Like
#10

Getting below error

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

1 Like
#11

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
#12

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

1 Like
#13

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

1 Like
#14

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
#15

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.
#16

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
#17

Any update on this issues?

1 Like
#18

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?