2

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

1 回答 1

2

该问题与实施无关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，这意味着它实际上是在初始化状态。

于 2016-10-10T20:53:01.850 回答