Aurelia named router-view / viewPorts not working

Help Requests
1

(Posted on SO but not getting much action: https://stackoverflow.com/questions/54121810/aurelia-named-router-view-viewports-not-working/54138986#54138986)

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.
1 Like
2

To clarify my answer on SO: you cannot use layout as a mean to have <router-view/>, it’s only to serve slotting behavior of view model in the matching route. So you should have <router-view/> with names in your app.html instead.

3

I did end up doing that, but it seems to go against the idea of having separate layouts. I’m just lucky that my sidebar and non-sidebar layouts are very, very similar, so I can do this …

App.html

    <div class="mdc-layout-grid">
      <div class="mdc-layout-grid__inner">
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
          <router-view name="sidebar"></router-view>
        </div>
        <div class="mdc-layout-grid__cell  mdc-layout-grid__cell--span-8">
          <h1 page-title></h1>
          <router-view></router-view>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2"></div>
      </div>
    </div>

Routes.ts

export function getBrowseRoutes(): RouteConfig[] {
  return [
    { 
      route: ["", "browse"], 
      name: "browse", 
      viewPorts: {
        sidebar: { moduleId: null },
        default: { moduleId: "browse/index" }
      }
    }
  ];
}

export function getStyleguideRoutes(): RouteConfig[] {
  return [{ 
      route: "styleguide", 
      name: "styleguide", 
      //layoutView: "layout/sidebar.html",
      viewPorts: {
        sidebar: { moduleId: "styleguide/sidebar.html" },
        default: { moduleId: "styleguide/index" },
      }
    }];
}

…but this is very cumbersome. The layout docs were either confusing or I didn’t read them correctly. I have an idea of how to make this better and will try it soon!

Thanks for your help.

1 Like