Ionic 5 is here with amazing improvements. Read more in https://ionicframework.com/blog/announcing-ionic-5/.
This release includes the update of the template to Ionic 5.0.0.
Ionic 5 introduced some minor breaking changes. The following are the changes that affected this starter app:
The list header has been redesigned to match the latest iOS spec so now any text content inside of an
<ion-list-header> should be wrapped in an
<ion-label> in order to get the proper styling of the new design.
CSS Utilities: Ionic 5 changes the CSS attributes from its components to CSS classes. For example:
Before<ion-header text-center></ion-header><ion-content padding></ion-content><ion-label text-wrap></ion-label><ion-item wrap></ion-item>After<ion-header class="ion-text-center"></ion-header><ion-content class="ion-padding"></ion-content><ion-label class="ion-text-wrap"></ion-label><ion-item class="ion-wrap"></ion-item>
Mode is now cascaded from the parent to the child component and that affected our
ImageShellComponent mode property so we renamed it to display.
You need to do a find and replace looking for [mode] and replacing it for [display]. Example:
Before<app-image-shell animation="spinner" [mode]="'cover'" [src]="">...</app-image-shell>After<app-image-shell animation="spinner" [display]="'cover'" [src]="">...</app-image-shell>
Segment component was completely revamped to use the new iOS design including an all new gesture that applies for both Material Design and iOS. Due to these changes we updated Friends Segment (you can find it under Profile section).
Before<ion-menu>...</ion-menu><ion-content main>...</ion-content>After<ion-menu content-id="main"></ion-menu><ion-content id="main">...</ion-content>
Check this post to see all improvements introduced in Ionic 5.
Bug fixes and improvements:
Change tabs and most menu icons for the new Ionicons (instead of using custom icons).
Renamed some files from assets folder.
Deleted unnecessary imports of
IonicModule.forRoot(), we should only call
IonicModule.forRoot() once in our main app module.
Changes all references to
.plt-mobile.md for just
.md. Same for
Updated Android target version to API 29.
Fixed active color in counter input component
For Capacitor projects:
Updated Capacitor to 1.5.0
Updated iOS and Android projects to latest versions.
For Cordova projects:
Update Web View Cordova Plugin to latest version. Check https://github.com/ionic-team/cordova-plugin-ionic-webview#migrating-to-4x
Update firebase library version to
"firebase": "^7.2.3" because it was causing some errors with the new node LTS version.
Update project to Angular 8.2.1 and to Ionic 4.7.4
To update your existing project to Angular 8 you need to follow these steps:
$ npx ng update @angular/core @angular/cli
Also, we had to run the following commands to apply the migration changes:
$ npx ng update @angular/core$ npx ng update --allow-dirty @angular/core --from 7 --to --migrate-only
$ ng update @angular/cli --allow-dirty$ ng update @angular/cli --allow-dirty --from 7 --to 8 --migrate-only
Today we are releasing a new product variant with more features and screens than the current BASIC version. The new features include:
Firebase CRUD & filters
simple and advanced queries
advanced usage of rxjs
Maps & geolocation
Currently, we only released the PRO version with Capacitor, while in the BASIC version you can choose to use Capacitor or Cordova (there are 2 separate projects). However, if you feel that you aren't ready for Capacitor, we explain how to remove it from your project and switch to Cordova.
Because the PRO version has plugins integrations, we had to choose a path and we chose Capacitor because we really think is the future of Native Cross-platform Web Apps. You can learn more about capacitor in our guide. However, if you don't feel comfortable using Capacitor, you are free to remove it and add Cordova.
If you have any question regarding this or need help removing Capacitor and adding Cordova please ask for help.
Restructured the App Shell section from the Showcase to provide more examples and use cases. You can check the live demo in https://ion4fullpwa.firebaseapp.com/showcase/app-shell
We added examples of data binding for common use cases such as:
We added an optional project configured with Capacitor instead of Cordova. You are free to choose which one you want to use. Learn more about capacitor.
Based on the feedback from our clients, we improved and simplified the ShellProvider component. Also we added more examples to the showcase section such as retrieving dynamic data from an API. If you need more examples please contact us.
The new Shell solution relies in data stores and data sources.
Has a Subject (named timeline) which holds a reference to the state emitted by the DataSource.
It has a mechanism to append a Shell (empty model with skeleton components) before the DataSource emits the real data.
State management can become a though task thus why we relay heavily in rxjs to handle the states. If you don't have experience in rxjs I strongly recommend you to read https://www.learnrxjs.io/
DataSource is a simple Observable to get your data.
Renamed ShellProvider class to DataStore
Shell configs are now located in
src/assets/config and not in
Page components have a more straight forward way to access route resolved data. This reduced considerable the amount of boilerplate with the new implementation of the DataStore.
You need to update the Services and Resolvers to match the new implementation of the DataStore.
This new implementation is much more flexible than the previous one enabling you much more use cases for the Shell feature. You can new examples in the Showcase section.
Shell elements such as Image shell and text shell are now located inside the shell folder but they remained the same without any modification.
Removed husky pre commit lint and commit messages from package.json and defined them in a separated file .huskyrc.json. If you don't want to use this you can remove it.
Some users reported the following error message when building the app:
Failed to construct 'HTMLElement': Please use the 'new' operator
We solved it doing what is explained here.
Food category now shows a different details page for each restaurant.
Update project dependencies
<app-image-shell> components. Added new animations options and simplified it’s usage. (Also added new demos in the showcase section)
(text-shell): change 'masked' for 'gradient' animation name
(image-shell): now supports standalone mode (without aspect-ratio wrapper)
As a consequence of the previous upgrade, we updated the text-shell and image-shell references across the project (these are minimal changes).
(image-shell): spinner animation is now a property (animation=”spinner”) not a class (class=”add-spinner”)
Fix status bar issue on iPhoneX
src/app/side-menu/styles/side-menu.scss have minimal changes
Update npm Dependencies
[@angular/cli] 7.2.3 -> 7.3.6
ng update @angular/cli
[@angular/core] 7.2.2 -> 7.2.9
ng update @angular/core
[rxjs] 6.3.3 -> 6.4.0
ng update rxjs
[ionic] 4.10.2 -> 4.12.0
npm i -g ionic (Remember the Ionic CLI is a global npm package)
[@ionic/angular] 4.0.0 -> 4.1.1
npm install @ionic/angular --save
Removed deprecated deps (
@ionic/schematics-angular) in favor of
@ionic/angular-toolkit (see: https://github.com/ionic-team/starters/pull/487#issue-220835980)
npm uninstall @ionic/ng-toolkit
npm uninstall @ionic/schematics-angular
add splash screen and icons for the PWA
move global app styles to separate file:
fix styles for walkthrough on multiple devices (now it's responsive)
improved code readability by isolating usage of custom CSS variables from Ionic UI Components CSS Custom Properties. Now every stylesheet has the following structure:
improved code readability by extracting page, shell, responsive and platform specific styles to different files. The new structure looks like this:
added more examples to the showcase section
First release 🎉