摘要：參照更新你的文件刪除文件夾和文件參照更新文件重命名并重新定位到移動(dòng)文件從到比如等等將你定義的屬性移動(dòng)到文件修正你的圖片路徑例如之前是現(xiàn)在應(yīng)該是組件內(nèi)與模版相關(guān)的變量，修改關(guān)鍵字為。

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

基于Angular2的正式發(fā)布，Ionic2也進(jìn)入了RC版本。但是因?yàn)榻Y(jié)構(gòu)和語(yǔ)法變動(dòng)，使得從beta到RC不能平滑升級(jí)。

官方給出了2種升級(jí)方式：
1.創(chuàng)建一個(gè)新項(xiàng)目并將原有文件復(fù)制到新項(xiàng)目中。
2.在現(xiàn)有的項(xiàng)目基礎(chǔ)上進(jìn)行修改。

兩種方式我都試過(guò)，推薦第一種方式進(jìn)行升級(jí)，復(fù)雜度低。

注意：這次更新引入了NgModules，這是由Angular2正式版引入的。詳細(xì)點(diǎn)這里

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

    npm --version

如果你當(dāng)前的版本不是 3.x 以上，請(qǐng)先去安裝最新的 Node.js。

然后更新 npm：

    npm install npm@latest -g

注意：目前最新版本為 _3.10.8_?，但是很多人都遇到了 uid must be an unsigned int的問(wèn)題，所以我后退了2個(gè)版本安裝：

    npm install [email protected] -g

2 . 安裝最新的 Ionic CLI:

    npm install -g ionic

注意： 如果你之前安裝了 beta 版本的 cli，你應(yīng)該先運(yùn)行 npm uninstall -g ionic 卸載掉然后再進(jìn)行安裝. 安裝完成后運(yùn)行 ionic -v 來(lái)檢查，確保你的 cli 版本為 2.1.0 。

3 . 創(chuàng)建一個(gè)新的 Ionic 2 RC0 項(xiàng)目:

    ionic start --v2 myApp

4 . 復(fù)制/粘貼 所有你的 beta 文件到新的 RC 0 項(xiàng)目中。頁(yè)面文件從 app/pages/ 到 src/pages/, 服務(wù)提供器文件從 app/providers 到 src/providers, 過(guò)濾器文件從 app/pipes 到 src/pipes 以及你的自定義組件到 src/components。

注意：這里建議用構(gòu)建命令直接生成新的相應(yīng)的組件。可以免去后面修改的很多步驟。 ionic g [component|directive|page|provider|pipe|tabs] pageName。

5 . 重定義所有的 templateUrl 路徑，只保留 .ts 文件名. 比如 app.component.ts 文件中連接應(yīng)該從build/app.html 修改為 app.html 頁(yè)面文件 about.html 也同樣從 build/pages/about/about.html 修改為 about.html。

6 . 導(dǎo)入并添加所有的頁(yè)面到 src/app/app.module.ts 文件中的 declarations 數(shù)組和 entryComponents 數(shù)組中。

7 . 導(dǎo)入并添加所有的自定義組件和過(guò)濾器到 src/app/app.module.ts 文件中的 declarations 數(shù)組中。

注意：實(shí)際修改中發(fā)現(xiàn)部分自定義組件不僅要添加到 declarations 中，仍然也要添加到 entryComponents 數(shù)組中。

8 . 導(dǎo)入并添加所有的提供器（providers）到 src/app/app.module.ts 文件中的 providers 數(shù)組中.

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

10 . 組件內(nèi)與模版相關(guān)的變量，修改 private 關(guān)鍵字為 public。

注意: 想要知道為什么這樣修改 戳這里.

11 . 修改模版中的 為 。

注意: 這個(gè)在版本更新說(shuō)明中說(shuō)的很清楚，務(wù)必修改。

12 . 為原有的顏色標(biāo)記增加 color 屬性 :

修改為 .

注意: 增加渲染效率，務(wù)必修改。

13 . 將Ionic的相關(guān)配置移動(dòng)到 app.module.ts 文件中的 IonicModule.forRoot里 . 例如, IonicModule.forRoot(MyApp, {configObject}).

14 . 將你 beta 應(yīng)用中的 sass 樣式屬性移動(dòng)到 app.variables 文件中.

15 . 為你的每一個(gè)頁(yè)面增加selector. 這是為了定義和區(qū)分sass的作用域。例如sass文件中的:

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

注意: 如果用構(gòu)建命令生成的頁(yè)面，selector已經(jīng)幫你添加好了。

修改現(xiàn)有的項(xiàng)目

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

    npm --version

如果你當(dāng)前的版本不是 3.x 以上，請(qǐng)先去安裝最新的 Node.js。

然后更新 npm：

    npm install npm@latest -g

注意：目前最新版本為 _3.10.8_?，但是很多人都遇到了 uid must be an unsigned int的問(wèn)題，所以我后退了2個(gè)版本安裝：

    npm install [email protected] -g

2 . 安裝最新的 Ionic CLI:

    npm install -g ionic

注意： 如果你之前安裝了 beta 版本的 cli，你應(yīng)該先運(yùn)行 npm uninstall -g ionic 卸載掉然后再進(jìn)行安裝. 安裝完成后運(yùn)行 ionic -v 來(lái)檢查，確保你的 cli 版本為 2.1.0 。

3 . 參照 ionic2-app-base package.json 更新 package.json 中的 dependencies 和 devDependencies , 然后在項(xiàng)目文件夾中運(yùn)行 npm install.

4 . 復(fù)制 ionic2-app-base package.json 中的 npm scripts 到 package.json 文件中.

5 . 刪除 gulpfile.js.

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

7 . 在 src 文件夾中創(chuàng)建一個(gè)新的 app 文件夾.

8 . 將 app.html 和 app.ts 文件移動(dòng)到 src/app 中.

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

10 . 用 ionic2-starter-blank 中的內(nèi)容創(chuàng)建 app.module.ts 文件.

11 . 移動(dòng) app.component.ts 文件中 ionicBootstrap里所有的 providers 到 app.module.ts文件中. imports 也同樣復(fù)制過(guò)去.

12 . 導(dǎo)入并添加你的自定義組件到 src/app/app.module.ts 文件中的 declarations 里。

13 . 將Ionic的相關(guān)配置移動(dòng)到 app.module.ts 文件中的 IonicModule.forRoot里 . 例如, IonicModule.forRoot(MyApp, {configObject}).

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

15 . 導(dǎo)出 app.component.ts 中的主應(yīng)用類，然后重命名app.module.ts中所有的引用 MyApp 到你的主應(yīng)用類 (或者重命名導(dǎo)出 app.component.ts 中的 MyApp).

16 . 修正 app.component.ts 中所有的路徑為當(dāng)前路徑. 例如, ./pages 變成 ../pages.

17 . 在 app.module.ts 中定義你的頁(yè)面類. 比如 HomePage, 所有的pages應(yīng)該被包括在這里.

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

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

20 . 移動(dòng) www/index.html 到 src/index.html 參照 ionic2-app-base, 確保你后添加的內(nèi)容也移動(dòng)過(guò)去.

21 . 移動(dòng) www/assets 到 src/assets.

22 . 移動(dòng) www/img 到 src/assets/img.

23 . 移動(dòng)你的其余資源從 www/ 到 src/assets/.

24 . 重定義所有的 templateUrl 路徑，只保留 .ts 文件名. 比如 app.component.ts 文件中連接應(yīng)該從build/app.html 修改為 app.html 頁(yè)面文件 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 . 移動(dòng) Sass 文件從 app/theme 到 src/app. 比如 app.core.scss, app.ios.scss 等等.

30 . 將你定義的sass屬性移動(dòng)到 theme/variables.scss 文件.

31 . 修正你的圖片路徑. 例如, 之前是 現(xiàn)在應(yīng)該是 .

32 . 組件內(nèi)與模版相關(guān)的變量，修改 private 關(guān)鍵字為 public。

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

33 . 修改模版中的

為 。

    **`注意`**: 這個(gè)在版本更新說(shuō)明中說(shuō)的很清楚，務(wù)必修改。

34 . 為原有的顏色標(biāo)記增加 color 屬性 :

修改為 .

    **`注意`**: 增加渲染效率，務(wù)必修改。

35 . 添加適當(dāng)?shù)膱D標(biāo)屬性, 如果圖標(biāo)在左側(cè)應(yīng)該添加 icon-left, 在右側(cè)則添加 icon-right, 如果按鈕中只有圖標(biāo), 則應(yīng)該添加 icon-only 屬性.

36 . 為你的每一個(gè)頁(yè)面增加selector. 這是為了定義和區(qū)分sass的作用域。例如sass文件中的:
模版中:

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

組件中:

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

其他

RC0 版本棄用了 Typings 而改為使用 @types，對(duì)第三方庫(kù)更為友好，在 /src 目錄下添加了declarations.d.ts文件 可以更方便的自己添加所需的 declare。
之前的組件同樣也有變更之處，這個(gè)就參考官方Components文檔對(duì)照查看就能夠解決。
建議通讀 Ionic RC0 的CHANGELOG,會(huì)更好的理解這次更新中的變動(dòng)。