摘要：面对如何在现有的低版本的框架服务上，运行新版本的前端服务问题，华为云前端推出了一种融合方案，该方案能让独立的Angular项目整体运行在低版本的框架服务上，通过各种适配手段，让Angular项目也能获取到外层框架服务的资源。

华为云前端服务前期采用AngularJs作为框架技术栈，技术较为老旧，性能较差，在华为云快速发展的今天，显然不能满足要求。因此我们必须要升级前端技术栈，使用Angular2+来承载我们的前端服务。GeminiDB作为新服务，也是数据库乃至华为云未来的重点服务，作为前端部分，必须在技术上使用最前沿的框架，以最大地提高用户体验。

但是技术栈的升级不是一蹴而就的，尤其是在华为云，所有的云服务必须在框架服务的底座上运行，而框架服务承载了所有的云服务，如果要进行技术栈升级，必然是一个缓慢的过程。GeminiDB作为华为云服务里的一员，也不可能脱离框架服务而存在。因此存在一个问题，就是如何在现有的低版本的框架服务上，运行新版本的前端服务。

为了解决以上问题，华为云前端推出了一种融合方案，该方案能让独立的Angular项目整体运行在低版本的框架服务上，通过各种适配手段，让Angular项目也能获取到外层框架服务的资源。

底层项目使用webpack打包，打包后通过在index.html里引入businessAll.js文件，以该文件为入口启动整个框架服务。

  1. <script type="text/javascript" src="businessAll.js"></script>

在底层框架服务启动后，再渲染出具体云服务内容。

  1. <div class="service-content-view" ui-view ng-animate="{enter:\'fade-enter\'}"></div>

Angular项目支持独立运行，有单独的index.html，也有单独的main.ts入口。但是如果希望Angular项目运行在底层框架服务上，就必须把Angular项目看作是一个独立的模块，把项目整体引入到底层项目中。因此，我们可以预先把Angular项目编译好，放到底层项目的一个目录下。在运行底层项目时，在index.html里将Angular项目引进来，独立运行。

  1. <link rel="stylesheet" type="text/css" href="{底层项目中Angular项目的路径}/styles.css" />
  2. <script type="text/javascript" src="{底层项目中Angular项目的路径}/runtime.js"></script>
  3. <script type="text/javascript" src="{底层项目中Angular项目的路径}/polyfills.js"></script>
  4. <script type="text/javascript" src="{底层项目中Angular项目的路径}/main.js"></script>

底层项目和Angular项目均能独立，但是要让两者融合起来，会遇到以下几个问题：

1.底层项目中如何渲染出Angular项目。

2.Angular项目依赖底层项目的资源，如何保证Angular项目在底层项目运行起来后再运行。

3.如何解决底层项目和Angular项目的路由冲突问题。

底层项目分为两部分，一部分是底层框架服务，另一部分是具体云服务。现在我们要做的是把老的云服务项目替换成新的Angular项目，因此我们可以直接在渲染老的云服务的地方替换成新的Angular项目的渲染容器。

  1. <div class="service-content-view" ui-view ng-animate="{enter:\'fade-enter\'}"></div>
  2. <app-root></app-root>

底层框架服务对页面渲染上做了一些体验上的优化，因此必须保留原模板中的ui-view，使底层项目正常运行起来，实际上老的云服务项目的渲染内容已经转发到新的Angular项目上面。

底层框架服务给云服务提供了很多公共变量与服务，这些变量和服务是各个云服务必须要使用的，否则云服务将不能正常运作。

对于Angular项目来说，要使用底层框架服务提供的内容，首先要求Angular项目在底层项目运行起来之后再运行。这里采用Augular中的APP_INITIALIZER令牌来解决这个问题。APP_INITIALIZER是一个函数，在程序初始化的时候被调用。这里在根模块的providers中以factory的形式来配置。

  1. import { BrowserModule } from "@angular/platform-browser";
  2. import { NgModule } from "@angular/core";
  4. import { AppInitService } from \'./services/app-init.service\';
  5. import { AppComponent } from "./app.component";
  7. @NgModule({
  8.  declarations: [AppComponent],
  9.  imports: [BrowserModule],
  10.  providers: [
  11.      AppInitService,
  12.     {
  13.          provide: APP_INITIALIZER,
  14.          useFactory: initializeApp,
  15.          deps: [AppInitService],
  16.          multi: true
  17.     }
  18. ],
  19.  bootstrap: [AppComponent]
  20. })
  21. export class AppModule {}
  23. export function initializeApp(appInitService: AppInitService) {
  24.    return (): Promise<any> => {
  25.        return appInitService.Init();
  26.   };
  27. }

在appInitService里，先获取到底层框架的资源，再进行Angular项目的初始化。

  1. import { Injectable } from \'@angular/core\';
  3. @Injectable()
  4. export class AppInitService {
  5.    constructor() {}
  7.    Init() {
  8.        return new Promise<void>((resolve, reject) => {
  9.            // 获取到底层框架服务的资源
  10.            resolve();
  11.       });
  12.   }
  13. }

底层项目使用的是AngularJs，Angular项目获取底层框架服务提供的资源不能通过Angular的方式引入，因此需要借助AngularJS的注入器获取在底层框架中注册的服务组件：

  1. static get(inject: string): any {
  2. return (window as any).angular.element(\'html\').injector().get(inject);}
  3. 如，要获取 $rootScope：
  4.  rootScope = (window as any).angular.element(\'html\').injector().get(‘$rootScope’);

Angular项目本身有自己的路由，但是Angular项目是运行在底层框架之上的，Angular项目的路由将会被底层框架所拦截。因此，我们也需要在底层框架的项目中配置相同的路由，以免Angular项目中的有效路由被底层框架识导向为404。

Angular项目路由：

  1. {
  2.    path: \'\',
  3.    redirectTo: \'ng2app1\',
  4.    pathMatch: \'full\'
  5. },
  6. {
  7.    path: \'ng2app1\',
  8.    loadChildren: \'./ng2app1/ng2app1.module#Ng2app1Module\',
  9. },
  10. {
  11.    path: \'ng2app2\',
  12.    loadChildren: \'./ng2app2/ng2app2.module#Ng2app2Module\',
  13. }
  14.  
  15. 底层框架路由：
  16. var configArr = [
  17.   {
  18.        name: \'ng2app1\',
  19.        url: \'/ng2app1\'
  20.   },
  21.   {
  22.        name: \'ng2app2\',
  23.        url: \'/ng2app2\'
  24.   }
  25. ];

另外，由于底层项目使用的是hash路由，Angular项目中也要做相应的配置，默认是使用的是PathLocationStrategy，需要切换到hash模式。

  1. import { LocationStrategy, HashLocationStrategy } from \'@angular/common\';
  3. ...
  4. providers: [
  5.   {
  6.        provide: LocationStrategy,
  7.        useClass: HashLocationStrategy
  8.   }
  9. ]

以上方案是在底层框架升级周期长的前提下的一个临时方案，实际上还是存在着不少的问题。比如底层框架对于老的云服务容器是有统一管理的，老的云服务容器会针对不同的场景能够自适应，而融合方案中的Angular项目则不能；每次启动整个项目时，必须要预先编译好里面的Angular项目，再去启动外层的底层框架，开发效率比较低。因此，后续GeminiDB服务应该在底层框架升级后，尽快适应到新的底层框架体系中，提高服务的可用性和稳定性。

 

点击关注，第一时间了解华为云新鲜技术~

版权声明：本文为huaweiyun原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/huaweiyun/p/13181914.html