2
게으른 로딩 된 앵귤러 모듈을 Webpack에서 작동 시키려고하는데 어려움이 있습니다. Webpack은 자식 응용 프로그램에 대한 코드가 포함 된 1.bundle.js이 생성되는 것을 볼 수 있기 때문에 분리 점을 올바르게 생성하는 것으로 보입니다.하지만 페이지를로드 할 때 1.bundle.js에 대한 요청이 보이지 않고 자식 응용 프로그램이 초기화되지 않습니다. console.log은 결코 발사되는 것처럼 보이지 않으며 심지어 $oclazyload이 모듈을 초기화하는 지점까지 보이지 않습니다.게으름 로딩 Webpack으로 각도 모듈
내가 혼란스러워하는 점이 몇 가지 있습니다.
1) webpack이 서버에 요청을 보내거나 수동으로 두 번째 번들을로드해야합니까? (나는 둘 다 시도해 보았지만 어느 것도 작동하지 않았다.)
2) 번들을 수동으로로드해야한다면, 순서대로로드해야합니까?
3) require.ensure의 세 번째 인수는 아마도 번들의 이름을 제어 할 수 있지만, 번들의 이름은 내가 통과 한 문자열에 관계없이 1.bundle.js입니다.
4) 왜 디버거의 require.ensure 블록 안에있는 코드를 단계별로 실행할 수 없습니까? 내가 이렇게하면 나는 크롬의 소스보기에서이보고 결국 :
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
});