« All deprecation guides

Deprecation Guide for Component Template Resolving

until: 6.0.0
id: component-template-resolving

There are two types of paths to migrate off the old layouts

  • use a currently supported multi-file layout (keeping separate js, ts, and hbs files)
  • migrate the component entirely to the latest component format, gjs, gts, (aka <template>)

There are some tools to help with this:

Specifically, these layouts are no longer supported:

ClassicPods
{app,addon}/
  components/
    foo.js
    namespace/
      bar.js
  templates/
    components/
      foo.hbs
      namespace/
        bar.hbs
{app,addon}/
  components/
    foo/
      component.js
      template.hbs
    namespace/
      bar/
        component.js
        template.hbs

The above example(s) can be migrated to:

{app,addon}/
  components/
    foo.js 
    foo.hbs
    namespace/
      bar.js
      bar.hbs

Or using --component-structure=nested

{app,addon}/
  components/
    foo/
      index.js 
      index.hbs
    namespace/
      bar/
        index.js
        index.hbs

Note, however, that classic components importing the layout and setting it on an @ember/component will still work. The key thing being deprecated is the runtime resolution of templates, so if there is an import involved, there is no runtime resolution.