Lazy Loading Route-less Engines

I don’t think this feature has been implemented / tested but I’ll go ahead and log an issue for tracking. Lazy-loading non-routeable engines is not working. The assets are never loaded and as such are not registered…

I end up with this error “Assertion Failed: You used {{mount 'nonrouteable'}}, but the engine ‘nonrouteable’ can not be found.”"

[aalasolutions-zz]

Any updates on this? Our app is route-less and need to use lazy loading for the engine. Main JS file is like 3MB and some users are not having access to all the areas.

[villander]

Route-less Engines, on the other hand, are Engines which are not able to be routed to. This means that they don’t live at a specific route, but are instead mounted within a template or your application. Examples of good candidates for route-less Engines are chat boxes or complex forms.

Following the concept of route-less, I think we should start the request to load the Engine assets, when the template of that route / component is called. We can do something like what React does:

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route } from "react-router-dom";

import AppTemplate from './commons/ui/components/AppTemplate';
import AsyncComponent from './AsyncComponent';
import basePath from './commons/utils/basePath';

import "./style/app.scss";

const home = () => import(/* webpackChunkName: "home" */ './modules/home/index');
const projects = () => import(/* webpackChunkName: "projects" */ './modules/projects/index');
const contact = () => import(/* webpackChunkName: "contact" */ './modules/contact/index');

render(
  <Router>
    <AppTemplate>
      <Route path={basePath``} exact={true} component={() => <AsyncComponent moduleProvider={home} />} />
      <Route path={basePath`projects`} exact={true} component={() => <AsyncComponent moduleProvider={projects} />} />
      <Route path={basePath`contact`} exact={true} component={() => <AsyncComponent moduleProvider={contact} />} />
    </AppTemplate>
   </Router>,
  document.getElementById("app")

Yeah, this hasn’t really been considered yet. I think the primary question was how to handle the fact that the mount point will render asynchronously. Once that is determined, we just need to identify where we in that lifecycle we initiate the request to load the Engine assets.

I would love to work on this and various features of ember-engines, but I need someone to introduce me to the gears of this addon