angular ui router: component $onInit fires twice on route change
<p>I am using angular-ui-router 0.2.18 with angular 1.5.x. I cannot explain why my component $onInit fires twice (I do not think it is relevant to my problem, but I am also using webpack). </p>

<p>My routing:</p>

<pre><code>myModule.config(function ($stateProvider) {

    $stateProvider
    .state('app.project', {
        abstract: true,
        url: '/project',
        template: '&lt;ui-view/&gt;'
    })

    .state('app.project.demo', {
        url: '/demo',
        template: '&lt;my-component&gt;&lt;/my-component&gt;'
    });

});
</code></pre>

<p>A barebone version of my component:</p>

<pre><code>myModule.component('myComponent', {
    template: require('./my-component.html'),
    bindings: {},
    controller: function () {

        this.alert = function () {
            console.log("fires");
        };

        this.$onInit = function () {
            this.alert();
        };

    }
});
</code></pre>

<p>Somewhere in my application, the route change is triggered by <code>&lt;a ui-sref="app.project.demo"&gt;&lt;/a&gt;</code>.</p>

<p>The <code>alert</code> function fires twice when I click the link, but not when I reload the page. Maybe the controller is loaded twice on route change ?</p>

<p>I have tried everything listed on this <a href="https://stackoverflow.com/questions/15535336/combating-angularjs-executing-controller-twice">SO question: combating-angularjs-executing-controller-twice</a>, but without success.</p>

<p>What really puzzles me though, is that the issue disappears when I rename my state name without changing anything else:</p>

<ul>
<li><code>'app.project.demos'</code> works</li>
<li><code>'app.projects.demo'</code> works too (after changing <code>'app.project'</code> to <code>'app.projects'</code>of course)</li>
</ul>

<p>What could be the explanation ?</p>