Lazy load Aurelia plugin

Question

I have a large plugin (abalmus/aurelia-ace-editor) that I'm trying to load into Aurelia and it's hurting my page load time. Does anyone know how to load an Aurelia plugin other than on app start?

Main.ts:

import { Aurelia } from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation')
    .plugin('aurelia-validatejs')
    .plugin('aurelia-animator-css')
    .plugin('abalmus/aurelia-ace-editor')
    .plugin('aurelia-cookie')
    .feature('lib/form-validation-renderer');

  aurelia.start().then(() => aurelia.setRoot());
}

Porphyritic

Answer 1

In whatever module you want to load the the plugin, reference both the Aurelia class and the FrameworkConfiguration class from the aurelia-framework module:

import { Aurelia, FrameworkConfiguration } from 'aurelia-framework';

Get a reference to the Aurelia object in the ctor:

  constructor(private aurelia: Aurelia) { }

Then, in an appropriate place (such as the activate function), create a new FrameworkConfiguration object and load the plugin:

activate() {
  return new FrameworkConfiguration(this.aurelia).plugin('abalmus/aurelia-ace-editor').apply();
}

For more reading https://github.com/aurelia/framework/issues/145

Porphyritic