Aurelia 2 simple routing breaks with pushstate instead of hash

Help Requests
1

I am following the half ready docs to play with aurelia 2.
got stuck with very basic routing issue.

I have created a simple app using au2 new.
default routing works fine with hash in the url

but once I changed the hash to use history api, I have two problems.
1- routing does not work with following error in console when I click on any link

Uncaught (in promise) DOMException: Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.
    at new ShadowDOMProjector (http://localhost:9000/entry-bundle.js:19668:32)

2- if I refresh the page (F5), the page does not load at all.

here are my files that I changed (everything else is just as the au2 new created)
uncommented the useUrlFragmentHash: false part for history api to work.

//main.ts
//.register(RouterConfiguration)
  // To use HTML5 pushState routes, replace previous line with the following
  // customized router config.
  .register(RouterConfiguration.customize({ useUrlFragmentHash: false }))
  .app(MyApp)
  .start();

immediately got the warning in console

about.html:1 WARN: ShadowDOM is disabled for /my-app/src/about.html. 
ShadowDOM requires element name to contain at least one dash (-), you have to refactor <about> to something like <lorem-about>.`

updated the names to contain dashes

//my-app.html
<import from="./dash-board"></import>
<import from="./about-page.html"></import>
<import from="./not-found"></import>

<nav>
  <a goto="dash-board">DashBoard</a>
  <a goto="about-page">About</a>
</nav>

<au-viewport default='dash-board' fallback="not-found"></au-viewport>

and the build is successfull.
the dash-board page loads. with url set to http://localhost:9000/dash-board
but clicking on about link results in

projectors.js:41 Uncaught (in promise) DOMException: Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.
at new ShadowDOMProjector (http://localhost:9000/entry-bundle.js:19668:32)
at HTMLProjectorLocator.getElementProjector (http://localhost:9000/entry-bundle.js:19643:20)
at Controller.hydrateCustomElement (http://localhost:9000/entry-bundle.js:31845:43)
at Function.forCustomElement (http://localhost:9000/entry-bundle.js:31780:20)
at ViewportContent.loadComponent (http://localhost:9000/entry-bundle.js:15138:92)
at Viewport.canEnter (http://localhost:9000/entry-bundle.js:15958:32)
at async http://localhost:9000/entry-bundle.js:13433:38
at async Promise.all (index 0)
at async Router.processNavigations (http://localhost:9000/entry-bundle.js:13432:27)

refreshing the page with http://localhost:9000/dash-board again results in same error in console.

Is there any other router configuration that I need to add to make this work?
[I am using webpack if it matters]
gist : https://gist.dumber.app/?gist=d066c7a0176e26797c9e6b76cbb70bc9
exact same code works fine in dumber gist here
https://gist.dumber.app/?gist=d7a4fb1c61948a20c5c1bdcc3a021e1c

2

Not sure if it would make a difference, but I think the ‘new’ way to create a project for Aurelia 2 is:

npx makes aurelia

Since it works in dumber there might be something missing when using the older new command.