从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 . 修改模版中的 为 。

注意: 这个在版本更新说明中说的很清楚，务必修改。

12 . 为原有的颜色标记增加 color 属性 :

修改为 .

注意: 增加渲染效率，务必修改。

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 . 修正你的图片路径. 例如, 之前是 现在应该是 .

32 . 组件内与模版相关的变量，修改 private 关键字为 public。

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

33 . 修改模版中的

为 。

    **`注意`**: 这个在版本更新说明中说的很清楚，务必修改。

34 . 为原有的颜色标记增加 color 属性 :

修改为 .

    **`注意`**: 增加渲染效率，务必修改。

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