Aurelia named router-view / viewPorts not working

Question

I'm unable to get a layout view to be properly filled with the view-ports I'm specifying in the route config. I have a route "styleguide" which should use the "sidebar" layout, filling the "sidebar" router-view with "sidebar.html" and the "content" router-view with "content.ts / html"

app.ts

export class App {
  configureRouter(config: RouterConfiguration, router: Router) {
    config.map([{ 
      route: "styleguide", 
      name: "styleguide", 
      layoutView: "layout/sidebar.html",
      viewPorts: {
        sidebar: { moduleId: "styleguide/sidebar.html" },
        content: { moduleId: "styleguide/index" },
      }
    }]);
  }
}

app.html

<template>
  <router-view layout-view="layout/default.html"></router-view>
</template>

layout/default.html (not used in this example)

<template>
    <router-view></router-view>
</template>

layout/sidebar.html

<template>
    <router-view name="sidebar"></router-view>
    <router-view name="content"></router-view>
</template>

styleguide/sidebar.html

<template>
  SIDEBAR!!
</template>

styleguide/index.ts

export class Index { }

styleguide/index.html

<template>
  CONTENT
</template>

Issues:

• "There was no router-view found in the view for styleguide/sidebar.html." -- Although I have specified the router-view name, etc.
• I do have another route which does not specify a layoutView , and thus uses the default. This only works when I replace the router-view element in layout/default.html with slot . I tried to use slots in both layouts but the sidebar layout gives me the same error.

Answer 1

The error you got is because of your app.html doesn't support viewPorts . There is only one <router-view/> with the default name, so with your route configuration with 2 viewports, it failed with the above error.

Layout, according to the documentation, seems like a way to achieve slot like behavior for your routes, not a place to put <router-view/> to me, it seems.