I'm currently facing challenges while trying to implement lazy-loaded Angular modules with Webpack. Despite seeing the creation of a 1.bundle.js file containing the child app code, I am not observing any request for 1.bundle.js when loading the page, resulting in the failure of the child app initialization. The console.log statement never executes, and it seems that the module initialization by $oclazyload is not triggered at all.
Several aspects leave me perplexed:
1) Is it webpack's responsibility to send the request to the server, or do I need to manually load the second bundle? (Both approaches have been tried without success)
2) If manual loading of bundles is required, what should be the correct order of loading?
3) Despite attempting to control the bundle name via the third argument of require.ensure, the generated bundle always remains named 1.bundle.js regardless of the string passed.
4) Why does stepping through the code within the require.ensure block fail inside the debugger, leading to an undefined result shown in the Chrome source view?
(Code Below)
Main entry point code:
'use strict';
import angular from 'angular';
import 'angular-ui-router';
import 'oclazyload';
angular.module('parentApp', [
'ui.router',
])
.config(['$urlRouterProvider', '$locationProvider', ($urlRouterProvider, $locationProvider) => {
$urlRouterProvider
.otherwise('/');
$locationProvider.html5Mode(true);
}])
.config(['$stateProvider', ($stateProvider) => {
$stateProvider
.state('child-app', {
url: '/child-app',
template: '<child-app></child-app>',
resolve: {
loadAppModule: ($q, $ocLazyLoad) => {
return $q((resolve) => {
require.ensure(['./child-app/app.js'], (require) => {
let module = require('./child-app/app.js');
console.log(module);
$oclazyload.load({name: 'childApp'});
resolve(module.controller);
});
})
}
},
controller: function() {
}
})
}]);
Child app:
'use strict';
import childAppTemplateURL from '../templates/child-app.html';
import childAppController from './controllers/childAppController';
export default angular.module('parentApp.childApp', [])
.component('applicationListApp', {
templateUrl: childAppTemplateURL,
controller: childAppController
});