我们可以在AOT之后将功能模块添加到Angular应用中吗 [英] Can we add a feature module to an Angular app after AOT

问题描述

我正在使用类似于WordPress和其他CMS应用程序的开放源代码平台，但专注于与典型Java构建管道的互操作性.

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

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

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

*但是！一位同事说我的字体结尾已过时，我需要更新Angular = P

因此，在以jar形式发布之前，我已经开始在Angular 4中将UI重写为一个单独的资源依赖项，可以在功能模块项目中使用该UI进行测试.
我真的很喜欢Angular 4 [TS]，因为它更像是开发我精通的服务器代码.

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

我正在考虑-解压缩资源，运行编译，然后为页面提供服务.
还是有一种方法可以在执行AOT之后动态加载Angular模块?

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

解决方案

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

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

这对我如何起作用的示例- 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

解决方案

I was able to load an external plugin by referencing the generated NgModuleFactory files in my main app, but still required some pre-compiled configuration in the host app.

After many hours of trying different solutions, I've determined the best for my use-case is to provide the plugins as typescript files in a folder external to the application directory, then do a compile when ready to start serving the app.

An example of how this is working for me - https://github.com/savantly-net/sprout-platform/tree/development/web/sprout-web-ui

I use a simple ts module to import/export the plugins - [using a relative path here, but also works with an absolute path]
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
]

Then use the spread operator to re-export the modules -
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');
  }
}  

This is not a true plug-and-play solution, but without having the plugin folders referenced explicitly in the [pre-compiled] configuration file, the build process would not be able to perform tree-shaking.

这篇关于我们可以在AOT之后将功能模块添加到Angular应用中吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！