title: Angular ui-router's nested routes not working in ES6 with bable?
body: <p>I have multiple modules in Angular and I also use nested routes. There is an <code>auth</code> module which also has a sub route <code>auth.login</code> the code goes as follows:-</p>
  
  <p><strong>Login.route.js</strong></p>
  
  <pre><code>routes.$inject = ['$stateProvider'];
  
  export default function routes($stateProvider) {
      $stateProvider
          .state('auth.login', {
              url: '/login',
              template: require('./login.tpl.html')
          });
  }
  </code></pre>
  
  <p><strong>auth.route.js</strong></p>
  
  <pre><code>routes.$inject = ['$stateProvider'];
  
  export default function routes($stateProvider) {
      $stateProvider
          .state('auth', {
              url: '/auth',
              template: require('./auth.tpl.html')
          })
  }
  </code></pre>
  
  <p>Then inject these into the main module like this according to the folder structure.</p>
  
  <pre><code>import auth from './features/auth';
  import auth from './features/auth/login';
  </code></pre>
  
  <p>I am not getting any error but apart from the <code>/</code> &amp; <code>/auth</code> path nothing reflects. If I use <code>/login</code> it redirects me to the <code>/</code> path.</p>
  
  <p>Kinda weird but UI-Router is not working. Please suggest.</p>
  
  <p><strong>NOTE: I use BableJS and Webpack for the Development</strong></p>