title: How to load a component with ui-router using Webpack, Components and OclazyLoad
body: <p>I'm currently trying to use OcLazyLoad with angular component and ui-router 1.0.0 and Webpack 1.</p>
  
  <p>But I can't figure out how correctly show the html view using the views object with <code>ui-view="MainView"</code> and <code>ui-view="rightMenuView"</code>.
  Secondly, I would like to load the component directly instead of the templateProvider, controller etc (located in the ui-router). I looked through a lot of tutorials and existing projects, but I didn't find any example for this use case. </p>
  
  <p>Here are some of my code snippets:</p>
  
  <p>webpack.config.js:</p>
  
  <pre><code>.......
  .......
  .......
  module: {
          loaders: [{
              test: /\.json$/,
              exclude: /node_modules/,
              loaders: ["raw-loader"]
          },{
              test: /\.html$/,
              exclude: /node_modules/,
              loader: 'ngtemplate!html'
          },{
              test: /\.(jpe?g|gif|png|svg|woff|woff2|ttf|eot|wav|mp3)$/,
              loader: 'file' // inline base64 URLs for &lt;=10kb images, direct URLs for the rest
          },{
              test: /\.less$/,
              exclude: /node_modules/,
              loaders: ['style', 'css', 'less?sourceMap', 'resolve-url']
          },{
              test: /\.scss$|\.css$/,
              exclude: /node_modules/,
              loaders: ['style', 'css-loader', 'resolve-url', 'sass?sourceMap']
          },{
              test: /\.js$/,
              exclude: /node_modules/,
              loaders: ['ng-annotate?add=true&amp;map=true', 'babel', 'eslint-loader']
          }]
      },
  ......
  ......
  ......
  </code></pre>
  
  <p>Then this is my page1.component.js:</p>
  
  <pre><code>import Page1View from './page1.html';
  import './page1.scss';
  
  class Page1 {
      static detailsComponent() {
          return {
              templateUrl: Page1View,
              controller: function () {
                  this.name = 'Hello Page1';
              }
          };
      }
  }
  
  export default Page1.detailsComponent();
  </code></pre>
  
  <p>Then the module page1.module.js:</p>
  
  <pre><code>import Page1Component from 'components/page1/page1.component';
  const PAGE1MODULE = 'page1';
  
  angular.module(PAGE1MODULE, [])
  .component('page1', Page1Component);
  
  export default PAGE1MODULE;
  </code></pre>
  
  <p>Then this is the config.js (ui-router):</p>
  
  <pre><code>.....
  .....
  $stateProvider
      .state('home', {
          url: '/home',
          views: {
              mainView: {
                  component: 'home'
              },
              rightMenuView: {
                  component: 'rightMenu'
              }
          }
      })
  
      .state('page1', {
          url: '/page1',
          views: {
              mainView: {
                  templateProvider: ($q) =&gt; {
                      return $q((resolve) =&gt; {
                          // lazy load the view
                          require.ensure([], () =&gt; resolve(require("./components/page1/page1.html")));
                      });
                  },
                  controller: function () {
                      this.name = 'Hello Page1';
                  }
              },
              rightMenuView: {
                  templateProvider: ($q) =&gt; {
                      return $q((resolve) =&gt; {
                          // lazy load the view
                          require.ensure([], () =&gt; resolve(require("./components/rightMenu/rightMenu.html")));
                      });
                  }
              }
          },
          resolve: {
              loadPage1Component: ($q, $ocLazyLoad) =&gt; {
                  return $q((resolve) =&gt; {
                      require.ensure([], () =&gt; {
                          // load whole module
                          let module = require('./components/page1/page1.module');
                          $ocLazyLoad.load({name: 'page1'});
                          resolve(module.component);
                      });
                  });
              }
          }
      })
  </code></pre>
  
  <p>As you can see I rewrote without <code>component: 'page1'</code> because I don't know how can I make it if I didn't load the <code>component page1</code>.
  If you see a better way, I listen. 
  The main problem is the template in templateProvider which is not showed. I see only the URL.
  Have I to use the templateCache of angular with a specific way in Webpack ? 
  Thank you in advance. </p>
  
  <p>BTW: This is the view Page1:
  <a href="https://i.stack.imgur.com/0iazY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0iazY.png" alt="enter image description here"></a></p>
  
  <p>And a part of the build of Webpack:</p>
  
  <pre><code>....
  ....
  chunk    {1} 1.bundle.js, 1.bundle.js.map 3.52 kB {0} [rendered]
     [20] ./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./lib/components/page1/page1.scss 196 bytes {1} [built]
     [23] ./lib/components/page1/page1.html 271 bytes {1} {2} [built]
     [83] ./lib/components/page1/page1.component.js 1.39 kB {1} [built]
     [84] ./lib/components/page1/page1.module.js 408 bytes {1} [built]
    [133] ./lib/components/page1/page1.scss 1.25 kB {1} [built]
  chunk    {2} 2.bundle.js, 2.bundle.js.map 271 bytes {0} [rendered]
     [23] ./lib/components/page1/page1.html 271 bytes {1} {2} [built]
  ....
  ....
  </code></pre>
  
  <p>I see the page1.html twice, I don't know how to avoid this, but it seems that it is not blocking I guess.</p>
  
  <p>And to finish, this is my package.json, maybe that can be useful :</p>
  
  <pre><code>  "name": "",
    "version": "",
    "description":"",
    "main": "index.js",
    "scripts": {
      "prod": "rm -rf dist/* &amp;&amp; cross-env NODE_ENV=production webpack --config webpack.prod.config.js",
      "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.dev.config.js"
    },
    "dependencies": {
      "angular": "1.5.8",
      "angular-animate": "1.5.8",
      "angular-bootstrap-material": "0.1.4",
      "angular-loading-bar": "0.9.0",
      "angular-messages": "1.5.8",
      "angular-sanitize": "1.5.8",
      "angular-translate": "2.12.1",
      "angular-translate-loader-static-files": "2.12.1",
      "angular-ui-bootstrap": "2.2.0",
      "angular-ui-router": "1.0.0-beta.2",
      "angular-ui-router-anim-in-out": "1.0.2",
      "bootstrap": "3.3.7",
      "bootstrap-material-design": "0.5.10",
      "bootstrap-material-design-icons": "2.2.0",
      "cross-env": "3.1.3",
      "http-server": "0.9.0",
      "oclazyload": "^1.0.9",
      "rx": "4.1.0",
      "rx-angular": "1.1.3"
    },
    "devDependencies": {
      "angular-mocks": "1.5.8",
      "autoprefixer": "6.5.1",
      "babel-core": "6.17.0",
      "babel-loader": "6.2.5",
      "babel-plugin-transform-runtime": "6.15.0",
      "babel-polyfill": "6.16.0",
      "babel-preset-es2015": "6.16.0",
      "babel-runtime": "6.11.6",
      "css-loader": "0.25.0",
      "eslint": "3.8.1",
      "eslint-config-xo": "0.17.0",
      "eslint-loader": "1.6.0",
      "extract-text-webpack-plugin": "1.0.1",
      "file-loader": "0.9.0",
      "html-loader": "0.4.4",
      "html-webpack-plugin": "2.24.0",
      "image-webpack-loader": "3.0.0",
      "imagemin-webpack-plugin": "1.2.1",
      "isparta-loader": "2.0.0",
      "jasmine-core": "2.5.2",
      "karma": "1.3.0",
      "karma-coverage": "1.1.1",
      "karma-jasmine": "1.0.2",
      "karma-phantomjs-launcher": "1.0.2",
      "karma-sourcemap-loader": "0.3.7",
      "karma-spec-reporter": "0.0.26",
      "karma-webpack": "1.8.0",
      "less": "2.7.1",
      "less-loader": "2.2.3",
      "ng-annotate-loader": "0.2.0",
      "ng-annotate-webpack-plugin": "0.1.3",
      "ngtemplate-loader": "1.3.1",
      "node-sass": "3.10.1",
      "optimize-css-assets-webpack-plugin": "1.3.0",
      "path": "0.12.7",
      "postcss-loader": "1.0.0",
      "progress-bar-webpack-plugin": "1.9.0",
      "protractor": "4.0.9",
      "raw-loader": "0.5.1",
      "resolve-url-loader": "1.6.0",
      "sass-lint": "1.9.1",
      "sass-loader": "4.0.2",
      "sasslint-webpack-plugin": "1.0.4",
      "style-loader": "0.13.1",
      "url-loader": "0.5.7",
      "watch-ignore-webpack-plugin": "1.0.0",
      "webpack": "1.13.2",
      "webpack-dev-server": "1.16.2"
    }
  }
  </code></pre>