从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/providerssrc/providers, 过滤器文件从 app/pipessrc/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, pipesdirectives属性.

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 scriptspackage.json 文件中.

5 . 删除 gulpfile.js.

6 . 重命名 app 文件夹为 src.

7 . 在 src 文件夹中建立一个新的 app 文件夹.

8 . 将 app.htmlapp.ts 文件挪动到 src/app 中.

9 . 重命名 app.tsapp.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.tsmain.prod.ts 文件到 app/.

20 . 挪动 www/index.htmlsrc/index.html 参照 ionic2-app-base, 确保你后增添的内容也挪动过去.

21 . 挪动 www/assetssrc/assets.

22 . 挪动 www/imgsrc/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.scsssrc/theme/variables.scss.

29 . 挪动 Sass 文件从 app/themesrc/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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞