AngularJS : child state return parent view

Question

I'm using angularJs with ES6. Therefor each view are modules.

Module project :

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

Module alerts (its state is a child of project state) :

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

.config(($stateProvider) => {

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

})

.component('alerts', alertsComponent);

All views are managed by the components and displayed from the defined template attribute in its related state.

<alerts></alerts>

Components are defined as such :

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;

View is called that way :

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

Or that way if i'm already in project :

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

Both href are correctly displaying :

/projects/github/btribouillet/btproject/alerts

But i'm seing the the parent view :

<project></project>

While it should be :

<alerts></alerts>

What am i doing wrong? The solution until now was to have independent state from each others. But i'm trying to build a breadcrumb module and i'd like to be able to access to parent states. If states are independent from each others, this is not possible.

Update:

My main view is 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

You forgot to put a ui-view directive in your "project" component html, so child state have no place to load in.