Paths are not relative to the expected locations when using layout

[InfiniteLukeOne]

I'm submitting a bug report

• Library Version: 1.7.1

Please tell us about your environment:

• Operating System: Windows 10

• Node Version: 16.16.0

• NPM Version: 8.11.0

• JSPM OR Webpack AND Version RequireJS

• Browser: Firefox 109, Edge 109

• Language: TypeScript 4.9.5

Current behavior: I have created a new project with au new with the following selections:

√ Would you like to use the default setup or customize your choices? » Custom Project
√ App or Plugin? » App
√ Which bundler would you like to use? » CLI's built-in bundler with an AMD module loader
√ Which AMD module loader would you like to use? » RequireJS
√ What platform are you targeting? » Web
√ What transpiler would you like to use? » TypeScript
√ How would you like to setup your HTML template? » None
√ What css preprocessor would you like to use? » Less
√ Do you want to add PostCSS processing » None
√ Which unit test runner would you like to use? » None
√ Would you like to configure e2e integration testing? » None
√ What is your default code editor? » Visual Studio Code
√ Which features do you want to scaffold into your project? » Navigation App
√ Would you like to add a Dockerfile? » No

Then moved the files around to replicate the structure of the (bigger) project where I first encountered the problem into this structure:

• src
  • main.ts
  • views
    • app.ts/html
    • welcome.ts/html
    • child-router
      • index.ts/html
      • view1.ts/html
      • view2.ts/html
    • layouts
      • layout.ts/html

app.ts:

import { Router, RouterConfiguration } from 'aurelia-router';

export class App {
  public router: Router;

  public configureRouter(config: RouterConfiguration, router: Router): Promise<void> | PromiseLike<void> | void {
    config.title = 'Aurelia';
    config.map([
      {
        route: ['', 'welcome'],
        name: 'welcome',
        moduleId: './welcome',
        nav: true,
        title: 'Welcome'
      },
      {
        route: 'child-router',
        name: 'child-router',
        moduleId: './child-router/index',
        nav: true,
        title: 'Child Router'
      }
    ]);

    this.router = router;
  }
}

app.html:

<template>
  <require from="./layouts/nav-bar.html"></require>

  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host">
    <router-view layout-view-model="./views/layouts/layout"></router-view>
  </div>
</template>

Here layout-view-model only seems to work, when the path is relative to src folder.

child-router/index.ts:

import { Router, RouterConfiguration } from 'aurelia-router';

export class ChildRouter {
  public heading = 'Child Router';
  public router: Router;

  public configureRouter(config: RouterConfiguration, router: Router): Promise<void> | PromiseLike<void> | void {
    config.map([
      {
        route: ['', 'view1'],
        name: 'view1',
        moduleId: '../child-router/view1',
        nav: true,
        title: 'Welcome'
      },
      {
        route: 'view2',
        name: 'view2',
        moduleId: '../child-router/view2',
        nav: true,
        title: 'Github Users'
      }
    ]);

    this.router = router;
  }
}

The moduleIds have to be relative to the layout to work.

Expected/desired behavior:

• What is the expected behavior? I'd expect the path to the layout to be relative to the html file it's contained in, not to the main.ts file or src folder.

app.html:

<template>
  <require from="./layouts/nav-bar.html"></require>

  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host">
    <router-view layout-view-model="./layouts/layout"></router-view>
  </div>
</template>

And I'd expect the paths of the routes in the child-router to be relative to the child-router, not to the layout.

• What is the motivation / use case for changing the behavior? Intuitive paths.