AOT产品构建：延迟加载不起作用。 Angular 4.2 +错误：找不到模块

Question

我需要有关在Angular 4中使用延迟加载模块进行AOT构建的帮助。生成块的方式类似于：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] },
]

当我使用以下命令（没有AOT或PROD标志）构建angular 4应用时，延迟加载有效：

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'.

当我检查使用--prod --aot标志生成的 main.bundle.js 时，区别是（它指向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标志main.bundle.js包含（此方法有效，请忽略path）：

    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";

APP的文件夹结构：

src
|- app
    |- app.routing.module.ts
    |- wrappers ( folder )
        | - fw-wrapper.module.ts

在Dist中生成的文件夹/文件：

有人可以帮我吗？

如果需要更多信息，请告诉我。

谢谢， 吉涅什·拉瓦尔（Jignesh Raval）

Answer 1

我相信您在生成构建命令时没有此文件夹

Error: Cannot find module 'app/wrappers/fw-wrapper.module'.

我看到您的dist文件夹中没有app文件夹。尝试检查您如何生成代码