angular2-routing - 使用 AOT 和 Rollup 的 Angular 2 子模块路由

Question

在 Angular 2 中配置子模块以使其在 AOT 和汇总后工作的正确方法是什么？我不关心延迟加载并且很乐意将所有子模块捆绑在一起，但是 loadChildren是引用子模块并让它使用正确的 <router-outlet> 的最干净的方式，虽然我尝试了各种方法，但没有一种方法既适用于开发又适用于生产。

我按照 AOT cookbook 中的说明进行操作准备我的应用程序进行部署。我的模块结构是 root > account > admin，我希望 admin 路由加载到 account 组件定义的导出中。

这是帐户模块的路由器配置:

import { NgModule } from '@angular/core';
import { AdminModule }   from './admin/admin.module';

const accountRoutes: Routes = [{
    path: 'account',
    component: AccountComponent,
    children: [
        { path: 'setup', component: SetupComponent },
        { path: 'admin', loadChildren: () => AdminModule }
    ]
}];

这在开发中有效，但 NGC 编译失败并显示 Error: Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'accountRoutes'.

我添加了一个导出到 accountRoutes但这也无法用 Error: Error encountered resolving symbol values statically. Function calls are not supported. 编译.

一个建议是使用字符串而不是函数，以便 NGC 可以编译代码:

loadChildren: 'app/account/admin/admin.module#AdminModule'

这在开发中有效并成功编译，但编译后的应用程序将无法运行，因为 SystemJS 不可用。错误是:

ERROR Error: Uncaught (in promise): TypeError: System.import is not a function
TypeError: System.import is not a function
at t.loadFactory (build.js:6)
at t.load (build.js:6)
at t.loadModuleFactory (build.js:12)

我尝试在生产构建中包含 SystemJS，但找不到单独的模块文件 app/account/admin/admin.module.ngfactory - 汇总后所有内容都在一个 build.js 中。可能有一种方法可以让单独的汇总构建每个子模块，但这需要大量工作。

我找到了引用导出函数的建议:

export function loadAdminModule() {
    return AdminModule;
}

loadChildren: loadAdminModule

这在开发中有效，但在生产中运行时编译器不可用，因此它记录 build.js:1 ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded .

可以修改辅助函数，使其在生产环境中通过引用 NgFactory 而工作，但这在开发环境中不起作用。

import { AdminModuleNgFactory }   from '../../../aot/src/app/account/admin/admin.module.ngfactory';

export function loadAdminModule() {
    return AdminModuleNgFactory;
}

loadChildren: loadAdminModule

是否有支持的方式使用 loadChildren以便它可以按照 AOT 食谱中的说明使用？是不是改用 webpack 更好？

Answer 1

对于遇到相同问题的任何人，这是我正在使用的临时解决方法。希望很快会出现更好的答案。

我现在在专用文件 submodules.ts 中定义我的子模块。我有这个文件的两个版本，submodules-jit.ts 用于开发，submodules-aot.ts 用于 AOT/rollup 部署到生产。我 gitignore submodules.ts 并已将命令添加到我的 npm start 和 npm build:aot 脚本中以替换正确的脚本。

// submodules-jit.ts
import { AdminModule } from './account/admin/admin.module'
export function adminModule(): any { return AdminModule; }

// submodules-aot.ts
import { AdminModuleNgFactory } from '../../aot/src/app/account/admin/admin.module.ngfactory'
import { AdminModule } from './account/admin/admin.module'
export function adminModule(): any { return AdminModuleNgFactory; }
export function adminModuleKeep(): any { return AdminModule; }

AdminModule 必须在 AOT 文件中引用，以便保留。

然后我在我的路由中使用 adminModule 函数:

import { adminModule } from '../submodules'
{ path: 'admin', loadChildren: adminModule }

最后，为了方便起见，npm 脚本放入了正确的文件。

"build:aot": "cp src/submodules-aot.ts src/app/submodules.ts && ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
"start": "cp src/submodules-jit.ts src/app/submodules.ts && concurrently \"npm run build:watch\" \"npm run serve\""

不用说这是一个可怕的 hack，但它保持了路由文件的清洁，并将大部分恶意内容集中在一个地方。