Browser transitionTo

Hello folks, I’m having an issue with a third-party Ember application. I need to maintain a code that calls functions from the Ember SPA (Single Page Application). This code is a browser extension that explores a page written in Ember. This extension calls functions that used to exist in the window object but no longer do (I understand that using these functions might be wrong and prone to issues). The code is as follows:

const app = window.Ember.Namespace.NAMESPACES[1]
app.__container__.lookup('router:main').transitionTo('path');

Searching through documentation, I couldn’t find anything about this Ember availability in window, which leads me to think that the application might use some package for this purpose. The issue is that Ember has become undefined. My question is, where can I find reference to this? What could be the possible reasons for the application to no longer have this data? Is there another way to achieve the same result as transitionTo?

The goal is to navigate the user through the SPA while avoiding directly redirecting in the browser.

I’m not sure what the best practices are around this, but you may be able to follow the pattern used by the Ember Inspector to get a reference to what you need.

Yeah, the Ember global was deprecated recently. It was removed as of 4.0 I believe. More info here: Ember Global Deprecation

1 Like

Instead of the Ember Inspector pattern (which runs without knowing much about the main Ember app), I’d suggest setting up a global on the window yourself as needed for the router service. Something akin to:

// in your application route or a specific route if that's preferable
// inject the service and then ...
beforeModel() {
  window.EmberRouter = this.owner.lookup('service:router');
}

and then in your other JS referencing it as:

window.EmberRouter.transitionTo('path');

You’ll want to handle edge cases and tear down logic so you don’t have a global floating around needlessly or in your Ember tests. But that’s the concept