从Ionic2 beta更新到Ionic2 RC0的正确姿势

2024年3月2日 188次阅读 来源: DemoPark

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

    原文作者：DemoPark
    原文地址: https://segmentfault.com/a/1190000004091980
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞