Ionic2 series-upgrade beta to RC1 and ionic2 series betarc1

Ionic2 series-upgrade beta to RC1 and ionic2 series betarc1

Before the National Day, Ionic2 released the RC0 version, which is close to the official version. Angular2 and TypeScript2 have also released the official version. For details, refer to the official blog:

Http://blog.ionic.io/announcing-the-ionic-2-release-candidate/

This upgrade improves performance and introduces some new features of Angular2, such as @ NgModule and AoT compilation (Ahead of Time). The project structure has also changed. Therefore, it takes a little time to upgrade the beta project to RC0, Which is worthwhile compared to the performance improvement.

AoT can pre-compile the template in the build phase. Both the startup speed and page switching speed are improved. The official website provides a comparison between beta11 and RC0:

As you can see, the RC0 version with AoT enabled has greatly improved the startup speed, and the homepage loading speed is much faster than that with beta11.

In addition, the RC0 build method has also changed. RC0 abandoned webpack and used Rollup. You no longer need to install Gulp to manage tasks. npm scrip is used for packaging. However, there is no change in developer usage. You can use the Ionic serve command, but the output content has changed. With this build method, the custom packaging script is also easy to configure. For details, refer to the Github Project address: https://github.com/driftyco/ionic-app-scripts.

 

The changes in the project structure mainly refer to the introduction of @ NgModule, and the source code is moved from the app directory to the src directory. The pages and providers directories are not changed.

 

For developers who have been following the beta version, they may have encountered different API usage in different versions, and some may have changed, such as the usage of components such as Alert, displays a version of Alert that calls the method of Alert. Some versions call the method of AlertController. RC0 also stabilized API usage and should not change significantly.

 

In terms of the compilation mode, before beta version, you must enable the production mode of Angular2 by yourself. RC0 is much simpler. The project template already provides the dev mode and prod mode, the dev mode is used for debugging using the ionic serve command. When the build command is used, it will automatically switch to the prod mode, which is very convenient. The size of js files compiled in prod mode is greatly reduced, and the startup speed is much faster.

 

Other changes, such:

1. Rename the lifecycle event name:

Changed the ionViewLoaded event to ionViewDidLoad.

The IonViewDidUnload event is removed.

Remove the fireOtherLifecycles event from ViewController

2. Transfer Storage from ionic-angular to a separate module -- ionic-storage. If this component is used, modify package. json and then npm install.

3. modified the usage of color:

You cannot directly add a color to a component. You must change the color to an attribute. You can use this method before:

<Ion-tabs primary>

Now we want to change it to this:

<Ion-tabs color = "primary">

Affected components include:

• Badge
• Button
• Checkbox
• Chip
• FAB
• Icon
• Item (Item, Item Divider, List Header)
• Label
• Navbar
• Radio
• Searchbar
• Segment
• Spinner
• Tabs
• Toggle
• Toolbar
• Typography (headers, paragraphs, spans, etc .)

4. modified the declaration method of the button component. <button> to change it to <button ion-button> and <a button> to <a ion-button>; the declaration method of the Icon Button has also changed.

5. the CSS introduction method has also changed. In the past, css of the three platforms was introduced and loaded dynamically by ionic. Now, you only need one of the following lines:

<Link href = "build/main.css" rel = "stylesheet">

......

I think RC0 can be applied in practice. In the past few days, I have upgraded a project to RC0. But when I wrote this blog, I just found that Ionic2 released RC1 in 10.13, which fixed the bug that the Modal component could not trigger the ionViewDidLoad event. I have encountered this bug. It seems that the official version is very close. Of course, RC0 to RC1 is relatively simple, mainly because beta11 to RC is greatly changed. The upgrade procedure is as follows:

 

According to official instructions, there are two upgrade Methods: one is to create a new project and copy the code of the beta version; the other is to directly modify the code based on the beta project. The first method is recommended, because the RC project structure changes greatly, it is best to create a new one.

 

This completes the process from beta to RC.

FAQs:

During the process of building to Android, an error is reported:

Unsupported major. minor version 52.0

This is because Ionic2RC does not support JDK1.7. You need to upgrade to jdk1.8.

In general, upgrading to RC is worthwhile. When you use the ionic serve command, Angular adopts the dev mode:

When using the ionic build android command, you can see that the production mode is changed to prod:

In this way, the startup speed after compilation is greatly improved.

The above content mainly refers to the official upgrade documentation and translates the main content. If you have any questions about upgrade, please leave a message to discuss.

Official upgrade address: https://github.com/driftyco/ionic/blob/master/CHANGELOG.md