使用Angular cli升級AngularJS項目——（一）引導Angular混合應用

前言

都9102年了，筆者所在的公司的主要項目仍是用AngularJS 1.6這種史詩的框架進行開發的。另外因爲歷史的緣由，代碼的凌亂程度早已超越想象。爲此，筆者決定痛下決心把整個項目重構了一遍...今後踏上了Angular升（跳）級（坑）之路。

先說說升級先後的變化：
項目管理：gulp -> gulp + Angular CLI
框架：AngularJS 1.6 -> AngularJS 1.6 + Angular 7
應用結構：多個AngularJS應用 -> 主項目：Angular、衛星項目：AngularJS

系列文章

1. （一）引導運行混合應用
2. （二）同步混合應用路由的狀態

這個系列文章中涉及到

1. Angular與AngularJS如何共存開發
2. 使用Angular Cli編譯及開發Angular、AngularJS混合應用
3. 如何在Hash模式中同步AngularJS、Angular的路由
   ---下面是坑，待填
4. 在gulp或其餘自動化構建工具中使用Angular CLI
5. 在Angular中使用AngularJS的組件
6. 在AngularJS中使用Angular的組件

本文使用的例子項目

AngularJS的例子項目angular-phonecat

爲何升級爲Angular框架

在筆者公司內部，大部分新項目已經開始使用Vue進行開發。筆者也更加傾向於Vue簡單、優雅的開發形式，較爲符合前端（浪蕩）的開發模式。同時對於新手而言Vue更加容易上手。但對於筆者手上的項目而言，升級爲Angular是爲數很少可行的方案：

1. 漸近式升級
   因爲項目年代久遠，項目涉及到了公司各個業務的方方面面。難以在短期內完成所有的重構工做。在重構的同時，也須要兼顧到新業務的開發。（曾經這個項目在多個大佬的帶領下重構過，但無一倖免的所有夭折）。爲此，選擇升級爲Angular的第一考量的對象就是是否能夠「在原有的基礎上進行重構」，而Angular官方提供的@angular/upgrade則很好的解決了這個問題。直至徹底重構爲止，舊的代碼仍能直接運行在項目中，不受重構的影響。
2. 更加嚴謹的開發 在改造前的項目中包含了幾個5000+行的文件，每次添加都很是「蛋疼」，出現這種問題的主要緣由就是在這幾年間，都沒有對項目提交代碼進行規範，同時也沒有進行Code Review等操做。使用TypeScript可讓一部分Freshman放棄他們浪蕩的代碼風格。此外，對於太過爛的代碼，Angular甚至不能讓其編譯經過。這種框架以及語言特性決定了Angular更加擅長於開發更加嚴謹的項目。
   固然，Vue也能使用TypeScript，通過規範的Vue編碼風格也能使其變得更嚴謹，前提是你得忍受編輯器對vue中的ts語言的支持：）

1、前期準備

檢查你的項目是否包含Angular cli沒法支持的編譯特性。

在筆者公司項目中，使用gulp做爲項目管理工具。其中包含了gulp-file-include在html文件中引入其餘html片斷的插件，可是若是使用Angular cli(如下簡述爲：ng cli)做爲項目編譯開發工具，這些過程是不能被支持的。所以，應當先將它們去除。

安裝Angular CLI

筆者使用的是yarn：

yarn global add @angular/cli
複製代碼

若是你是使用npm：

npm i @angular/cli -g
複製代碼

2、新建一個種子項目

Angular的迭代更新速度是有目共睹的，筆者建議直接新建一個種子項目，而非直接複製本文說起的依賴關係。

具體的使用方法見 官方文檔
運行完畢後，將如下文件複製到你的項目中：

• package.json
  若項目中已存在package.json你能夠直接複製與angular有關的依賴。

  "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.2",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "typescript": "~3.1.6"
  }
  複製代碼

• tsconfig.json。typescript配置文件
• angular.json。angular配置文件
• src 目錄。angular源碼文件夾，你能夠將其放到你的項目中適當的地方。

3、添加升級依賴

在種子項目中,是不包含AngularJS升級模塊的，你須要手動添加該模塊。

yarn add @angular/upgrade
複製代碼

4、將AngularJS的js、style交給angular cli管理

AngularJS的引入方式通常有兩種形式

1. 使用了模塊化的 若是自己已經使用了模塊化的編程，那麼你要作的就是移除本來的模塊引導器(如SystemJs等)、在index.html中移除ng-app。並在main.ts中import AngularJS入口文件便可。
   注意：你或許還需在tsconfig.json中加入：

   "compilerOptions": {
      ...
      "allowJs": true,
      ...
    }
   複製代碼

2. 通常引入形式的 若是項目中使用的是傳統引入形式，你須要將他們所有刪除掉，並在angular.json中projects -> porjectName -> architect -> build中的styles、scripts屬性添加相應的樣式、js文件。在此添加的文件，angular cli會在編譯、開發過程當中，進行合併壓縮操做。而後在index.html中將ng-app移除。

添加assets文件夾

在AngularJS中，存在一些如templateURL等，須要從服務器加載的內容。所以，咱們須要在angular.json中映射源代碼文件夾，使它能在serve的過程當中，能被訪問到。
具體路徑：angular.json projects -> porjectName -> architect -> build -> assets

5、在index.html中添加angular的入口

<app-root></app-root>是angular的入口標記，你能夠將其添加至index.html中合適的位置，通常爲告終構一致，會放在與AngularJS相鄰的地方。

6、引導AngularJS模塊

到這裏，你已經可使用ng serve進行開發了。但實際上，若是此時開始運行的話，在頁面中只會有Angular模塊的內容，沒有AngularJS模塊的內容。

實際上，js的腳本已經經過ng cli進行處理，併合併爲scripts.js，但因爲在此前的操做中，咱們將AngularJS的ng-app指令移除了。爲此咱們須要在angular加載過程當中手動加載AngularJS模塊。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, DoBootstrap, ApplicationRef } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
  declarations: [
    AppComponent
  ],
  entryComponents: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    UpgradeModule
  ],
  providers: [],
})
export class AppModule implements DoBootstrap {
  constructor(private upgrade: UpgradeModule){}

  // 手動接管加載進程
  ngDoBootstrap(appRef: ApplicationRef) {
    this.upgrade.bootstrap(document.documentElement, ['phonecatApp']); // 引導AngularJS模塊
    appRef.bootstrap(AppComponent) // 引導Angular模塊
  }
 }

複製代碼

7、大功告成

如今運行ng serve就能夠看到同時運行Angular、AngularJS的頁面了！

（未完待續）

源碼

因爲篇幅有限，實際上還有幾處修改未在文段中展現。在此，你能夠獲取到本文修改後的angular-phonecat項目。 [github.com/yskun/angul…]

參考

1. 從 AngularJS 升級到 Angular
2. 升級 AngularJS 至 Angular

License

本做品採用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。