Cannot dynamically import a component with allowAppImports

[boris-petrov]

That is, it seems to only import the JavaScript part of the component while the HBS is not.

Example - say I have a my-app/components/dynamic/foo-bar.js (a Glimmer component) and a my-app/components/dynamic/foo-bar.hbs for it. In ember-cli-build.js I put allowAppImports: ['components/dynamic/*']. Doing import('my-app/components/dynamic/foo-bar').then(module => module.default) will only load the js file. So rendering that will lead to an empty screen.

I'm not sure how that could be resolved. The only thing I can think of now is that I have to write a webpack loader for HBS files (which somehow uses the template-compiler to compile the HBS), import the HBS in addition to the JS and then use setComponentTemplate to wire them up.

See here for a bit of discussion.