I am facing an issue in the implementing $oclazyload to defer loading of my components as shown below
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;
Problem
The code above does not throw any errors and the provider.contoller.js
doesn't load.
provider
component contains following files: provider.js, provider.html, provider.less, provider.component.js, provider.controller.js
PS
Everything works fine without lazyload in provider.js
.config(($stateProvider) => {
"ngInject";
$stateProvider
.state('provider', {
url: '/provider',
component: 'provider'
});
});
Issues
$q
as $ocLazyLoad
returns a promise itself. The code below works by defining a provider-component
and loading it with $stateProvider
.config(($stateProvider, $ocLazyLoadProvider) => {
$ocLazyLoadProvider.config({
modules: [{
name: 'provider-component',
files: ['provider.component.js', 'provider.js', 'provider.html', 'provider.less']
}]
});
$stateProvider
.state('provider', {
url: '/provider',
template: './provider.html',
resolve: {
load: ['$ocLazyLoad', function($ocLazyLoad) {
// will load the predefined configuration
return $ocLazyLoad.load('provider-component');
}]
}
});
});
Documentation to know more about possible configurations.
Hope it helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.