1

I am currently using ember 1.13. I have two apps which use emberjs. Now I am thinking of integrating these two apps by creating a new route in the first app and display specific route of the second app. Many suggested to use ember-engines,but they need ember 2.10 or higher.Since my application mostly depends on IE 8,I cannot migrate from ember 1.x.

So what should I do? Thanks in advance!!

Cheers!!!

Kasinaat 007
  • 124
  • 14

1 Answers1

2

So one approach that would work pre engines is to leverage an addon for the common routes. Your addon will define routes, controllers, and templates as usual with the addons directory. You will also want to define something like addons/utils/router-utils:

// assume we have a single route foo
export function addRoutes(router) {
    router.route('foo');
}

router is the this value that ember provides when invoking Router.map. So, within your addon, to allow for "normal" feeling development, you'll want to use this addRoutes function within the dummy app router in tests/dummy/app/router.js:

import EmberRouter from '@ember/routing/router';
import config from './config/environment';
import { addRoutes } from 'addon-with-routes/utils/router-utils';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  addRoutes(this);
});

export default Router;

Note well, the above router.js file is what Ember 3.8 generates. Yours will most likely differ but the key point is that we invoke our addRoutes function with the anonymous Router.map this value to dynamically add our routes to the dummy app. See this twiddle for an example of adding routes to the router dynamically.

You can now run ember serve from within the addon project and test your routes. Acceptance tests run against the dummy app as well so you're not really constrained by this approach.

Now within your consuming app, you would do the same thing we did in the dummy app to add the routes. This approach, in general, though will require careful engineering to work effectively (a lot of the problems that ember engines solves must be solved by you in some way). Your addon will most likely have to expose a lot of configuration so that you can route outwards from the addon back into the consuming app which will not know about the routes in the consuming app. You'll have to avoid namespace collisions. Sounds fun though :)

mistahenry
  • 8,554
  • 3
  • 27
  • 38
  • 1
    You don't even need to call an `addRoutes()` function in consuming app. Addon could export an initializer that registers the routes. – jelhan Mar 13 '19 at 18:48
  • I tried the above approach...It worked fine when I was testing with the dummy app...but when I did the same with the original app I am getting `UnrecognizedURLError {message: "/foo", name: "UnrecognizedURLError"}` – Kasinaat 007 Mar 13 '19 at 22:42
  • 1
    that would mean you probably haven't added the routes properly to the consuming app. Could you show the code for how you're adding? Can you inspect your store in the web console with `YourAppGlobalName.__container__.lookup('route:foo')` and see if that returns anything? – mistahenry Mar 14 '19 at 13:43
  • @mistahenry `YourAppGlobalName.__container__.lookup('route:foo')` returns `undefined`. `import Ember from 'ember'; import config from './config/environment'; import addRoutes from 'test-addon/utils/router-util'; const Router = Ember.Router.extend({ location: config.locationType, rootURL: config.rootURL }); Router.map(function() { addRoutes(this); }); export default Router; ` – Kasinaat 007 Mar 14 '19 at 14:06
  • and now I am getting `loader.js:110 Uncaught Error: Could not find module test-addon/utils/router-util imported from TestApp/router` – Kasinaat 007 Mar 14 '19 at 14:09
  • 1
    @Kasinaat007 you need to fix that import. Are you sure the addon is being installed? if you defined a route `addon/routes/foo`, and no `route:foo` exists, then it seems your addon isn't being merged correctly. – mistahenry Mar 14 '19 at 15:45
  • 1
    did you define `addRoutes` as a default export or named? you're importing as a default at the moment – mistahenry Mar 14 '19 at 15:47