How to Fix Aurelia Router failing on refresh of child route?

Question

I have an Aurelia application setup with an Admin "section". Firing up the site locally and going to "localhost:9000" will be take me to "src/blog/blog.html". This is essentially my app's entry page where I have a Routeer configured as such:

Blog.ts :

import { AuthService, AuthenticateStep } from 'aurelia-authentication';
import { autoinject, computedFrom } from 'aurelia-framework';
import { Router, RouterConfiguration, NavigationInstruction } from 'aurelia-router';

@autoinject
export class Blog {

  configureRouter(config: RouterConfiguration, router: Router) {

    config.title = "My Site";
    config.options.pushState = true;
    config.options.root = '/';

    config.addPipelineStep('authorize', AuthenticateStep);

    config.map([
      { route: ['admin'], name: 'Admin', moduleId: '../admin/admin', auth: true },
      { route: ['login'], name: 'Login', moduleId: '../admin/login' },
      { route: ['', 'home'], name: 'Home', moduleId: './routes/index', nav: true }
    ]);
  }
}

As you can see, I have a in Blog.html which captures localhost:9000/ or /home to go to route to "src/blog/routes/index.html". There other routes configured as well, but not relevant to include...

When I go to "localhost:9000/admin", there is additional logic built in to determine if user is authenticated or not. If user is not authed, they are sent to login page, else user is properly routed to the "src/admin/admin.html" page as expected. There is another setup here, that routes '' to another index.html within the admin directory.

Admin.html :

<template>
    <div class="frow gutters justify-between">
        <div class="col-md-1-6 admin-nav">
            <div class="admin-nav-link" repeat.for="row of router.navigation">
                <a href.bind="row.href">${row.settings.label}</a>
            </div>
        </div>
        <div class="col-md-4-6">
            <router-view></router-view>
        </div>
        <div class="col-md-1-6">
            <button click.delegate="logout()">Logout</button>
        </div>
    </div>
</template>

Admin.ts :

import { AuthService } from 'aurelia-authentication';
import { Aurelia, autoinject } from 'aurelia-framework';
import { AppRouter, Router, RouterConfiguration, NavigationInstruction } from 'aurelia-router';

@autoinject
export class Admin {

    constructor(private authService: AuthService, private router: Router) {
        // console.log(`Authenticated: ${this.authService.authenticated}`);
        // console.log(this.authService.getTokenPayload());
    }

    configureRouter(config: RouterConfiguration, router: Router) {

        config.title = "Admin";
        config.options.pushState = true;
        config.options.root = '/';

        config.map([
            { route: [''], name: 'Admin', moduleId: './index' },
            { route: 'posts', name: 'Posts', moduleId: './posts/posts', nav: true, settings: { label: "Posts"}},
            { route: 'users', name: 'Users', moduleId: './users/users', nav: true, settings: { label: "Users"}}
        ]);

        this.router = router;
    }

    logout() {
        return this.authService.logout();
    }

}

All is well thus far...

More routes setup, "src/admin/posts/posts.html" and ".../users.html".

I can navigate to these routes just fine when clicking on the nav links from admin page, but...

After either Posts OR Users route has been loaded, if I refresh the page (i.e. - running local site with 'au run --watch'), the site page fails to load. Unlike similar issues that have been reported, DevTools does not show "unable to find route" or anything like that. Instead, console shows 404 errors when trying to load application resources:

I've attempted some to reset the router, set root, etc. as suggested in other posts, to no avail...

Any ideas as to what I need to do to prevent this failure?

EDIT:

I realize now what's happening... but still unsure how to resolve. When my application is built and bundled, everything from "src/" is bundled to "src/scripts" and the application runs from "index.html" at the projects root dir "../src" (which includes the bundled scripts, and any additional files I have included).

When I navigate to my child routes "../admin/posts", Aurelia seems to "restarting" and attempts to use "src/admin" as it's root dir. Of course, this fails because none of the app scripts are in this directory.

So, when I try to refresh the page from "localhost:9000/admin/posts" nothing works as it tries to load:

http://localhost:9000/admin/scripts/vendor-bundle.js

whereas it should be loading

http://localhost:9000/scripts/vendor-bundle.js

Anyone know why this is, and how I can remove the "/admin/" part on refresh of these child routes?

Hi, Can you post on how you link or reference the files that reponse with 404? — jmvtrinidad

jmvtrinidad jmvtrinidad · Accepted Answer · 2017-04-25T05:17:14

If you're using pushState you should add in head tag a base tag in your index.html or starting document. See it here for more configuration. It would look something like this

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <meta charset="utf-8">
    <title>Aurelia</title>
</head>

<body  aurelia-app="main">
<script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>

How to Fix Aurelia Router failing on refresh of child route?

1 Answers