2.0.0 - 2020-02-14 (BASIC and PRO versions) 🎉

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).

• ​There were some changes on Menu component. Ionic 5 removed the main attribute and introduced contentId instead.

  • The same applies to Split Pane component.

  Example for <ion-menu>:

Before
​
<ion-menu>...</ion-menu>
<ion-content main>...</ion-content>
​
After
​
<ion-menu content-id="main"></ion-menu>
<ion-content id="main">...</ion-content>

• ​Ionicons 5.0: some icons changed their name and others were removed. Check the list.

• ​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 .plt-mobile.ios

• 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​

1.2.1 - 2019-11-05 (PRO version)

• Fixed typos

• Update firebase library version to "firebase": "^7.2.3" because it was causing some errors with the new node LTS version.

1.2.0 - 2019-08-12

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:

1. Update @ionic/angular and @ionic/angular-toolkit to the latest releases:

   $ npm install @ionic/[email protected]
   $ npm install @ionic/[email protected] -D

2. Update @angular/core and @angular/cli:

   $ npx ng update @angular/core @angular/cli

3. Update @angular-devkit dependencies:

   $ npm i @angular-devkit/[email protected] @angular-devkit/[email protected] @angular-devkit/[email protected] @angular-devkit/[email protected]

4. 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

2019-06-24 - New product variant release: PRO VERSION

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

  • related models

  • advanced usage of rxjs

  • Firestore database

• Maps & geolocation

• Video playlist

• Multi language

• Capacitor plugins

About Capacitor

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.

​

1.1.1 - 2019-06-21

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:

• ​Infinite scroll ​

• ​Pagination​

• ​Multiple data sources​

• ​Dependant data sources​

1.1.0 - 2019-06-13

Want to use Capacitor?

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.​

Improved App Shell solution 🎉

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.

DataStore

• 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.

What changed from the previous implementation of the App Shell?‌

• Renamed ShellProvider class to DataStore

• Renamed utils/shell-provider.ts to shell/data-store.ts

• Shell configs are now located in src/assets/config and not in src/environments.

• 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.

1.0.3 - 2019-05-09

• Refactor

  • 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.​

• Bug fixing

  • 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.

• New features

  • Food category now shows a different details page for each restaurant.

• Update project dependencies

1.0.2 - 2019-03-18

• App Shell

  • Upgrade <app-text-shell> and <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”)

• Side Menu

  • Fix status bar issue on iPhoneX

    • src/app/app.component.html and 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/ng-toolkit, @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

1.0.1 - 2019-02-28

• add splash screen and icons for the PWA

• move global app styles to separate file:src/theme/app-defaults.scss

• 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:

• code cleaning

• added more examples to the showcase section

1.0.0 - 2019-02-22

• First release 🎉

​