angular - 我们可以在 AOT 之后向 Angular 应用程序添加功能模块吗

Question

我在一个类似于 WordPress 和其他 CMS 应用程序的开源平台上工作，但专注于与典型 Java 构建管道的互操作性。

目标是创建一些可重用的库，为开发人员提供构建/运行时依赖项，以创建可在平台部署后应用于平台的功能模块[插件]。

我使用 AngularJS + Spring 框架创建了一个很好的原始版本。
本质上，它会扫描依赖项 jar 以查找与特定模式匹配的静态文件，为文件创建 MVC 资源解析，然后将这些文件 url 包含到索引页面中。

这有效地允许资源库包含服务器端和客户端资源以扩展运行平台。

*但是!一位同事说我的 font-end 已经过时了，我需要更新 Angular =P

所以我开始将 Angular 4 中的 UI 重写为一个单独的资源依赖项，可以在功能模块项目中用于测试，然后再作为 jar 发布。
我真的很喜欢 Angular 4 [TS]，因为它更像是开发我精通的服务器代码。

进入正题...如果功能模块提供客户端资源，我如何在运行时加载它们？
我想我可以使用 JIT 并在浏览器中加载 js 路径，但出于性能原因我想使用 AOT。

我正在考虑 - 解压资源，运行编译，然后提供页面。
或者有没有办法在 AOT 执行后动态加载 Angular 模块？

引用项目 - https://github.com/savantly-net/sprout-platform

Answer 1

我能够通过在我的主应用程序中引用生成的 NgModuleFactory 文件来加载外部插件，但仍然需要在主机应用程序中进行一些预编译配置。

经过数小时尝试不同的解决方案后，我确定最适合我的用例的是在应用程序目录外部的文件夹中以 typescript 文件的形式提供插件，然后在准备好开始为应用程序提供服务时进行编译.

这是如何为我工作的示例 - https://github.com/savantly-net/sprout-platform/tree/development/web/sprout-web-ui

我使用一个简单的 ts 模块来导入/导出插件 -[这里使用相对路径，但也可以使用绝对路径]
https://github.com/savantly-net/sprout-platform/blob/development/web/sprout-web-ui/sprout.conf.ts

import { WikiModule } from './plugins/wiki/';

export const plugins = [
  WikiModule
]

然后使用扩展运算符重新导出模块-
https://github.com/savantly-net/sprout-platform/blob/development/web/sprout-web-ui/src/app/plugins/plugins.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { plugins } from '../../../sprout.conf';
import { MenuModule } from '@savantly/ngx-menu';
import { SecurityModule } from '@savantly/ngx-security';
import { SproutPluginModule } from '@savantly/ngx-sprout-plugin';
import { Observable } from 'rxjs/Observable';

const log = (msg: string, obj?: any) => {
  console.log('[PluginsModule] ' + msg);
  if (obj) {
    console.log(obj);
  }
}


@NgModule({
  imports: [
    CommonModule,
    SproutPluginModule,
    MenuModule,
    SecurityModule,
    ...plugins
  ],
  exports: [...plugins],
  declarations: []
})
export class PluginsModule {
  private ngModules: NgModule[] = [];

  getNgModules(): Observable<NgModule[]> {
    return Observable.of(this.ngModules);
  }

  constructor() {
   log('Loaded plugins');
  }
}  

这不是一个真正的即插即用解决方案，但如果没有在 [预编译] 配置文件中明确引用插件文件夹，构建过程将无法执行摇树优化。