使用 Webpack 延迟加载 Angular 模块答案

【问题标题】：Lazy loading Angular modules with Webpack使用 Webpack 延迟加载 Angular 模块
【发布时间】：2016-10-07 18:02:37
【问题描述】：

我正在尝试让延迟加载的 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
  });

【问题讨论】：

标签： javascript angularjs webpack lazy-loading oclazyload

【解决方案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，这意味着它实际上是在初始化状态。

【讨论】：