Cyclic dependency error when injecting RouteGeneratorService

[jasonhjohnson]

I'm getting a Cyclic dependency error when injecting the RouteGeneratorService into a view model.

The relevant code is as follows:

app.routes.ts

export const personas = {
  route: 'personas',
  name: 'personas',
  moduleId: PLATFORM.moduleName('modules/personas/personas-section.vm', 'personas'),
  nav: true,
  title: 'Personas'
};

route-generator.service.ts

private routeTree: ITreeConfig[] = [
    appRoutes.welcome,
    appRoutes.users,
    {
      ...appRoutes.personas,
      subroutes: [
        personaRoutes.select
      ]
    }
  ];

personas-section.vm.ts

import { autoinject } from 'aurelia-framework';
import { Router, RouterConfiguration } from 'aurelia-router';

import { RouteGeneratorService } from './../../services/route-generator.service';

@autoinject
export class PersonasViewModel {

  public router!: Router;
  public heading = 'Personas';

  constructor(
    private routeGeneratorService: RouteGeneratorService,
  ) { }

  public configureRouter(config: RouterConfiguration, router: Router): void {
    config.map(this.routeGeneratorService.getRoutesConfigByParentRouteName('personas'));

    this.router = router;
  }
}

The following file is the file that fails to inject the routeGeneratorService:

select.vm.ts

import { autoinject } from 'aurelia-framework';
import { Router, RouterConfiguration } from 'aurelia-router';
import { RouteGeneratorService } from './../../services/route-generator.service';

@autoinject
export class PersonasSelectViewModel {
  public router!: Router;
  constructor(
    private routeGeneratorService: RouteGeneratorService
  ) { }
}

Any help is appreciated.

STACK:

[at-loader] Using [email protected] from typescript and "tsconfig.json" from frontend/tsconfig.json (in a forked process).

× ｢wdm｣: Error: Cyclic dependency
    at visit (frontend\node_modules\toposort\index.js:35:13)
    at visit (frontend\node_modules\toposort\index.js:53:9)
    at visit (frontend\node_modules\toposort\index.js:53:9)
    at Function.toposort [as array] (frontend\node_modules\toposort\index.js:22:22)
    at Object.module.exports.dependency (frontend\node_modules\html-webpack-plugin\lib\chunksorter.js:50:35)
    at HtmlWebpackPlugin.sortChunks (frontend\node_modules\html-webpack-plugin\index.js:364:35)
    at frontend\node_modules\html-webpack-plugin\index.js:113:21
    at AsyncSeriesHook.eval [as callAsync] (eval at create (frontend\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (frontend\node_modules\tapable\lib\Hook.js:35:21)
    at Compiler.emitAssets (frontend\node_modules\webpack\lib\Compiler.js:307:19)
    at onCompiled (frontend\node_modules\webpack\lib\Watching.js:50:19)
    at hooks.afterCompile.callAsync.err (frontend\node_modules\webpack\lib\Compiler.js:487:14)
    at _err1 (eval at create (frontend\node_modules\tapable\lib\HookCodeFactory.js:37:17), <anonymous>:20:1)
    at frontend\node_modules\awesome-typescript-loader\src\instance.ts:510:16
    at process._tickCallback (internal/process/next_tick.js:103:7)

[at-loader] Checking started in a separate process...

[silbinarywolf]

I was able to resolve build issues by setting chunksSortMode to none for the HtmlWebpackPlugin. Not sure precisely why this works but there you go.

plugins: [
new HtmlWebpackPlugin({
	// This is required or else the build fails for unknown reasons.
	// https://github.com/jantimon/html-webpack-plugin/issues/981#issuecomment-399140618
	chunksSortMode: 'none'
}),
]