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,会更好的明白此次更新中的更改。