摘要：可以在不必打斷其它業(yè)務(wù)的前提下，升級(jí)應(yīng)用程序，因?yàn)檫@項(xiàng)工作可以多人協(xié)作完成，在一段時(shí)間內(nèi)逐漸鋪開(kāi)，下面就方案展開(kāi)說(shuō)明主要依賴(lài)提供模塊。在混合式應(yīng)用中，我們同時(shí)運(yùn)行了兩個(gè)版本的。這意味著我們至少需要和各提供一個(gè)模塊。

我給大家提供的是angular1.x和angular5并行，增量式升級(jí)方案，這樣大家可以循序漸進(jìn)升級(jí)自己的應(yīng)用，不想看文字直接demo入手migration-from-angular1.x-to-angular2Plus

方案1:主體為angular1.x，逐步將angular1.x當(dāng)中service、component、filter、controller、route、dependencies升級(jí)為angular5

方案2: 主體為angular5，將項(xiàng)目所有js文件先進(jìn)行一次加工，采用ES6的方式將每個(gè)js文件module
export出來(lái)，再逐步將內(nèi)容向angular5靠近

我建議選擇方案1增量式升級(jí)，通過(guò)在同一個(gè)應(yīng)用中一起運(yùn)行這兩個(gè)框架，并且逐個(gè)把AngularJS的組件遷移到Angular中。 可以在不必打斷其它業(yè)務(wù)的前提下，升級(jí)應(yīng)用程序，因?yàn)檫@項(xiàng)工作可以多人協(xié)作完成，在一段時(shí)間內(nèi)逐漸鋪開(kāi)，下面就方案1展開(kāi)說(shuō)明

Hybrid APP主要依賴(lài)Angular提供upgrade/static模塊。后面你將隨處可見(jiàn)它的身影。以下手把手教你將angular1.x遷移到angular2+

1、調(diào)用 UpgradeModule 來(lái)引導(dǎo) AngularJS

在A(yíng)ngularJS中，我們會(huì)把AngularJS的資源添加到angular.module屬性上。 在A(yíng)ngular中，我們會(huì)創(chuàng)建一個(gè)或多個(gè)帶有NgModule裝飾器的類(lèi)，這些裝飾器用來(lái)在元數(shù)據(jù)中描述Angular資源。在混合式應(yīng)用中，我們同時(shí)運(yùn)行了兩個(gè)版本的Angular。 這意味著我們至少需要AngularJS和Angular各提供一個(gè)模塊。要想引導(dǎo)混合式應(yīng)用，我們?cè)趹?yīng)用中必須同時(shí)引導(dǎo) Angular 和 AngularJS。要先引導(dǎo) Angular ，然后再調(diào)用 UpgradeModule 來(lái)引導(dǎo) AngularJS。

從HTML中移除ng-app和ng-strict-di指令, 創(chuàng)建一個(gè)app.module.ts文件，并添加下列NgModule類(lèi)：

import { UpgradeModule } from "@angular/upgrade/static";
@NgModule({   
  imports: [  
    UpgradeModule
  ]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) { }    
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ["yourAngularJsAppName"], { strictDi: true });
  }
}

用AppModule.ngDoBootstrap方法中啟動(dòng) AngularJS 應(yīng)用,現(xiàn)在我們就可以使用 platformBrowserDynamic.bootstrapModule 方法來(lái)啟動(dòng) AppModule 了。

main.ts：

import {AppModule} from "./app/app.module";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

我們就要開(kāi)始運(yùn)行AngularJS+5的混合式應(yīng)用程序了！所有現(xiàn)存的AngularJS代碼會(huì)像以前一樣正常工作，但是我們現(xiàn)在也同樣可以運(yùn)行Angular代碼了

2、將項(xiàng)目中的services逐步升級(jí)為angular5

我們將username-service.js里面的內(nèi)容升級(jí)為username-service.ts：

import { Injectable } from "@angular/core";
@Injectable() 
export class UsernameService {
  get() {
    return "nina"
  }
}

要在angular1.x中使用UsernameService，先創(chuàng)建一個(gè)downgrade-services.ts文件，這里將會(huì)存放所有angular5服務(wù)降級(jí)后在angular1.x中使用的服務(wù)

downgrade-services.ts：

import * as angular from "angular";
import { downgradeInjectable } from "@angular/upgrade/static";
import { UsernameService  } from "./services/ username-service "; 
angular.module("yourAngularJsAppName")
  .factory("UsernameService", downgradeInjectable(UsernameService));

完成這兩步之后UsernameService就可以在angular1.x controller component service等注入使用了，在angular5中的使用方法這里就不舉例了，按照angular5的使用方法來(lái)就行

3、項(xiàng)目中的filter逐步升級(jí)為angular5的pipe，同時(shí)angular1.x的filter依然保留

由于filter的性能問(wèn)題angular2中已經(jīng)將filter改為pipe，angular團(tuán)隊(duì)沒(méi)有提供filter升級(jí)為pipe，或者pipe降級(jí)為filter的module，所以angular1.x中使用filter，angular中使用pipe，filter的升級(jí)放在component之前，因?yàn)閏omponent的template可能會(huì)用到

username-pipe.ts:

import { Pipe, PipeTransform } from "@angular/core";
Pipe({
  name: "username"
})
export class usernamePipe implements PipeTransform { 
  transform(value: string): string {
    return value === "nina" ? "張三" : value;
  }
}

4、將項(xiàng)目中的component逐步升級(jí)為angular5的component

我們將hero-detail.js里面的內(nèi)容升級(jí)為hero-detail.ts：

import { Component, EventEmitter, Input, Output, ViewContainerRef } from "@angular/core";
import { UsernameService } from "../../service/username-service";
@Component({
  selector: "hero-detail",
  templateUrl: "./hero-detail.component.html"
})
export class HeroDetailComponent {
  Public hero: string;
  
  constructor(private usernameService: UsernameService) {
      this.hero = usernameService.get()
  }
}

要在angular1.x中使用hero-detail component，先創(chuàng)建一個(gè)downgrade-components.ts文件，這里將會(huì)存放所有angular5組件降級(jí)后在angular1.x中使用的組件

downgrade-components.ts：

import * as angular from "angular";
import { downgradeComponent } from "@angular/upgrade/static";
import { HeroDetailComponent } from "./app/components/hero-detail/hero-detail.component";
angular.module("yourAngularJsAppName")
  .directive("heroDetail", downgradeComponent({ component: HeroDetailComponent }) as angular.IDirectiveFactory)

現(xiàn)在你可以在angular1.x中的template中使用hero-detail組件了，組件之間通訊的問(wèn)題按照angular5的接口寫(xiě)

5、將angular1.x controller改成angular5 component

現(xiàn)在就剩下controller了，angular2已經(jīng)取消了controller，controller可以把它當(dāng)成一個(gè)大的component，所以我們按照component的方法重構(gòu)controller，并且對(duì)新的component降級(jí)，controller重構(gòu)之后我們需要修改路由，我們現(xiàn)在使用的還是angular1.x的路由，基本上一個(gè)路由對(duì)應(yīng)的是一個(gè)controller，這個(gè)時(shí)候路由可以這樣修改：

假設(shè)有個(gè)TestContentCtrl，對(duì)應(yīng)的路由是test

.state("test", {
  url: "/test",
  controller: "TestContentCtrl",
  controllerAs: "vm",
  templateUrl: "./src/controllers/test-content-ctrl.html"
 })

在TestContentCtrl改成test-content component后

.state("test", {
  url: "/test",
  template: ""
 })

6、第三方插件或者庫(kù)解決方案

關(guān)于項(xiàng)目中引用基于angular1.x的插件或者庫(kù)，基本都能找到angular2+的版本，可以將angular2+的版本引入進(jìn)行降級(jí)處理就可以在angular1.x中使用了，但是~~~， angular2+的版本很多API都改了，angular1.x中的對(duì)應(yīng)使用方法可能不存在了，這里有兩種解決方案

引入angular2+的版本，刪除angular1.x版本，降級(jí)后在angular1.x應(yīng)用中用到該插件的都檢查一次，運(yùn)用angular2+的版本的API使用該插件

引入angular2+的版本，保留angular1.x版本，angular1.x應(yīng)用使用angular1.x版本插件，
angular5應(yīng)用使用angular2+版本插件，

方案2增加了項(xiàng)目的體積，相同的插件引用了兩個(gè)版本。在不影響首屏加載時(shí)間的情況下方案2是不錯(cuò)的選擇，因?yàn)橐淮涡詫⑺胁寮蛘邘?kù)的API全部過(guò)一遍，工作量比較大容易出錯(cuò)，也不符合我們?cè)隽渴缴?jí)的初衷

現(xiàn)在項(xiàng)目中所有的內(nèi)容基本都升級(jí)為angular5了，我們可以刪除downgrade-services.ts和downgrade-components.ts這兩個(gè)文件了，同時(shí)將路由升級(jí)為angular5，刪除angular1.x相關(guān)的庫(kù)和插件，一個(gè)完整的angular5應(yīng)用就誕生了

如果不是很明白直接看demo：migration-from-angular1.x-to-angular2Plus，喜歡點(diǎn)個(gè)贊喲~~~

分享個(gè)問(wèn)題：

如果import angular保錯(cuò)了，你可以考慮引入@types/angular