creating an SPA with polymer-dart and router library

Question

I'm attempting an SPA using polymer-dart and the routes library. I've read loads of blog entries and examples on the topic, and attempted my own approach based on some of that info. Unfortunately it's not working.

When I run my application, the behaviour I'm expecting, is that I click on the "dash" link, and the router will basically use html5 pushstate to execute my handler. Unfortunately it doesn't fire the handler at all and it just treats link as a standard html url, resulting in an obvious 404.

As you can see in the main dart script below I have a couple of print statements. The router is definitely initialized, and I assume it's listener as well. The actual handlers never fire, so I never see their prints in the console.

I'm hoping someone could point out the silly mistake I'm making here

The primary application level polymer element (app_main.html)

<!-- import polymer-element's definition -->
<link rel="import" href="packages/polymer/polymer.html">

<!-- Loads of other html imports omitted here for brevity -->

<polymer-element name="app-main">
    <template>
        <style>
            // Omitted for brevity
        </style>

        <core-scaffold id="scaffold">
            <core-header-panel navigation flex mode="seamed">
                <core-toolbar><span>Sample Application</span></core-toolbar>
                <core-menu selected="{{ route }}" valueattr="hash">

                    <!-- THIS IS MY LINK THAT _SHOULD_ FIRE OFF THE PUSHSTATE HANDLER -->
                    <paper-item icon="paper-outline" label="Dashboard" hash="dash">
                        <a _href="{{ url('dash').reverse([]) }}"></a>
                    </paper-item>

                </core-menu>
            </core-header-panel>

            <core-toolbar tool flex>
                <span flex>Page Title</span>
            </core-toolbar>

            <div class="content" fit>

                <!-- HANDLER CONTENT WILL BE LOADED HERE -->

            </div>

        </core-scaffold>
    </template>
    <script type="application/dart" src="app_main.dart"></script>
</polymer-element>

App element script (app_main.dart)

import 'package:polymer/polymer.dart';
import 'package:route/client.dart';
import "package:route/url_pattern.dart";

// Set up our urls
final homeUrl = new UrlPattern(r'/propnodeweb.html/');
final dashUrl = new UrlPattern(r'/propnodeweb.html/dash');

final allUrls = {
    "home": homeUrl,
    "dash": dashUrl,
};

// Our primary application as a polymer element
@CustomTag('app-main')
class AppMain extends PolymerElement {
    @observable String route = "home";
    Router router;

    /// Constructor used to create instance of AppMain.html.
    AppMain.created() : super.created() {
        router = new Router()
            ..addHandler(homeUrl, homeHandler)
            ..addHandler(dashUrl, dashHandler)
            ..listen();
        print("app element initialized?");
    }

    /*
    /// Called when an instance of app-main.html is inserted into the DOM.
    attached() { super.attached(); }

    /// Called when an instance of app-main.html is removed from the DOM.
    detached() { super.detached(); }

    /// Called when an attribute (such as  a class) of an instance of
    /// app-main.html is added, changed, or removed.
    attributeChanged(String name, String oldValue, String newValue) { }

    /// Called when app-main.html has been fully prepared (Shadow DOM created,
    /// property observers set up, event listeners attached).
    ready() { }
    */

    void homeHandler(String path) {
        route = "home";
        print("In home handler");
    }
    void dashHandler(String path) {
        route = "dash";
        print("In dash handler");
    }

    UrlPattern url(String urlName) => allUrls[urlName];
}

Some other files that might prove useful ...

Pubspec

name: propnodeweb
description: A sample Polymer application
dependencies:
    polymer: ">=0.15.1+3 <0.16.0"
    paper_elements: ">=0.5.0"
    route: ">=0.4.6 <0.5.0"
transformers:
- polymer:
    entry_points:
    - web/propnodeweb.html

Entry Point (propnodeweb.html)

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- <base href="/propnodeweb.html"> -->
        <title>Sample app</title>

        <!-- include the web_components polyfills with support for Dart. -->
        <script src="packages/web_components/platform.js"></script>

        <!-- Import our main app -->
        <link rel="import" href="app_main.html">

        <style>
            body {
                font-family: "RobotoDraft";
                font-weight: 300;
            }

            body /deep/ core-toolbar {
                background-color: #03a9f4;
                color: #fff;
            }

            core-menu {
                color: #01579b;
                margin: 10px 0 0 0;
            }

            core-menu > paper-item {
                transition: all 300ms ease-in-out;
            }

            core-menu > paper-item.core-selected {
                background: #e1f5fe;
            }

            @media all and (max-width: 480px) {
                core-animated-pages {
                    width: 100%;
                    height: 100%;
                }
            }
        </style>
    </head>

    <body unresolved fullbleed>
        <app-main> </app-main>

        <!-- bootstrap polymer -->
        <script type="application/dart">export 'package:polymer/init.dart';</script>
        <script src="packages/browser/dart.js"></script>
    </body>
</html>