无法分离角度 1 中的角度分量

Question

我试图用与组件路由教程不同的方式来组织代码。很简单，我希望我的应用程序具有这种结构。

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

我使用的是Angular 1.5和这个版本的Angular路由器：这很有效

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(){
}

然而，当我试图从settings.js文件中删除常规设置组件时，我得到了错误Cannot read property '$routerOnActivate' of undefined。

我怀疑这就是我定义/注入依赖项的方式，或者我可能需要为generalSettings定义一个单独的模块（定义自己的模块"generalSettings"并注入它似乎有效，我不相信这是最好的选择）。归根结底，我不确定最好的方法。真的不想把每个嵌套组件都放在一个文件里。请给我建议，谢谢！

Answer 1

所以不确定为什么，但当我将设置"Component"从设置重命名为applicationSettings时，它工作得很好。

我试图用与组件布线教程不同的方式来组织我的代码。很简单，我希望我的应用程序具有这种结构。

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

我正在使用Angular 1.5和[此版本][1]的Angular路由器：这很有效

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: [
        //-----------------> changed the component name
        {path: '/settings/...', name: 'Settings', component: 'applicationSettings', useAsDefault: true}
    ]
  })

settings.js

angular.module('settings', [])
    // ----------------------------------> changed component name to application settings
    .component('applicationSettings', {
        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(){
}