我可以在AOT

时间:2017-09-16 17:16:35

标签: angular spring-mvc spring-boot

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

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

我使用AngularJS + Spring框架创建了一个做得很好的原始版本 本质上,它会扫描与特定模式匹配的静态文件的依赖关系jar,为文件创建MVC资源解析,然后将这些文件URL包含在索引页中。

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

* BUT!一位同事说我的字体结束已经过时了,我需要更新Angular = P

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

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

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

参考项目 - https://github.com/savantly-net/sprout-platform

1 个答案:

答案 0 :(得分:0)

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

经过几个小时尝试不同的解决方案后,我确定最适合我的用例是将插件作为打印文件提供在应用程序目录外部的文件夹中,然后在准备开始提供应用程序时进行编译。

这对我有用的一个例子 - 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
]

然后使用spread运算符重新导出模块 -
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');
  }
}  

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