Multiple components being loaded

Resources: Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

@stencil/core@0.11.0

I’m submitting a … (check one with “x”) [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

Given these routes:

<stencil-route url='/enviroment/new' component='create-enviroment-view' />
<stencil-route url='/enviroment/:id' component='enviroment-details-view' />

And a user visits the URL /enviroment/new the correct view is rendered; however the enviroment-details-view componentWillLoad will load method still gets called.

Expected behavior:

enviroment-details-view should not be instantiated.

Steps to reproduce:

Related code:

I think the above code shows it all.

Other information:

[threeaccents]

I think the issue might only occur on page refreshes if I go to the route using a <stencil-route-link> then there’s no issue.

[threeaccents]

Hey man I made a new repo replicating the bug. https://gitlab.com/rodzzlessa24/stencil-router-bug

As you can see I just created a new component new-profile and added it to the routes.

          <stencil-router>
            <stencil-route-switch scrollTopOffset={0}>
              <stencil-route url='/' component='app-home' exact={true} />
              <stencil-route url='/profile/new' component='new-profile' exact={true} />
              <stencil-route url='/profile/:name' component='app-profile' />
            </stencil-route-switch>
          </stencil-router>

I added a console.log in the componentWillLoad function of the app-profile component. If you visit /profile/new you’ll see the log message from app-profile also being logged.