I am using oclazyLoad with webpack to support lazy loading for Angularjs based single page application. It works very good when files are not in compressed. However when I run webpack Profileion build then all files are minified which is great but my application stops working. Router is not able to load. Following is code sample.
Main App.js as entry file:
/* App.js */
// you need these two lines so that webpack can fetch the chunked bundles from the proper path
// or else it'll try to get them as a root relative path
if (location.protocol === 'https:') {
__webpack_public_path__ = 'https://' + window.location.host + '/js/';
} else {
__webpack_public_path__ = 'http://' + window.location.host + '/js/';
}
var angular = require("angular");
require("angular-ui-router");
require("angular-resource");
require("angular-sanitize");
require("oclazyLoad");
require("./../../../utilities/JavascriptExtension");
var Routers = require("./routers/Routers");
require('./Main');
//Get Angular Project module
var app = angular.module("MyApp", ['ngResource', 'ui.router', 'ngSanitize', 'MyApp.main', 'oc.lazyLoad']);
//Add client side routers
app.config(Routers.routes);
//Enable html5 mode
app.config(Routers.html5mode);
//Add onscroll event
//app.run(Routers.onscroll);
Router File:
'use strict';
/* Routers.js */
module.exports = {
routes: ['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
//Set the default route
$urlRouterProvider.otherwise('/myapp/see-all-business-credit-cards');
//Define routes for view (Please make sure the most matched pattern is define at top)
$stateProvider
.state('viewallcards', {
url: '/myapp/see-all-business-credit-cards/:eep',
params: {
eep: {squash: true, value: null}
},
templateProvider: ['$q', function ($q) {
var deferred = $q.defer();
// note that the file name needs to be repeated in the require.ensure([...]) block
// if you're going to use the uglifyJS plugin. It breaks otherwise.
require.ensure(['html!./../../../templates/partials/AllProfile.html'], function (require) {
var template = require('html!./../../../templates/partials/AllProfile.html');
deferred.resolve(template);
});
return deferred.promise;
}],
controller: 'AllProfileController',
resolve: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
var deferred = $q.defer();
require.ensure([], function () {
var mod = require('./../AllProfiles');
$ocLazyLoad.load({
name: 'MyApp.allProfiles'
});
deferred.resolve(mod.controller);
});
return deferred.promise;
}]
})
.state('Profilepage', {
url: '/myapp/:ProfileKey/:eep',
params: {
eep: {squash: true, value: null}
},
templateProvider: ['$q', function ($q) {
var deferred = $q.defer();
// note that the file name needs to be repeated in the require.ensure([...]) block
// if you're going to use the uglifyJS plugin. It breaks otherwise.
require.ensure(['html!./../../../templates/partials/ProfilePageView.html'], function (require) {
var template = require('html!./../../../templates//Profilepage/ProfilePageView.html');
deferred.resolve(template);
});
return deferred.promise;
}],
controller: 'ProfilePageViewController',
resolve: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
var deferred = $q.defer();
require.ensure([], function () {
var mod = require('./../ProfilePage');
$ocLazyLoad.load({
name: 'MyApp.Profilepage'
});
deferred.resolve(mod.controller);
});
return deferred.promise;
}]
});
}],
html5mode: ["$locationProvider", function ($locationProvider) {
$locationProvider.html5Mode(true);
}]
};
Following is webpack.config.js
var webpackConfig = {
context: __dirname + '/application/client-src/js/application',
entry: './App.js',
output: {
path: __dirname + '/application/public/js',
filename: 'open-site.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin()
],
module: {
loaders: [
{test: /\.css$/, loader: "style!css"},
{test: /\.png$/, loader: "url-loader?limit=1000000&mimetype=image/png"},
{test: /\.jpg$/, loader: "url-loader?limit=1000000&mimetype=image/jpg"}
]
}
};
Please help