AngularJS: родительское представление возврата дочернего состояния

Question

Я использую AngularJs с ES6. Для каждого вида есть модули.

Модульный проект:

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 правильно отображают:

/ проекты / GitHub / btribouillet / btproject / оповещения

Но я вижу родительский взгляд:

<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>

Answer 1

Вы забыли поместить директиву ui-view в html компонента проекта, поэтому дочернему состоянию некуда загружаться.