# Load Ember-addons on demand from main application

**URL:** https://discuss.emberjs.com/t/load-ember-addons-on-demand-from-main-application/17576
**Category:** Uncategorized
**Created:** [February 28, 2020, 12:30pm UTC](https://discuss.emberjs.com/t/load-ember-addons-on-demand-from-main-application/17576 "2020-02-28T12:30:01Z")
**Posts on this page:** 1
**Showing post:** 4

<div class="post-metadata">

### Author: ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)
#### Post date: [March 6, 2020, 9:50pm UTC](https://discuss.emberjs.com/t/load-ember-addons-on-demand-from-main-application/17576/4 "2020-03-06T21:50:14Z")

</div>

Yes, embroider can lazily load components (with their whole subgraph of dependencies).

The caveat is that Ember itself doesn’t yet offer a convenient way to invoke a component that you just imported. Like, this doesn’t work:

```nohighlight
import Component from '@glimmer/component';
import SomeComponent from './some-component';
export default class extends Component {
  constructor() {
    super();
    this.SomeComponent = SomeComponent;
  }
}

```

```nohighlight
<this.SomeComponent/>

```

So even though embroider lets you do this and all the code will load correctly:

```nohighlight
import Component from '@glimmer/component';
export default class extends Component {
  @action
  loadSomeComponent() {
    this.SomeComponent = await import('./some-component');
  }
}

```

```nohighlight
{{#if this.SomeComponent}}
  <this.SomeComponent/>
{{/if}}

```

Ember won’t be able to invoke the component, because you’ve imported the component class which is not the same thing as the component definition.

This is likely to get fixed in Ember itself, because lots of people want this kind of pattern to work and it’s basically a requirement for things like [strict mode rfc](https://github.com/emberjs/rfcs/pull/496) and [sfc and template imports rfc](https://github.com/emberjs/rfcs/pull/454).

But until then, it can be worked around something like:

```nohighlight
@action
loadComponent() {
  let component = await import('./the-lazy-component');
  this.componentName = 'whatever-name-you-want';
  define(`my-app/components/${this.componentName}`, await import('./the-lazy-component'));
  // if you aren't using template colocation, you would also need to
  // load and define the template separately. So probably 
  // just use template colocation because that's simpler
}

```

```nohighlight
{{#if this.componentName}}
  {{component this.componentName}}
{{/if}}

```

---

_[View the full topic](https://discuss.emberjs.com/t/load-ember-addons-on-demand-from-main-application/17576)._