Question

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

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

if ("SEND" in [message]) {
   grok {
      // do your grok here
   }
}

Answer 1

据我所知，没有提供默认设置以通过角度布线从中加载懒散特征模块。仅适用于离子页面。

我们还在带有嵌套特征模块的ionic 3应用程序中使用角（5）路线，这些特征模块应该延迟加载。但这不适用于默认的ionic-app-scripts配置，因此我们认为深入研究该配置非常耗时。

由于离子4，他们将只使用ionic-cli，而不使用所有ionic-app-scripts配置。因此，我建议像我们一样，等待ionic 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
        }
    ]
};

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

1 个答案: