Angular 搭建升級環(huán)境

準(zhǔn)備從 AngularJS 升級

注意：本指南僅僅適用于從 AngularJS 升級和注重性能的升級。 本指南中提到的升級指南使用的是已棄用的快速上手 Github 倉庫，它是在 Angular CLI 推出之前創(chuàng)建的。
對于所有其它場景，請參閱建立本地開發(fā)環(huán)境中的步驟。

本指南講的是如何在你自己的機器上進(jìn)行本地化開發(fā)。 利用 github 上的《快速上手》種子在你的電腦上搭建一個新項目是很快很容易的。

前提條件：確保你已經(jīng)安裝好了 ?Node.js? 和 ?npm?。

克隆

運行下列命令來執(zhí)行克隆并啟動步驟。

git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install

下載

下載《快速上手》種子 并解壓到你的項目目錄中。然后執(zhí)行下面的命令完成剩余步驟。

cd quickstart
npm install

刪除非必需文件（可選）

你可以快速刪除一些涉及到測試和維護快速開始版本庫的 非必需 文件 （包括所有 git 相關(guān)的文件如 ?.git? 文件夾和 ?.gitignore??。?。

請只在開始時執(zhí)行此刪除操作，以防你自己的測試和 git 文件被意外刪除！

在項目目錄下打開一個終端窗口，并根據(jù)你的操作系統(tǒng)執(zhí)行以下命令：

OS/X (bash)

xargs rm -rf < non-essential-files.osx.txt
rm src/app/*.spec*.ts
rm non-essential-files.osx.txt

Windows

for /f %i in (non-essential-files.txt) do del %i /F /S /Q
rd .git /s /q
rd e2e /s /q

更新依賴版本

由于不推薦使用快速入門倉庫（它已不再更新），所以你需要一些額外的步驟來使用最新的 Angular。

1. 刪除過時的 ?@angular/http? 包（全都來自 ?package.json > dependencies? 和 ?src/systemjs.config.js > SystemJS.config() > map? ）。
2. 通過運行以下命令來安裝最新版本的 Angular 框架包：

npm install --save @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/forms@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/router@latest

3. 通過運行以下命令安裝 Angular 用到的其它包的最新版本（RxJS、TypeScript、Zone.js）：

npm install --save rxjs@latest zone.js@latest
npm install --save-dev typescript@latest

4. 安裝 ?systemjs-plugin-babel? 包。稍后它將用于使用 SystemJS 加載 ES2015 格式的 Angular 框架文件。

npm install --save systemjs-plugin-babel@latest

5. 為了能正確加載最新的 Angular 框架包（ES2015 格式），請?zhí)鎿Q ?src/systemjs.config.js? 中的相關(guān)條目：

System.config({
  /* . . . */
  map: {
    /* . . . */
    '@angular/core': 'npm:@angular/core/fesm2015/core.mjs',
    '@angular/common': 'npm:@angular/common/fesm2015/common.mjs',
    '@angular/common/http': 'npm:@angular/common/fesm2015/http.mjs',
    '@angular/compiler': 'npm:@angular/compiler/fesm2015/compiler.mjs',
    '@angular/platform-browser': 'npm:@angular/platform-browser/fesm2015/platform-browser.mjs',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2015/platform-browser-dynamic.mjs',
    '@angular/router': 'npm:@angular/router/fesm2015/router.mjs',
    '@angular/router/upgrade': 'npm:@angular/router/fesm2015/upgrade.mjs',
    '@angular/forms': 'npm:@angular/forms/fesm2015/forms.mjs',
    /* . . . */
  },
  /* . . . */
});

6. 為了能夠正確加載最新的 RxJS 包，請?zhí)鎿Q ?src/systemjs.config.js? 中的相關(guān)條目：

System.config({
  /* . . . */
  map: {
    /* . . . */
    'rxjs': 'npm:rxjs/dist/cjs',
    'rxjs/operators': 'npm:rxjs/dist/cjs/operators',
    /* . . . */
  },
  /* . . . */
  packages: {
    /* . . . */
    'rxjs': {
      defaultExtension: 'js',
      format: 'cjs',
      main: 'index.js'
    },
    'rxjs/operators': {
      defaultExtension: 'js',
      format: 'cjs',
      main: 'index.js'
    },
    /* . . . */
  }
});

7. 為了能夠加載 ?tslib ?包（這是由 TypeScript 轉(zhuǎn)譯后的文件所必需的），請將以下條目添加到 ?src/systemjs.config.js? ：

System.config({
  /* . . . */
  map: {
    /* . . . */
    'tslib': 'npm:tslib/tslib.js',
    /* . . . */
  },
  /* . . . */
});

8. 為了使 SystemJS 能夠正確加載 ES2015 Angular 文件，請將以下條目添加到 ?src/systemjs.config.js? ：

System.config({
  /* . . . */
  map: {
    /* . . . */
    'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
    'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
  },

  transpiler: 'plugin-babel',
  /* . . . */
  packages: {
    /* . . . */
    'meta': {
      '*.mjs': {
        babelOptions: {
          es2015: false
        }
      }
    }
  }
});

9. 最后，為了防止依賴項的 TypeScript 類型檢查錯誤，請將以下條目添加到 ?src/tsconfig.json? ：

{
  "compilerOptions": {
    "skipLibCheck": true,
    // ...
  }
}

有了這些，你現(xiàn)在就可以運行 ?npm start? 并構(gòu)建和啟動應(yīng)用程序了。構(gòu)建后，應(yīng)用程序?qū)⒆詣釉谛碌臑g覽器選項卡中打開，并在你更改源代碼時自動重新加載。

《快速上手》種子庫里都有什么？

《快速上手》種子 提供了一個基本的《快速上手》游樂場應(yīng)用，以及進(jìn)行本地開發(fā)的其它必要文件。

提醒：“快速上手”種子項目是在 Angular CLI 之前創(chuàng)建的，因此這里講的會和 Angular CLI 創(chuàng)建的應(yīng)用有一些差異。

注意?/src?目錄中以下三個 TypeScript (?.ts?) 文件：

• src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Hello {{name}}</h1>'
})
export class AppComponent { name = 'Angular'; }

• src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

• src/main.ts

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

platformBrowserDynamic().bootstrapModule(AppModule);

所有指南和烹飪書都至少有這幾個核心文件。每個文件都有獨特的用途，并且隨著應(yīng)用的成長各自獨立演變。

?src/? 目錄之外的文件為構(gòu)建、部署和測試 app 相關(guān)的文件，他們只包括配置文件和外部依賴。

?src/? 目錄下的文件才“屬于”你的 app。 除非明確指出，否則教程中添加的 TypeScript，HTML 和 CSS 文件都在 ?src/? 目錄下， 大多數(shù)在 ?src/app? 目錄中。

?src/? 目錄文件詳情如下：

附錄：使用 fakeAsync()/waitForAsync() 進(jìn)行測試

如果你使用 ?fakeAsync()/async()? 輔助函數(shù)來運行單元測試，就要在測試的準(zhǔn)備文件中導(dǎo)入 ?zone.js/testing?。

如果你是用 ?Angular/CLI? 創(chuàng)建的項目，那么它已經(jīng)在 ?src/test.ts? 中導(dǎo)入過了。

在以前版本的 ?Angular ?中，下列文件曾被導(dǎo)入或添加到 html 文件中：

import 'zone.js/plugins/long-stack-trace-zone';
import 'zone.js/plugins/proxy';
import 'zone.js/plugins/sync-test';
import 'zone.js/plugins/jasmine-patch';
import 'zone.js/plugins/async-test';
import 'zone.js/plugins/fake-async-test';

你仍然可以分別導(dǎo)入這些文件，不過導(dǎo)入順序很重要，你必須在 sync-test、async-test、fake-async-test 和 jasmine-patch 之前導(dǎo)入 proxy。還要注意在 jasmine-patch 之前導(dǎo)入 sync-test。所以，建議你只導(dǎo)入 zone-testing 而不要分別加載那些文件。