从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,会更好的理解此次更新中的变更。