Refine native class examples

[kategengler]

Use the constructor in the application route. Avoid outdated bubbling route-actions.

[jrjohnson]

@kategengler this example gives me an InternalError: "too much recursion" which seems to result from the router service being the same as the router we're constructing. Changing the code to:

this.on('routeDidChange', () => {
  const page = this.router.currentURL;
  const title = this.router.currentRouteName || 'unknown';

  this.metrics.track(page, title);
});

Seems to work and fix that issue.

[kategengler]

@jrjohnson I have the code from the example verbatim in an app, and working, on 3.13.

which seems to result from the router service being the same as the router we're constructing

I'm not sure I understand this? This snippet is in the constructor of the Application Route, so we're not constructing a router.

[jrjohnson]

Ah, I see a difference. The Octane blueprint and Ember 3.14 use:
import EmberRouter from '@ember/routing/router';
and this code has:
import Route from '@ember/routing/route';

Aside from the name of the import one is from router and one is from route. I have no idea which is correct.

[kategengler]

@jrjohnson I think you are in the wrong file. This should be in app/routes/application.js not in app/router.js

[jrjohnson]

😊 damn! Sorry for the noise. I've always had these instructions in router.js and I didn't even notice the difference. Super obvious why the import is different now too.

[josemarluedke]

Thank you @kategengler and @jrjohnson.