Aurelia Route ModuleID Needs to Be Unique?

Help Requests
1

I’ve upgraded all my dependencies and found that now the moduleId needs to be unique in my routes, but I am leveraging the same code path. How can I achieve this, but my code below will not load the routes, but the moduleId paths are the same?

{
                 route: 'treks',
                 name: 'treks',
                 moduleId: PLATFORM.moduleName('trek/treks/treks', 'treks'),
                 title: 'Upcoming Treks',
                 //auth: true,
                 appPage: true
                },
                {
                 route: 'treks/purchased',
                 name: 'purchased',
                 moduleId: PLATFORM.moduleName('trek/treks/treks', 'purchased'),
                 title: 'Purchased Treks',
                 appPage: true,
                 //auth: true
                },
                {
                 route: 'treks/visited',
                 name: 'visited',
                 moduleId: PLATFORM.moduleName('trek/treks/treks', 'visited'),
                 title: 'Completed Treks',
                 appPage: true,
                 //auth: true
                },
2

Aurelia is based on convention so works best bearing that in mind though not everyone uses the same convention. Here, it looks like you need one moduleId and use an optional parameter in your route. The moduleId is a file location which is a directory where the view model (comprising an html and ts file) is located. The parameter is used to determine what is displayed. Routes are as follows:

  1. treks
  2. treks/purchased
  3. treks/visited

{
route: ‘treks/:past,
name: ‘treks’,
moduleId: PLATFORM.moduleName(‘trek/treks/treks’),
title: ’ Treks’,
appPage: true,
//auth: true
},

3

Yes, but when using the same file path to the same view model for multiple routes and navigating to those routes I get this error:

aurelia-logging-console.js:50 ERROR [app-router] Error: Unable to find module with ID: trek/treks/treks

When I remove two of the three routes, it loads perfectly. It seems like the moduleId paths need to be unique, but that shouldn’t be the case. You should be able to leverage the same view-model to have less code duplication. Is there any work around for this?

4

I tried to reproduce your issue, and I’ve been able to notice that it specifically occurs when you use the option parameter when using PLATFORM.moduleName such as in PLATFORM.moduleName('trek/treks/treks', 'visited')
Given the explanations about this parameter, I think that you might be misusing it.
Can you try without using it (i.e. PLATFORM.moduleName('trek/treks/treks')) on your 3 routes ?

5

@chabou doing your recommendation would make it so that code splitting doesn’t work. Take notice to the chunk name in the documentation from https://github.com/aurelia/webpack-plugin/wiki/Managing-dependencies.

Removing the chunk name fixes the error, but now kills code splitting on these routes.

6

Yes I was aware of that, but I was hoping that you could (should?) have wanted it not to be in separated chunks since it is the same view-model that is used.
Actually I don’t know what Webpack should do in this particular case : should it duplicate the code in each chunk ? If so, what would happen if multiple chunks are eventually loaded (the same VM shouldn’t exist more than once) ?
Maybe one way to solve this issue is to have a dedicated chunk for your 3 routes but that may not be acceptable to you.

7

@chabou valid points, but regardless of how I choose to chunk it, the code should not be breaking the app. There should be a fix from the aurelia side. Even if I did want them in the same chunk, I currently cannot pass in the same chunk as a parameter without breaking the code which seems bad.

8

valid points, but regardless of how I choose to chunk it, the code should not be breaking the app. There should be a fix from the aurelia side.

I guess you’re right. Aurelia should warn the developer that this code configuration is not supported, at least in docs or even better at compile time. Because it compiles correctly while not being supported (!) Can you fill in an issue so that this could be addressed ? :slight_smile:

Even if I did want them in the same chunk, I currently cannot pass in the same chunk as a parameter without breaking the code which seems bad.

Are you sure of this ? I’m kind of surprised as I’ve just been able to test it to check. Maybe I’m not executing the same test as you ? Or am I using different version of Aurelia packages ? Mine works using this configuration :

{
    route: 'home',
    name: 'home',
    moduleId: PLATFORM.moduleName('app-login/landing-page', 'trek'),
    title: 'home.title'
  }, {
    route: 'treks',
    name: 'trek',
    moduleId: PLATFORM.moduleName('app-login/landing-page', 'trek'),
    title: 'trek.title'
  },  {
    route: 'signup',
    name: 'signup',
    moduleId: PLATFORM.moduleName('app-login/signup'),
    title: 'signup.title'
  }