Question

我试图使用延迟加载的Angular模块与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，这意味着它实际上正在初始化状态。

使用Webpack延迟加载Angular模块

1 个答案: