我们有几个Web应用程序,我们希望在一个单页面应用程序下呈现.我们正在寻找一个可以使用的微前端架构/框架.正如我们所看到的,这些是我们实施的选择:
当前状态是monolith FE应用程序,它将其他子应用程序作为内部第三方程序包使用.这种方法对我们来说是不可扩展的,因为托管应用程序正在一起构建所有产品,并没有真正分离.
我们的要求是微前端的通常要求:1.独立开发 - 每个团队都可以选择自己的框架并构建他们的产品,而不管其他产品.
独立部署 - 每个应用程序都可以在生产中升级,无需停机,也不会干扰其他应用程序.
共享组件 - 我们在我们的应用程序中使用Angular4,并且我们已经编写了一个专有的第三方库(共享组件和逻辑),应该在所有产品之间共享,以获得相似的外观.
我们希望能够升级每个应用程序的框架(Angular,RXjs,Typescript等以及我们的专有组件库),而无需关心其他应用程序.
我们尝试使用单一spa框架,但我们遇到了一些问题,如果这对我们来说是正确的方法,或者我们应该尝试不同的方法,我们现在可以自己思考.
我们使用单一水疗中心的问题是:1.资产加载是有问题的.(我们必须将资产文件放在托管应用程序的根文件夹中,并且切换到另一个应用程序时会遇到资产冲突).2.我们仍然不知道如何处理所有应用程序的全局样式(我们使用sass进行样式化,并且必须与每个应用程序的本地样式一起使用)3.升级角度框架(或所有其他框架)是不可能的对于一个应用程序,它是全部或全部(因为我们有一个角度的实例).4.我们必须在托管应用程序(shell)的另一侧实现不同的捆绑开发.
当我们考虑Iframe(使用友好的Iframe)解决方案时,我们可视化所有子应用程序之间的完全分离,并倾向于认为这对我们来说是更合适的方法.
使用Iframe有任何陷阱吗？
谢谢,丹尼尔
我使用角度路由器和RxJS时遇到问题.角度4.3.6和RxJS 5.2.0一切正常.
但是当我升级到:
Angular:5.0.3
RxJS:5.5.2
我开始在我的应用程序中的不同位置出现奇怪的错误.例如,看看这段代码.
注意:我已经导入了'mergeMap'函数,如您所见.而且我也没有得到Observable类型的"bla"变量的错误,只是对于Router.events,它本身就是一个Observable.
任何想法如何解决问题？
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/mergeMap';
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
@Component({
selector: 'pv-app',
encapsulation: ViewEncapsulation.None,
template: `
....
`
})
export class PvComponent implements OnInit {
constructor(private router: Router,
private activatedRoute: ActivatedRoute) {
}
ngOnInit() {
let bla = Observable.of('hello');
bla.mergeMap(x=>x); // Works without problems.
this.router.events
.filter((event) => event instanceof NavigationEnd)
.map(() => this.activatedRoute)
.map((route) => {
while (route.firstChild) {
route = route.firstChild
}; …我有一个叫做MyClass包含几个成员的类,其中一个是myString:
public class MyClass{
//...
private String myString;
}
现在,我有一个集合MyClass和另一个集合String.
我的问题是:
如何将这两个集合与流媒体进行比较？那可能吗？
我试图在javascript中以函数方式交换数组中的2个元素(es6)
let arr = [1,2,3,4,5,6]
let result = swap(arr, 1, 2) // input: array, first element, second element
// result=[1,3,2,4,5,6]
我能想到的唯一方法是:
const swap = (arr, a, b) =>
arr.map( (curr,i) => i === a ? arr[b] : curr )
.map( (curr,i) => i === b ? arr[a] : curr )
但是这个代码在数组上运行了两次,根本不可读.有什么好的干净功能代码的建议吗？
谢谢.