使用 Webpack 延迟加载 Angular 个模块

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 个模块

Lazy loading Angular modules with Webpack

javascript

angularjs

webpack

lazy-loading

oclazyload