Ignoring the engine name from routes within engine

Questions
1

While splitting an application into an engine how do we resolve the route name that had been used before? For example, if my app’s route.js (before converting blog to an engine) is as follows

this.route("blog", function () {
    this.route("list");
    this.route("detail", function () {
        this.route("comments");
        this.route("edit");
        this.route("delete");
    });
});
this.route("docs");
this.route("home");
this.route("about-us");

After converting the blog as an engine

this.mount("blog");
this.route("docs");
this.route("home");
this.route("about-us");

And the blog engine’s route.js as follows

this.route("list");
this.route("detail", function () {
    this.route("comments");
    this.route("edit");
    this.route("delete");
});

Suppose if I have used a {{#link-to "blog.list"}} See All Posts{{/link-to}} somewhere within the blog before being converted to an engine then is there any way to access the blog.list route without modifying the link-to to {{#link-to "list"}} See All Posts {{/link-to}} after being converted to engine?

I have a large application where some files contain such route names (just to make the usage simple) and these files could get used anywhere in the whole app so if I change the route name by omitting the engine name (here in this case blog) in these files then chances are high that somewhere outside of the engine it may break.

When I tried to remove the engine name from those files I got

Error while processing route: blog.index Assertion Failed: fullName must be a proper full name

I don’t have an idea about what this error is trying to say.

If there is a solution without the need of removing the engine name from the routes within the engine that would be more helpful.

3

The only way I’m aware of to do that in the manner you want is sort of a hack. There are some holes around the linking behavior that I think you could exploit to have link-to’s that behave the same whether in or out of the app (using the app’s overall resolved namespace. You can make a custom link-to component in your shared addon that just extends ember’s linkcomponent, e.g.

// addon/components/my-link-to.js
import LinkComponent from '@ember/routing/link-component';

export default LinkComponent.extend();

Then if you use it like {{#my-link-to "some.route"}} it should use the app’s router map instead of the engine’s, whether or not it’s in an engine or not. You could use link-to-external too but that obviously only works within an engine so if this is in a shared component that needs to be used both inside and outside an engine that won’t work and you’ll have to use this “hack”.

Also I’m not 100% sure but for this to work you may have to do something like this in your app/app.js where you define external routes:

        externalRoutes: {
          ...
          'blog.list': 'blog.list',
          'blog.detail.comments': 'blog.detail.comments',
        },

and then also pass those same routes into your engine (addon/engine.js)

1 Like
4

Thankyou @dknutsen I created a custom link-to component as you said and now the engine is working even without removing the engine name from the route.

1 Like