How to load a component with ui-router using Webpack, Components and OclazyLoad
<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>