Lazy import of external js file in ember.js

Question

I am trying to import external js file in one of my application routes.

@(task(function* () {
  yield import('jquery/dist/jquery').then(module => module.default);
  yield import('jquery-ui/ui/widget.js').then(module => module.default);
  yield import('jquery-ui/ui/widgets/mouse.js').then(module => module.default);
  yield import('jquery-ui/ui/data.js').then(module => module.default);
  yield import('jquery-ui/ui/ie.js').then(module => module.default);
  yield import('jquery-ui/ui/scroll-parent.js').then(module => module.default);
  yield import('jquery-ui/ui/version.js').then(module => module.default);
  yield import('jquery-ui/ui/widgets/sortable.js').then(module => module.default);
  yield import('jquery-ui/ui/position.js').then(module => module.default);    
  yield import('pivottable/dist/pivot.js').then(module => module.default);
})) pivotTableRunner;

afterModel(){
  this.get('pivotTableRunner').perform();
}

Currently I’ve been importing that library in my pivotTableRunner, but it turned out, that I have had to make some modifications of that library imported from node_modules. I copied it’s content to another file, and placed it in vendor folder. Is there any way to import it lazily after pivotTableRunner task?

score 3 · Accepted Answer · answered Aug 17 '20 at 15:55

3

It looks like the suggested path for this would be to create a local NPM module and then tell about it. This would allow you to do

async afterModel(){
  await this.get('pivotTableRunner').perform();
  await import('LOCAL_PACKAGE');
}

Some good instructions for creating the local module are in this answer

answered Aug 17 '20 at 15:55

jrjohnson

2,401
17
23

You need to use [ember-auto-import](https://github.com/ef4/ember-auto-import) to make this work. It's included in a newly created ember application since some time. – jelhan Aug 18 '20 at 11:20

Lazy import of external js file in ember.js

1 Answers1