Не могу отделить угловые компоненты в угловых 1

Question

Я пытаюсь организовать свой код немного по-другому, чем учебник по маршрутизации компонентов. Я просто хочу, чтобы в моем приложении была эта структура.

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

Я использую Angular 1.5 и эту версию углового маршрутизатора: это работает

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

Так что не уверен почему, но когда я переименую настройки "Компонент" из настроек в applicationSettings это работает просто отлично.

Я пытаюсь организовать свой код немного по-другому, чем учебник по маршрутизации компонентов. Я просто хочу, чтобы в моем приложении была эта структура.

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

Я использую Angular 1.5 и [эту версию][1] углового маршрутизатора: это работает

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