從Ionic2 beta更新到Ionic2 RC0的正確姿式

ps:參照官方文檔進行整理。填了一些坑供參考 ：）

基於Angular2的正式發佈，Ionic2也進入了RC版本。可是由於結構和語法變更，使得從beta到RC不能平滑升級。

官方給出了2種升級方式：
1.建立一個新項目並將原有文件複製到新項目中。
2.在現有的項目基礎上進行修改。

兩種方式我都試過，推薦第一種方式進行升級，複雜度低。

注意：此次更新引入了NgModules，這是由Angular2正式版引入的。詳細點這裏

複製文件到新項目中（推薦）

1 . 確保你使用的 npm 版本在 3.x 以上 :

npm --version

若是你當前的版本不是 3.x 以上，請先去安裝最新的 Node.js。

而後更新 npm：

npm install npm@latest -g

注意：目前最新版本爲 _3.10.8_ ，可是不少人都遇到了 uid must be an unsigned int的問題，因此我後退了2個版本安裝：

npm install npm@3.10.6 -g

2 . 安裝最新的 Ionic CLI:

npm install -g ionic

注意： 若是你以前安裝了 beta 版本的 cli，你應該先運行 npm uninstall -g ionic 卸載掉而後再進行安裝. 安裝完成後運行 ionic -v 來檢查，確保你的 cli 版本爲 2.1.0 。

3 . 建立一個新的 Ionic 2 RC0 項目:

ionic start --v2 myApp

4 . 複製/粘貼 全部你的 beta 文件到新的 RC 0 項目中。頁面文件從 app/pages/ 到 src/pages/, 服務提供器文件從 app/providers 到 src/providers, 過濾器文件從 app/pipes 到 src/pipes 以及你的自定義組件到 src/components。

注意：這裏建議用構建命令直接生成新的相應的組件。能夠免去後面修改的不少步驟。 ionic g [component|directive|page|provider|pipe|tabs] pageName。

5 . 重定義全部的 templateUrl 路徑，只保留 .ts 文件名. 好比 app.component.ts 文件中鏈接應該從build/app.html 修改成 app.html 頁面文件 about.html 也一樣從 build/pages/about/about.html 修改成 about.html。

6 . 導入並添加全部的頁面到 src/app/app.module.ts 文件中的 declarations 數組和 entryComponents 數組中。

7 . 導入並添加全部的自定義組件和過濾器到 src/app/app.module.ts 文件中的 declarations 數組中。

注意：實際修改中發現部分自定義組件不只要添加到 declarations 中，仍然也要添加到 entryComponents 數組中。

8 . 導入並添加全部的提供器（providers）到 src/app/app.module.ts 文件中的 providers 數組中.

9 . 刪除全部原 @Component 中的providers, pipes 和 directives屬性.

10 . 組件內與模版相關的變量，修改 private 關鍵字爲 public。

注意: 想要知道爲何這樣修改 戳這裏.

11 . 修改模版中的 <button> 爲 <button ion-button> 。

注意: 這個在版本更新說明中說的很清楚，務必修改。

12 . 爲原有的顏色標記增長 color 屬性 : <button primary> 修改成 <button color="primary">.

注意: 增長渲染效率，務必修改。

13 . 將Ionic的相關配置移動到 app.module.ts 文件中的 IonicModule.forRoot裏 . 例如, IonicModule.forRoot(MyApp, {configObject}).

14 . 將你 beta 應用中的 sass 樣式屬性移動到 app.variables 文件中.

15 . 爲你的每個頁面增長selector. 這是爲了定義和區分sass的做用域。例如sass文件中的:

page-selector-you-added {
  #title {
    color: blue;
  }
}

注意: 若是用構建命令生成的頁面，selector已經幫你添加好了。

修改現有的項目

1 . 確保你使用的 npm 版本在 3.x 以上 :

npm --version

若是你當前的版本不是 3.x 以上，請先去安裝最新的 Node.js。

而後更新 npm：

npm install npm@latest -g

注意：目前最新版本爲 _3.10.8_ ，可是不少人都遇到了 uid must be an unsigned int的問題，因此我後退了2個版本安裝：

npm install npm@3.10.6 -g

2 . 安裝最新的 Ionic CLI:

npm install -g ionic

注意： 若是你以前安裝了 beta 版本的 cli，你應該先運行 npm uninstall -g ionic 卸載掉而後再進行安裝. 安裝完成後運行 ionic -v 來檢查，確保你的 cli 版本爲 2.1.0 。

3 . 參照 ionic2-app-base package.json 更新 package.json 中的 dependencies 和 devDependencies , 而後在項目文件夾中運行 npm install.

4 . 複製 ionic2-app-base package.json 中的 npm scripts 到 package.json 文件中.

5 . 刪除 gulpfile.js.

6 . 重命名 app 文件夾爲 src.

7 . 在 src 文件夾中建立一個新的 app 文件夾.

8 . 將 app.html 和 app.ts 文件移動到 src/app 中.

9 . 重命名 app.ts 爲 app.component.ts.

10 . 用 ionic2-starter-blank 中的內容建立 app.module.ts 文件.

11 . 移動 app.component.ts 文件中 ionicBootstrap裏全部的 providers 到 app.module.ts文件中. imports 也一樣複製過去.

12 . 導入並添加你的自定義組件到 src/app/app.module.ts 文件中的 declarations 裏。

13 . 將Ionic的相關配置移動到 app.module.ts 文件中的 IonicModule.forRoot裏 . 例如, IonicModule.forRoot(MyApp, {configObject}).

14 . 從 app.component.ts 刪除 ionicBootstrap.

15 . 導出 app.component.ts 中的主應用類，而後重命名app.module.ts中全部的引用 MyApp 到你的主應用類 (或者重命名導出 app.component.ts 中的 MyApp).

16 . 修正 app.component.ts 中全部的路徑爲當前路徑. 例如, ./pages 變成 ../pages.

17 . 在 app.module.ts 中定義你的頁面類. 好比 HomePage, 全部的pages應該被包括在這裏.

18 . 修正 app.module.ts 中的 Imports 路徑. 例如, ./providers 變成 ../providers.

19 . 從 ionic2-app-base 添加 main.dev.ts 和 main.prod.ts 文件到 app/.

20 . 移動 www/index.html 到 src/index.html 參照 ionic2-app-base, 確保你後添加的內容也移動過去.

21 . 移動 www/assets 到 src/assets.

22 . 移動 www/img 到 src/assets/img.

23 . 移動你的其他資源從 www/ 到 src/assets/.

24 . 重定義全部的 templateUrl 路徑，只保留 .ts 文件名. 好比 app.component.ts 文件中鏈接應該從build/app.html 修改成 app.html 頁面文件 about.html 也一樣從 build/pages/about/about.html 修改成 about.html。

25 . 參照 ionic2-app-base 更新你的 .gitignore 文件.

26 . 刪除 typings/ 文件夾和 typings.json 文件.

27 . 參照 ionic2-app-base 更新 tsconfig.json 文件.

28 . 重命名並從新定位 app/theme/app.variables.scss 到 src/theme/variables.scss.

29 . 移動 Sass 文件從 app/theme 到 src/app. 好比 app.core.scss, app.ios.scss 等等.

30 . 將你定義的sass屬性移動到 theme/variables.scss 文件.

31 . 修正你的圖片路徑. 例如, 以前是 <img src="img/myImg.png"> 如今應該是 <img src="assets/img/myImg.png">.

32 . 組件內與模版相關的變量，修改 private 關鍵字爲 public。

**`注意`**: 想要知道爲何這樣修改 [戳這裏](https://forum.ionicframework.com/t/rc0-typescript-private-vs-public-keyword/64863/4?u=mhartington).

33 . 修改模版中的 <button> 爲 <button ion-button> 。

**`注意`**: 這個在版本更新說明中說的很清楚，務必修改。

34 . 爲原有的顏色標記增長 color 屬性 : <button primary> 修改成 <button color="primary">.

**`注意`**: 增長渲染效率，務必修改。

35 . 添加適當的圖標屬性, 若是圖標在左側應該添加 icon-left, 在右側則添加 icon-right, 若是按鈕中只有圖標, 則應該添加 icon-only 屬性.

36 . 爲你的每個頁面增長selector. 這是爲了定義和區分sass的做用域。例如sass文件中的:
模版中:

about-page {
  #title {
    color: blue;
  }
}

組件中:

@Component({
  selector: 'about-page',
  templateUrl: 'about.html'
})

其餘

RC0 版本棄用了 Typings 而改成使用 @types，對第三方庫更爲友好，在 /src 目錄下添加了declarations.d.ts文件 能夠更方便的本身添加所需的 declare。

以前的組件一樣也有變動之處，這個就參考官方Components文檔對照查看就可以解決。

建議通讀 Ionic RC0 的CHANGELOG,會更好的理解此次更新中的變更。