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?

Answer 1

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