title: Dynamic load component on route navigate angular 1.5 & UI route 1
body: <p>Hi I am trying to load a component on route navigation . The reason is the html page of component is more than 1 mb . If i load on load it slows down UI , I only want to load that component once user click on particular route</p>
  
  <p>Any Example will help . You can check below code i am trying . Let me know the fix .</p>
  
  <p><em>aboutus-component.js</em></p>
  
  <pre><code>import AboutUsCtrl from './aboutus-controller'
  export const AboutUsComponent = {
      controllerAs : 'vm',
      controller:AboutUsCtrl,
      templateUrl: './aboutus.html'
  }
  </code></pre>
  
  <p><em>aboutus-module.js</em> </p>
  
  <pre><code>import angular from 'angular'
  import {AboutUsComponent} from './aboutus-component.js'
  (function(){
    angular.module('analyzerApp')
    .component('aboutus',AboutUsComponent)
    .name
  })();
  </code></pre>
  
  <p>Now on click on aboutus tab</p>
  
  <pre><code>import(/* webpackChunkName: 'aboutus' */'../app/aboutus-main.js').then(() =&gt; {
  
              setTimeout(()=&gt;{
                $state.go('aboutus', { reload: false });
              },2000)
  
              //window.location.href="#/aboutus"
  
          })
  </code></pre>
  
  <p>aboutus-main.js</p>
  
  <pre><code>importModules(
    require.context('./', true, /^(.*(aboutus)\.js)((?!.*\.(js\.*))$)/i)
  );
  
  /**
   * Dynamically imports modules
   * @param request
   */
  function importModules(request){
    request.keys().forEach(request);
  }
  </code></pre>
  
  <p>Getting this error</p>
  
  <pre><code>angular-ui-router.js:3251 Uncaught Error: Could not resolve 'aboutus' from state 'home'
      at Object.transitionTo (angular-ui-router.js:3251)
      at Object.$state.transitionTo (ct-ui-router-extras.js:201)
      at Object.$state.transitionTo (ct-ui-router-extras.js:1599)
      at Object.$state.transitionTo (ct-ui-router-extras.js:1084)
      at Object.go (angular-ui-router.js:3179)
      at ni-footer.js:38
  </code></pre>