2

遅延ロードされた Angular モジュールを Webpack で動作させようとしていますが、いくつか問題があります。1.bundle.js子アプリのコードを含む作成が表示されるため、Webpack は分割ポイントを正しく生成しているように見え1.bundle.jsますが、ページを読み込むときの要求は表示されず、子アプリは初期化されません。決して発火しているようには見えず、モジュールを初期化するconsole.logポイントに到達しているようにも見えません。$oclazyload

私が混乱しているいくつかのポイントがあります。

1) webpack はサーバーにリクエストを送信しますか、それとも 2 番目のバンドルを手動でロードする必要がありますか? （私は両方を試しましたが、どちらも機能しません）

2) バンドルを手動でロードする必要がある場合、どの順序でロードする必要がありますか?

3) の 3 番目の引数では、バンドルの名前を制御できるようになっていると思われますが、渡した文字列に関係なくrequire.ensureバンドルに名前が付けられます。1.bundle.js

require.ensure4)デバッガーでブロック内のコードをステップスルーできないのはなぜですか? そうすると、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'
])

私自身の 2 つの質問に答えるために、Webpack は実際にサーバーにバンドルを要求します。手動でバンドルをロードする必要はありません。私を本当に混乱させた 1 つの落とし穴:resolve解決されない promise が含まれている場合、ブロックは黙って失敗します。私の場合$ocLazyLoad.load()は失敗していましたが、失敗の兆候はありませんでした。唯一の手がかりは、状態プロバイダーが<child-app></child-app>マークアップを DOM に追加していないことでした。これは、状態を実際に初期化していたことを意味します。

于 2016-10-10T20:53:01.850 に答える