Base or root url in Aurelia 2

Hi, I am trying out an Aurelia2 app. Its part of a larger web application and is loaded on a sub page with url ‘/members/’.

I cant figure out how to configure the Router to ignore the base /memeber/ part. In Aurelia v1 i would set config.options.root in the configureRouter method. There does not seem to be any equivalent in v2. I’ve tried setting the tag in the html, that does not help.

I could configure /members/ as a dummy parent route as a workaround, but maybe there is a better way?

2 Likes

There will be a configuration option in au2 as well, but it’s not there yet. In the meantime, you can try adding <base href="/members"> to the head of your index.html and change your file called main into

import Aurelia, { RouterConfiguration } from 'aurelia';
import { HookTypes } from '@aurelia/router';
import { MyApp } from './my-app';

const urlPrefix = '/members/';

Aurelia
  .register(RouterConfiguration.customize({
    useUrlFragmentHash: false,
    hooks: [
      {
        hook: (url) => url.startsWith(urlPrefix) ? url.slice(urlPrefix.length) : url,
        options: { type: HookTypes.TransformFromUrl },
      },
      {
        hook: (state) => typeof state === 'string' && !state.startsWith(urlPrefix) ? `${urlPrefix}${state}` : state,
        options: { type: HookTypes.TransformToUrl },
      },
    ]
  }))
  .app(MyApp)
  .start();

Let me know if you run into any issues!

2 Likes

That fixed it! Thanks for the workaround.

Except for the ( totally understandable ) occasional missing bits, Aurelia 2 is feeling great! Can’t wait for Beta!

3 Likes