Is Direct Routing no longer supported in Aurelia 2?

Help Requests
1

I’m just beginning to get my feet wet with Aurelia 2. One of the things I had seen described early on with 2 was direct routing – the idea of defining loading/displaying routes right in your view.

I tried playing with this in gist.dumber.app and I cannot seem to get it working. Dwayne Charrington had a blog post about routing in Aurelia 2. In it, he has a link to read more about direct routing in Aurelia 2 in the docs – but that link results in Page not found.

Has the idea of direct routing been removed from Aurelia 2

Incidentally, here is the code I was trying on gist.dumber.app

my-app.html

<import from="./products"></import>

<a load="products" href="#">Products</a>

<au-viewport name="main" default="products"></au-viewport>

products.html

<h1>This is the Products page with a message: ${message}</h1>

products.js

export class Products {
   message = "Here is the message";
}

Nothing from the Products view gets displayed.

2

Yes, direct routing still supported. Scaffolding a project using the standard npx makes aurelia requires a slightly different configuration in the main.(js|ts) to enable direct routing.

The main file that is generated as part of the standard scaffolded project looks like this

import Aurelia from "aurelia";
import { MyApp } from "./my-app";

Aurelia.app(MyApp).start();

to enable direct routing the main file needs to be altered slightly to register the router configuration needed for direct routing.

import Aurelia, { RouterConfiguration } from "aurelia";
import { MyApp } from "./my-app";

Aurelia.register(RouterConfiguration).app(MyApp).start();

I tried this with both webpack and dumber projects scaffolded with npx makes aurelia and they both worked, but when I tried the same thing on the gist.dumber.app site it unfortunately errored out.

image
image721×80 6.99 KB

I’m not very familiar with gist.dumber.app, so I’m not sure of the solution to that issue.

1 Like
3

Direct routing is currently missing from the docs due to internal discussions about the direction of the router. Currently, Jurgen has a separate package for his router, which is most likely going to be merged back into the core soon and be the default router again. Nothing has been done on this front yet. It is advisable currently if you want direct routing to use Jurgen’s router until the core router is sorted.

3 Likes
4

I am very interested in seeing how this evolves. @dwaynecharrington

Right now the routing docs in Au2 is confusing me a bit. Fundamentals page seems way complicated atm.

I hope the doc writers keep in mind that the main primary way to do something should introduce the user, then little boxes to take them to a more complicated or customized-specification or “alternative ways” to do the same exact thing. That way the docs don’t become as big as a book. Conciseness is vital in documentation, and then links to more complicated ways or to introduce it to advanced developers.

I’m also hoping that Au2 “routing” and “http fetch client” singleton for JSON APIs stays pretty simple. Also really liked one section I saw that talked about authentication, the “right way” to do authentication always seems to be a debate among some developers.

— regarding au2 routes —

I guess I’m either using “Href” or “load” in the future? I’m hoping whatever approach is used will be SEO (google) friendly so that robots can follow the links in a standard way. I have never enjoyed hashtag apps, and would always prefer to “fetch” data for most pages anyway.

In Routes, “import()” doesn’t work for me (some sort of error regarding “–module” whatever that means), so had to use:

import { ArticlesMain } from "../src";

export class MyApp implements IRouteViewModel {
    static routes: Routeable[] = [
      {
        path: 'article/*path',
        component: ArticlesMain
      }
}