Load resources in angular with oclazyload and webpack - angularjs

Question

I have a modular app who have multiple vendor plugins and I need to load only necessary in every view.
This is my routes:
(function() {
'use strict';
angular.module('app.empresas').config(config);
function config($stateProvider, $ocLazyLoadProvider) {
$stateProvider
.state('app.empresas', {
url: '/empresas?Filter',
views: {
'main#': {
template: require('./empresas/empresas.html'),
controller: "AppController as App"
}
},
Params: {
title: 'Empresas',
bodyClass: '',
requiredLogin: true
}
})
.state('app.empresas.view', {
url: '/empresas/:ItemId',
views: {
'main#': {
template: require('./empresas.view/empresas.view.html'),
controller: "AppController as App"
}
},
Params: {
title: 'Empresa',
bodyClass: '',
requiredLogin: true
}
})
}
})();
I know how to include oclazyload resources without webpack, but now I need to include specific resources for every view. ¿How can do this?

Answer 1

I solved it using this snippet:
This is a sample of a state
.state('app.empresas.view', {
url: '/empresas/:ItemId',
views: {
'main#': {
templateUrl: '/app/main/apps/empresas/empresas.view/empresas.view.html',
controller: "AppController as App"
}
},
Params: {
title: 'Empresa',
bodyClass: '',
requiredLogin: true
},
resolve: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
var deferred = $q.defer();
var mod = importAll(require.context('./empresas.view/', true, /\.*$/));
$ocLazyLoad.load({
name: 'app.empresas.view'
});
deferred.resolve(mod);
return deferred.promise;
}]
})
I use this function with require to load entire folder with oclazyload and compile with webpack in a bundle separate file:
function importAll (r) {r.keys().forEach(r);}
I can load css, html, js files in one view without require files one by one