I'm trying to organize my code a bit differently than the tutorial for component routing. Quite simply I want to my app to have this structure.

app.js
-components/
 +-settings/
  +-settings.js
  +-general/
   +-generalSettings.js

I'm using Angular 1.5 and this version of angular router: this works

app.js

'use strict';
angular.module('admin', [ 'ngComponentRouter', 'settings' ])

  .config(function($locationProvider) {
    $locationProvider.html5Mode(true);
  })

  .value('$routerRootComponent', 'admin')

  .component('admin', {
    templateUrl: 'scripts/app.html',
    $routeConfig: [
        {path: '/settings/...', name: 'Settings', component: 'settings', useAsDefault: true}
    ]
  })

settings.js

angular.module('settings', [])
    .component('settings', {
        template: '<h1>settings</h1><ng-outlet></ng-outlet>',
        $routeConfig: [
            {path: '/general', name: 'GeneralSettings', component: 'generalSettings', useAsDefault: true}
        ]
    })
    .component('generalSettings', {
        template: '<h2>General</h2>',
        controller: GeneralSettingsCtrl,
    })

function GeneralSettingsCtrl(){
}

However, when I attempt to remove the general settings component from the settings.js file I get the error Cannot read property '$routerOnActivate' of undefined.

I suspect it is how I am either defining/injecting the dependencies or maybe I need to have an individual module definition for generalSettings (defining its own module 'generalSettings' and injecting it seems to work, i'm not convinced this is the best option tho). Pretty much boils down to I'm not sure the best way to do it. really not trying to have every single nested component in one file. Please advice, thank you!