Resolve componentUrl fail


#1

Hello,

I have an issue implementing an idea.
I want a route that resolve over received parameters to another router and load a component with template inside.

Routes:

routes = [
  {
    path: '/test/:type/',
    componentUrl: './pages/test.html',
  },  
  {
    path: '/test-selection-type/:type/',
    async(routeTo, routeFrom, resolve, reject) {
      console.log(routeTo.params.type);
      if (routeTo.params.type == "poc") {

        resolve(
          {
            componentUrl: './pages/test.html'
          },
          {
            context: {
              type: routeTo.params.type 
            }
          }
        );
      }
      else {
        resolve({ url: 'index.html' })
      }
    }
  },
]

test.html:

	<template>
	  <div class="page" data-name="test">
		<div class="navbar">
		  <div class="navbar-inner sliding">
			<div class="left">
			  <a href="#" class="link back">
				<i class="icon icon-back"></i>
				<span class="ios-only"></span>
			  </a>
			</div>
			<div class="title"></div>
		  </div>
		</div>
		<div class="page-content">
		  <div class="block text-align-center">
			<div class="block-title-big"></div>
			<br />
			<div class="gauge gauge-init my-gauge" data-type="circle" data-value="0.44" data-value-text="111 111"
			  data-size="400" data-border-width="20" data-value-text-color="#ff9800" data-border-color="#ff9800"></div>
		  </div>

		</div>
	  </div>
	</template>
	<script>
	  return {
		data () {
		  return {
			type : this.$route.params.type ,
		  }
		},
		on: {
		  pageInit: function (e, page) {
			console.log('parameter: ' + this.type )
		  }
		}
	  }
	</script>

link to call the dynamic route:

<a href="/test-selection-type/poc/" class="item-link item-content"><div class="item-inner"><div class="item-title-row"><div class="item-title">2</div></div></div></a>

Result over the console:

poc (the console log over the first route)
Uncaught (in promise) TypeError: Cannot read property ‘2’ of null
at parseComponent (0:11150)
at Object.parse (0:11253)
at 0:9858

if I change “componentUrl” to “templateUrl” on the resolve the page load fine but the pageInit event is never fired so I cannot use the template correctly.

What i’m doing wrong?

Thanks!


#2

data () : {

}

to

data : function() {

}


#3

Nop, same behavior.

Uncaught (in promise) TypeError: Cannot read property '2' of null
    at parseComponent (0:11150)
    at Object.parse (0:11253)
    at 0:9858

#4

I found the solution.
The problem is caused because the component was situated over on extra folder like “/pages/extra/test.html”.
When I move the file to the root of pages like “pages/test.html” the code works without any other modification.