使用Ionic-app-scripts（webpack）的Angular AOT延迟加载模块

Question

我们正在尝试使用ionic-app-scripts来构建来自相同代码库的角度（4）和离子（3）应用程序。我们遇到一个问题，即生产构建不适用于角度（使用带有延迟加载组件的角度路由器）。

有没有人成功地将AOT webpack加载器与ionic-app-scripts集成在一起？我们正在尝试使用ng-router-loader并将其添加到加载器链中，但是如果加载器在ng-router-loader的加载器链上太远，我们要么得到运行时编译器不存在错误或webpack构建错误index.js 29:14

Module build failed: TypeError: this.call is not a function 

Answer 1

据我所知，没有默认提供从角度路由加载延迟功能模块。仅适用于离子页面。

我们还在离子3应用程序中使用angular（5）路由和嵌套的功能模块，这些模块应该是延迟加载的。但这不适用于默认的ionic-app-scripts配置，我们认为深入挖掘它太费时间了。

由于离子4它们将仅使用离子-cli而没有所有离子-app-scripts配置。因为我建议等待离子4并稍后升级并坚持使用完整的捆绑（没有延迟加载但是使用缩小和AOT）就像我们一样。

为了使我们能够分离我们的功能模块，我们必须从功能模块中导出路由并合并它们，如下所示：

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: DashboardRoutingRouteNames.Dashboard,
                component: DashboardComponent,
                children: [
                    {
                        path: '',
                        redirectTo: DashboardRoutingRouteNames.Overview,
                        pathMatch: 'full'
                    },
                    /**
                     * This is a workaround because AOT is not working correct with ionic 3 (default ionic-app-scripts configuration) and lazy loaded feature modules of angular.
                     */
                    dashboardOverviewRoutes,
                    dashboardAccountRoutes
                ]
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})
export class DashboardRoutingModule {
}

export const dashboardAccountRoutes: Route = {
    path: DashboardRoutingRouteNames.Account,
    children: [
        {
            path: '',
            component: AccountComponent
        }
    ]
};