I am currently encountering an issue with the implementation of $oclazyload to defer loading of my components. The code snippet below illustrates the setup:
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import providerComponent from './provider.component';
let providerModule = angular.module('provider', [
//uiRouter
])
.config(($stateProvider, $compileProvider) => {
"ngInject";
$stateProvider
.state('provider', {
url: '/provider',
template: require('./provider.html'),
resolve: {
deps: ($q, $ocLazyLoad) => {
"ngInject";
var deferred = $q.defer();
require.ensure([], function() {
let component = require('./provider.component').default;
$ocLazyLoad.inject([])
.then(() => $compileProvider.component('provider', component))
.then(deferred.resolve);
}, 'provider');
return deferred.promise;
}
}
});
}).name;
export default apiListModule;
Issue
The code above does not produce any errors, however, the provider.contoller.js fails to load.
The provider component is comprised of the following files: provider.js, provider.html, provider.less, provider.component.js, provider.controller.js
PS
Everything functions correctly without lazyloading in provider.js
.config(($stateProvider) => {
"ngInject";
$stateProvider
.state('provider', {
url: '/provider',
component: 'provider'
});
});