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 🎉