Conditionally Load Features dynamically as Webpack chunks after Aurelia starts and without Routing

Framework Knowledge
1

Hi,
We are using Webpack 4, and following Configure feature after aurelia starts, with some adoption to webpack, to load features dynamically after Aurelia starts:

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

@inject(Aurelia)
export class App {
    
    constructor(private aurelia: Aurelia) {
    }

    loadFeatureA() {
        return new FrameworkConfiguration(this.aurelia)
            .feature(PLATFORM.moduleName('path/to/feature-a/index', 'feature-a-chunk'))
            .apply();
    }
    loadFeatureB() {
        return new FrameworkConfiguration(this.aurelia)
            .feature(PLATFORM.moduleName('path/to/feature-b/index', 'feature-b-chunk'))
            .apply();
    }
}

Loading Feature A and B happens based on some conditions at application startup. It is not related to Routing, so We cannot use routing for chunk splitting and use the second argument of the PLATFORM.moduleName.
In Feature A and Feature B we use CompositionEngine of aurelia-templating directly to dynamically compose the custom elements into the DOM.

That works fine until Feature A and Feature B inject App class and use it. There are no direct dependencies between Feature A and Feature B, but they both inject App to get some common App state.

// feature-a.ts
 import { inject } from 'aurelia-framework';
   import { App } from 'app';

@inject(App)
export class FeatureA {

    constructor(private app: App) {
    }
}

// feature-b.ts
 import { inject } from 'aurelia-framework';
   import { App } from 'app';

@inject(App)
export class FeatureB {

    constructor(private app: App) {
    }
}

If dependency of Feature A on App is removed or of Feature B on App is removed everything works.
When both Feature A and Feature B have App injected, the compilation fails with error “Error: Cyclic dependency” which is thrown by topsort (html-webpack-plugin).
After a bit of debugging it seems that It happens because loadFeatureA() and loadFeatureB() creates a dependency of App on Feature A and on Feature B in terms of webpack chuncks (there is no import statements), and since Feature A and Feature B depend back on App, it causes the circular dependency.

  1. Is there some approach we can take to remove the dependency (webpack chunks wise) of App on the features?
  2. Is there a better/alternative approach to: Conditionally Load Features dynamically as Webpack chunks after Aurelia starts and without Routing?

Thanks!

2

HtmlWebpackPlugin is causing the issue, you can get rid of the error by setting the chunksSortMode option to ‘none’ in webpack.config.js:

new HtmlWebpackPlugin({
  ...
  chunksSortMode: 'none'
}),

checkout this discussion https://github.com/jantimon/html-webpack-plugin/issues/870