Directly load route

Help Requests
1

Hi everyone. I’m looking for help in configuring my app/routes so that I can directly a route (say, from an external link or bookmark) and not have the application fail to load the bundle.

Here is a sample route I have:

app.ts:

  configureRouter(config: RouterConfiguration, router: Router) {
    config.options.pushState = true;
    config.options.root = '/';
    config.map([
      { route: 'login', name: 'login', moduleId: PLATFORM.moduleName('./login'), nav: false, title: 'Login', },
      { route: ['main'], name: 'main', moduleId: PLATFORM.moduleName('./main/index'), nav: true, title: 'Main',
      { route: ['profile'], name: 'profile', moduleId: PLATFORM.moduleName('./profile/index'), nav: false, title: 'Profile',
      { route: [''], redirect: 'main' }
    ]);

    this.router = router;
    config.addPipelineStep('authorize', AuthorizeStep);

  }

profile/index.ts:


  configureRouter(config: RouterConfiguration, router: Router) {

    config.map([
      { route: ['settings'], name: 'settings', moduleId: PLATFORM.moduleName('./settings'), nav: true, title: 'Profile Settings', 
      { route: [':id?'], name: 'view', moduleId: PLATFORM.moduleName('./view'), nav: false, title: 'View Profile',
      { route: '', redirect: 'view' }
    ]);
    this.router = router;
  }

When I try to directly load a profile, say http://localhost:4000/profile/someuser, I get the following repeated for each chunk:

GET http://localhost:4000/profile/app~d0ae3f07.0914d36cb8231baaa56d.chunk.js
[HTTP/1.1 404 Not Found 2ms]

The resource from “http://localhost:4000/profile/app~d0ae3f07.0914d36cb8231baaa56d.chunk.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

My goal is to have routing work such that loading a route (either through nav or direct linking) will resolve correctly.

For instance:

  • http://localhost:4000/profile: should load the profile of the logged in user, or redirect to login
  • http://localhost:4000/profile/settings: should load the settings of the logged in user, or redirect to login
  • http://localhost:4000/profile/someUser: should load the profile of the user someUser

I’m able to navigate within the app to http://localhost:4000/profile just fine for the current user, and it does force me to login if I’m not already, but I can’t directly browser-load anything to check other user profiles. Also, when logged in and navigating to /profile, the location url changes to http://localhost:4000/profile/view, which is incorrect because that implies that I’m viewing user view.

2

To make pushState work in all cases, you also need to configure your server to support it. The server should redirect all unknown addresses to the root (or whatever endpoint is serving the Aurelia app).

I have answered a similar question on SO, quite some time ago. Take a look at step #4 - How to remove # from URL in Aurelia - Stack Overflow

1 Like
3

ok, so I was able to remove the # from the url, and pushState is working. I just need to get a direct loading of a url to work. I’m launching my app in dev using au run. Is there an Aurelia setting to do what you say, or is this a webpack thing?

4

Aha, you are using the Webpack dev server…

@dwaynecharrington had an article about that - Fixing Aurelia Webpack PushState "index.html" Problem - I Like Kill Nerds. The post is 5 years old, but the configuration option is still there in the Webpack documentation - DevServer | webpack.

In case you run into troubles with it, there’s a SO question with several answers that might help - javascript - historyApiFallback doesn't work in Webpack dev server - Stack Overflow.

5

This solved the problem for me:

output.publicPath: '/'