Aurelia not loading URLs without hash

Question

I have read the other questions on this issue and the answers didn't seem to help me. Maybe because I'm using ASP CORE. If I navigate to http://localhost:5000/#home the routing works fine. But when I remove the hashtag, the page does not load. Here is my routing code:

import {Redirect, NavigationInstruction, RouterConfiguration} from 'aurelia-router';

export class App {
  configureRouter(config: RouterConfiguration): void {
    config.title = 'xxxx';
    config.options.hashChange = false;
    config.options.root = '/';
    config.map([
      { route: ['home'], name: 'home', moduleId: 'views/home' },
      { route: '', redirect: 'home'}
    ]);
  }
}

I've also tried adding this:

config.options.pushState = true;
config.options.hashChange = true;

I'm interested in this also... I've only seen examples with the hashtag and that's how my app works too. — LStarky, Feb 12 '17 at 01:19
OK, but have you also modified server-side routing? You need to redirect all URLs to root. Check out the answer to this question: http://stackoverflow.com/questions/36650287/how-to-remove-from-url-in-aurelia — Miroslav Popovic, Feb 12 '17 at 02:09
pushState navigation requires server-side configuration. You must configure your server properly — Fabio, Feb 12 '17 at 19:12

score 1 · Answer 1 · answered Feb 12 '17 at 20:29

If you are using asp.net core you need to setup server side routing to redirect your requests to index.html. In your Startup.cs in the Configure method you need to do something like this:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        app.Use(async (context, next) =>
        {
            await next();

            if (context.Response.StatusCode == 404
                && !Path.HasExtension(context.Request.Path.Value))
            {
                context.Request.Path = "/index.html";
                await next();
            }
        });

        app.UseStaticFiles();
    }

I tried to get this working but had no luck. I may have to spend time with it tonight. I understand why something like this would work but it's not just being friendly yet. Thanks. — Dwayne Love, Feb 13 '17 at 18:37

score 0 · Answer 2 · answered Feb 13 '17 at 03:21

Instead of a redirect you can just set multiple routes to the same moduleid e.g.

config.map([
      { route: ['home'], name: 'home', moduleId: 'views/home' },
      { route: '', name: 'home2', moduleId: 'views/home'}
    ]);

if you are happy with having # in your urls don't worry about changing the push state settings

Aurelia not loading URLs without hash

2 Answers2