Lazy loading Угловые модули с Webpack

Question

Я пытаюсь получить ленивые загруженные угловые модули, работающие с Webpack, но у меня есть некоторые трудности. Кажется, что Webpack генерирует точку разделения правильно, потому что я вижу созданный 1.bundle.js код, который содержит код для дочернего приложения, но я не вижу никакого запроса для 1.bundle.js при загрузке страницы, а дочернее приложение не инициализируется. console.log никогда не срабатывает, и, похоже, он даже не доходит до точки, где $oclazyload будет инициализировать модуль.

Есть несколько моментов, когда я смущен.

1) Будет ли webpack делать запрос на сервер, или мне нужно загрузить второй пакет вручную? (Я пробовал и то, и другое)

2) Если мне нужно загрузить пучки вручную, в каком порядке они должны быть загружены?

3) Третий аргумент require.ensure предположительно позволяет вам управлять именем пакета, но пучок имеет имя 1.bundle.js независимо от того, какую строку я передаю.

4) Почему я не могу выполнить код внутри блока require.ensure в отладчике? Когда я делаю, так что я в конечном итоге смотреть на это с точки зрения источника Chrome:

undefined 


/** WEBPACK FOOTER ** 
** 
**/ 

(код ниже)

Основной код точки входа:

'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() { 
     } 
     }) 
    }]); 

Ребенок приложение:

'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 
    }); 

Answer 1

Проблема не связана с реализацией require.ensure. Это было вызвано какой-то странностью на пути ocLazyLoad упакован (https://github.com/ocombe/ocLazyLoad/issues/179). Исправление в моем случае было простым, я только добавил 'oc.lazyLoad' к зависимостям модулей.

angular.module('parentApp', [ 
    'ui.router', 
    'oc.lazyLoad' 
]) 

Чтобы ответить на два моих собственных вопросов, Webpack действительно делает запрос на сервер для связки, и вам не придется вручную загрузить пакет. Один из них, который меня действительно смутил: блок resolve не работает, если он содержит обещание, которое не будет разрешено. В моем случае $ocLazyLoad.load() терпел неудачу, но не было признаков сбоя. Единственная подсказка заключалась в том, что государственный провайдер не добавлял разметку <child-app></child-app> в DOM, а это означало, что она фактически инициализировала состояние.