Мне нужна помощь по сборке AOT с Lazy Loaded модулей в Angular 4. Чанк генерируется как: fw-wrapper.module.chunk.js, но не может найти и выдает ошибку.
У меня есть следующие файлы:
app.routing.module.ts
const appRoutes: Routes = [
{ path: 'web/org/financialwellbeing', loadChildren: './wrappers/fw-wrapper.module#FWWrapperModule', pathMatch: 'full', canActivate: [AuthGuard] },
]
Ленивая загрузка работает, когда я создаю приложение angular 4, используя следующую команду (без флага AOT или PROD):
node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --output-hashing none --nc
Но он НЕ работает с приведенной ниже командой (с флагом --prod и --aot):
node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --prod --aot --output-hashing none --nc
Когда я помещаю сгенерированную папку dist в любой статический сервер и запускаю,первая версия папки DIST правильно работает с отложенной загрузкой.Но папка dist, сгенерированная вторым способом, выбрасывает и выдает ошибку:
vendor.bundle.js:1 ERROR Error: Uncaught (in promise): Error: Cannot find module 'app/wrappers/fw-wrapper.module'.
Error: Cannot find module 'app/wrappers/fw-wrapper.module'.
Когда я проверял main.bundle.js , сгенерированный с использованием флага --prod --aot, разница заключается в том, чтоссылается на файл fw-wrapper.module.ngfactory):
gFIY: function(e, t, o) {
function webpackAsyncContext(e) {
var t = n[e];
return t ? o.e(t[1]).then(function() {
return o(t[0])
}) : Promise.reject(new Error("Cannot find module '" + e + "'."))
}
var n = {
"./wrappers/fw-wrapper.module.ngfactory": ["FcIW", "fw-wrapper.module"]
};
webpackAsyncContext.keys = function() {
return Object.keys(n)
}
,
e.exports = webpackAsyncContext,
webpackAsyncContext.id = "gFIY"
}
Пока без --prod и --aot flag main.bundle.js содержит (это работает, пожалуйста, игнорируйте путь):
var map = {
"app/wrappers/fw-wrapper.module": [
"../../../../../src/app/wrappers/fw-wrapper.module.ts",
"fw-wrapper.module"
]
};
function webpackAsyncContext(req) {
var ids = map[req];
if(!ids)
return Promise.reject(new Error("Cannot find module '" + req + "'."));
return __webpack_require__.e(ids[1]).then(function() {
return __webpack_require__(ids[0]);
});
};
webpackAsyncContext.keys = function webpackAsyncContextKeys() {
return Object.keys(map);
};
module.exports = webpackAsyncContext;
webpackAsyncContext.id = "../../../../../src lazy recursive";
Структура папки для приложения:
src
|- app
|- app.routing.module.ts
|- wrappers ( folder )
| - fw-wrapper.module.ts
Папка / файлы, созданные в Dist:
Может кто-нибудь, пожалуйста, помогите мне в этом.
Пожалуйста, дайте мне знать, если требуется дополнительная информация в этом.
Спасибо, Jignesh Raval