router-links: catch errors when generating link

Author: blikblum

lib/middlewares/router-links.js

@@ -111,12 +111,16 @@ function updateLink (el, ownerEl) {
   if (!routeName) return
   const params = getRouteProp(ownerEl, routeName, el, 'params', 'param-')
   const query = getRouteProp(ownerEl, routeName, el, 'query', 'query-')
-  const href = router.generate(routeName, params, query)
-  const anchorEl = el.tagName === 'A' ? el : el.querySelector('a')
-  if (anchorEl) anchorEl.setAttribute('href', href)
-  if (!router.state.activeTransition) {
-    updateActiveClass(el, routeName, params, query)
-  }
+  try {
+    const href = router.generate(routeName, params, query)
+    const anchorEl = el.tagName === 'A' ? el : el.querySelector('a')
+    if (anchorEl) anchorEl.setAttribute('href', href)
+    if (!router.state.activeTransition) {
+      updateActiveClass(el, routeName, params, query)
+    }    
+  } catch (error) {
+    console.warn(`Error generating link for "${routeName}": ${error}`)    
+  }    
 }
 
 function createLinks (ownerEl, rootEl) {

tests/functional/routerLinksTest.js

@@ -90,6 +90,22 @@ class GrandChildView extends BaseGrandChildView {
 }
 const grandChildTag = defineCE(GrandChildView)
 
+class BrokenView extends withRouterLinks(LitElement) {
+  createRenderRoot () {
+    return this
+  }
+
+  render () {
+    return html`
+    <div routerlinks>
+      <a id="a-brokenrootlink" route="root"></a>
+      <a id="a-rootlink" route="root" param-id="1"></a>
+    </div>    
+    `
+  }
+}
+const brokenTag = defineCE(BrokenView)
+
 describe('routerLinks', () => {
   let router, outlet, parentComponent
   beforeEach(() => {
@@ -103,6 +119,7 @@ describe('routerLinks', () => {
       })
       route('root', { path: 'root/:id', component: ParentView })
       route('secondroot', { path: 'secondroot/:personId', component: ParentView })
+      route('brokenroot', { path: 'brokenroot', component: BrokenView })
     }
     parentComponent = ParentView
     router = new Router({ location: 'memory', outlet, routes })
@@ -358,6 +375,14 @@ describe('routerLinks', () => {
     })
   })
 
+  it('should generate href even if there is a broken link configuration', function () {
+    return router.transitionTo('brokenroot').then(async function () {
+      const brokenEl = document.querySelector(brokenTag)
+      await brokenEl.updateComplete
+      expect($('#a-rootlink').attr('href')).to.be.equal('/root/1')           
+    })
+  })
+
   describe('when elements are added dynamically', () => {
     it('should generate href attributes in anchor tags with route attribute', function (done) {
       router.transitionTo('parent').then(async function () {