bug(router): beforeEnter is not triggered for initial navigation

[vicb]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.5.4

Current behavior:

I have a simple project with two routes /foo and /bar.

When I navigate to them via <ion-item button href=...> the beforeEnter hook is called as expected.

However when I visit navigate to my project by typing the url http://<site>/bar then the beforeEnter hook is not called.

I think this behavior is not expected ?
At least it could be a pain if you want to lazy-load the component in the beforeEnter hook (or check authentication, ...)

Expected behavior:

The beforeEnter hook should be called when directly navigating to the url, i.e. http://<site>/bar

Steps to reproduce:

• Navigate to https://runkit.com/vicb/ionic-router
• Click on "endpoint" at the to open the app,
• Open the console
• Click on go to bar / go to foo - you should see beforeEnter logs in the console
• Manually update the url to end in "/foo" or "/bar",
• The content of <ion-nav> is updated as expected but the beforeEnter is not triggered (no logs).

Workaround:

A workaround would be to force an initial navigation after the router is loaded:

    customElements.whenDefined('ion-router').then(() => {
      const router = document.querySelector('ion-router');
      const target = ...;
      router?.push(target, 'root');
    });

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

Using NPM:

npm install @ionic/core@5.6.0-dev.202102181507.9d44979

Using CDN:

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@5.6.0-dev.202102181507.9d44979/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@5.6.0-dev.202102181507.9d44979/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@5.6.0-dev.202102181507.9d44979/css/ionic.bundle.css" />

[vicb]

@liamdebeasi Thanks a lot for the super quickly fixing it.

I have tested it in the attached runkit and in my app and it works great ! (no more need for the workaround I mentioned).

I left a couple of minor comments on the PR.

[liamdebeasi]

Thanks for the issue. This has been resolved via #23123, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.