javascript - AngularJS : 子状態が親ビューを返す

Question

私はES6でangularJsを使用しています。したがって、各ビューはモジュールです。

モジュール プロジェクト :

let projectModule = angular.module('project', [
  uiRouter
])

.config(function($stateProvider, $urlMatcherFactoryProvider) {

  $stateProvider
    .state('project', {
      url: '/projects/:origin/:owner/:name',
      template: '<project></project>',
      data : { pageTitle: 'Project' },
    });

})

.component('project', projectComponent)

.factory('$projectResource', service);

モジュール アラート (その状態はプロジェクト状態の子です) :

let alertsModule = angular.module('alerts', [
  uiRouter
])

.config(($stateProvider) => {

  $stateProvider
    .state('project.alerts', {
      url: '/alerts',
      template: '<alerts></alerts>',
      data : { pageTitle: 'Alerts' }
    });

})

.component('alerts', alertsComponent);

すべてのビューはコンポーネントによって管理され、関連する状態で定義されたテンプレート属性から表示されます。

<alerts></alerts>

コンポーネントは次のように定義されます。

import template from './alerts.html';
import controller from './alerts.controller';
import './alerts.scss';

let alertsComponent = {

  restrict: 'E',
  template: template,
  controller: controller,
  controllerAs: 'vm',
  bindings: true

};

export default alertsComponent;

ビューはそのように呼び出されます:

<a ui-sref="project.alerts({ origin: project.origin, owner: project.owner.name, name: project.name })">Alerts</a>

または、私がすでにプロジェクトに参加している場合:

<a ui-sref="project.alerts">Alerts</a>

両方の href が正しく表示されています:

/projects/github/btribouillet/btproject/alerts

しかし、私は親ビューを見ています:

<project></project>

それはあるべきですが：

<alerts></alerts>

私は何を間違っていますか？これまでの解決策は、互いに独立した状態を持つことでした。しかし、私はブレッドクラム モジュールを構築しようとしており、親状態にアクセスできるようにしたいと考えています。状態が互いに独立している場合、これは不可能です。

アップデート：

私の主なビューは app.html です:

<!-- Place all UI elements intended to be present across all routes in this file -->
<div class="site-wrapper">
  <navbar></navbar>
  <div class="view" ui-view></div>
  <navfooter></navfooter>
</div>