AOT Prod build: lazy loading does not work. Angular 4.2 + Error: Cannot find module

Question

I need help regarding AOT build with Lazy Loaded modules in Angular 4. Chunk is generated like : fw-wrapper.module.chunk.js, but can not find and throws error.

I have following files:

app.routing.module.ts

const appRoutes: Routes = [
{ path: 'web/org/financialwellbeing', loadChildren: './wrappers/fw-wrapper.module#FWWrapperModule', pathMatch: 'full', canActivate: [AuthGuard] },
]

Lazy loading works when I build angular 4 app using following command ( no AOT or PROD flag) :

node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build  --output-hashing none --nc

But it does NOt work with below command ( With --prod and --aot flag ):

node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --prod --aot --output-hashing none --nc

When I put generated dist folder in any static server and runs, the first version of DIST folder works properly with Lazy loading. But dist folder generated using second way, throws and error:

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

When I inspected main.bundle.js generated using --prod --aot flag, the difference is ( it refers to fw-wrapper.module.ngfactory file ):

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

While without --prod and --aot flag main.bundle.js contains ( this works, please ignore 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";

Folder strucuture for APP:

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

Folder/Files generated in Dist:

Can any one please help me in this.

Please let me know if more information is required in this.

Thanks, Jignesh Raval