Base or root url in Aurelia 2

1

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
2

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
3

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
4

Does this still work? Looks like the latest version of Aurelia (2.0.0-alpha.2) does not contain this functionality within the router. Any suggestions on what to try instead?

3 Likes
5

Also stuck on this issue. Want to put my app in a subfolder and have configured webpack to change baseurl when building but can’t figure out how to get the routing to not throw a 'X did not match any configured route or registered component name ’ when not run in the root directory.

2 Likes
6

Are you using Aurelia2 ? I went back to Aurelia v1 because there were other bits missing that I needed. I can show you how to configure it in V1 if you are using it, I don’t know what the status is in the current V2 though.

1 Like
7

Thanks. For this specific project I just started it and its currently pretty limited in scope so I went with Aurelia 2 to learn the new framework. I have a pretty big existing application written in Aurelia v1 so I’m well familiar with that version.

1 Like
8

I’ve just published the original Aurelia 2 router on npm. Documentation isn’t caught up yet, but https://jwx.gitbook.io/aurelia-direct-router/routing/configuration-and-setup should be accurate enough. As this router will be well maintained the documentation should shortly be fully in order.

Regarding your issues, this router deals with base path automatically. Simply provide a <base href="/path/"> in your index html and the router will respect it.

Please contact me if there are any issues or questions, either here or on Discord!

2 Likes
9

What’s the difference between aurelia/router and aurelia-direct-router?

  • load="route: blah" does not work, and as far as I can tell from the source, the attribute does not have route field.
1 Like
10

aurelia-direct-router has more features, primarily regarding direct routing and viewports, and some parts of the api differs a bit. The differences will be documented as soon as possible.

Just doing load="blah" should work. If it doesn’t, please share your route configuration and/or ping me on Discord.

1 Like
11

The aurelia-direct-router has more features, primarily regarding direct routing and viewports, and some parts of the api differs a bit. The differences will be documented as soon as possible.

Just doing load="blah" should work. If it doesn’t, please share your route configuration and/or ping me on Discord.

1 Like
12

Yes, this works, but does not respect hashes.

How do I get a list of currently available routes, local to the active route?

1 Like
13

Not sure what you mean by does not respect hashes. Can you elaborate/share your use case?

1 Like
14

If the router is configured to use hashes the load attribute keeps generating links without them

1 Like
15

Also, path: '' in children routes does not load the child component

1 Like
16

Hi

I can’t get the aurelia-direct-router to work. I get a ‘conflicting @aurelia/metadata module import detected.’.

exception
exception556×503 14.6 KB
.

I tried deleting node_modules, deleting package-lock.json and doing a ‘npm install’ with the following things in package.json
“dependencies”: {
“aurelia”: “^2.0.0-alpha.2”,
“aurelia-direct-router”: “^2.0.0-alpha.2.2”
},
“devDependencies”: {
“@aurelia/testing”: “latest”,
“@aurelia/webpack-loader”: “latest”,
“@babel/core”: “^7.14.0”,
“@babel/plugin-proposal-class-properties”: “^7.13.0”,
“@babel/plugin-proposal-decorators”: “^7.13.5”,
“@babel/plugin-syntax-dynamic-import”: “^7.8.3”,
“@babel/preset-env”: “^7.14.0”,
“autoprefixer”: “^10.2.5”,
“babel-eslint”: “^10.1.0”,
“babel-loader”: “^8.2.2”,
“css-loader”: “^5.1.3”,
“eslint”: “^7.25.0”,
“file-loader”: “^6.2.0”,
“html-webpack-plugin”: “^5.3.1”,
“htmlhint”: “^0.14.2”,
“postcss”: “^8.2.13”,
“postcss-loader”: “^5.2.0”,
“rimraf”: “^3.0.2”,
“sass”: “^1.32.12”,
“sass-lint”: “^1.13.1”,
“sass-loader”: “^11.0.1”,
“style-loader”: “^2.0.0”,
“url-loader”: “^4.1.1”,
“webpack”: “^5.36.0”,
“webpack-bundle-analyzer”: “^4.4.0”,
“webpack-cli”: “^4.5.0”,
“webpack-dev-server”: “^3.11.2”
},

1 Like
17

I’ve tried with the following three dependencies

“dependencies”: {
“aurelia”: “^2.0.0-alpha.2”,
“aurelia-direct-router”: “^2.0.0-alpha.2.2”
},
“dependencies”: {
“aurelia”: “^2.0.0-alpha.2”,
“aurelia-direct-router”: “^2.0.0-alpha.2”
},
“dependencies”: {
“aurelia”: “latest”,
“aurelia-direct-router”: “latest”
},

and they are all working for me. Is it possible the package lock file wasn’t deleted? Could you look into the newly created package lock file and see if you can find the @aurelia/metadata version conflict in there?

Sorry I couldn’t give you better help. As a small comfort, this generated conflict error is scheduled to be removed with the next Aurelia release.

Feel free to contact me on Discord once you’ve had a look at your package lock file.

1 Like
18

When you’re using the load attribute, the generated href is actually not used so the link should still work. Does it?

There’s a small overhaul to the href generation planned, but for now I’ve made a new release of aurelia-direct-router that prefixes with hashes if fragment hash is used. I hope this solves things for now. If not, let me know.

2 Likes
19

There’s an api coming shortly to query the router for configured routes from within a context (view model/custom element). Until that’s in place, you can get the configured routes for a specific custom element type by doing

import { Routes } from 'aurelia-direct-router';
...
Routes.getConfiguration(MyApp);
2 Likes
20

Thank you for support!
I got it working by coincident and then investigated what the difference was in order to try to pay back a bit with giving details that might help going forward.
I’m not into the details of npm and package-lock.json so this might make sense but for me it looks a bit weird. Starting from no node_modules installed, no package-lock.json and the following dependency

“dependencies”: {
“aurelia”: “^2.0.0-alpha.2”,
},

there is a difference to the package-lock.json if I do

npm i aurelia-direct-router
npm i

or

npm i
npm i aurelia-direct-router

The first works, the second doesn’t. The second approach adds a bunch of dependencies which I guess is then the reason for the conflict

image
image1135×822 66.6 KB

1 Like