🧐
Changelog
Product Updates Changelog
- 6.0.0 BASIC
- 6.0.0 PRO
- 0.2.0 ELITE
This update affects four of our products: Ionic 6 Full Starter App BASIC, PRO and ELITE versions, and Deluxe Angular Bundle (that includes Ionic 6 Full Starter App PRO).
Just to make sure you downloaded the latest version of the templates, here are the updated names of these files:
- ionic-6-full-starter-app-BASIC-version-6.0.0.zip
- ionic-6-full-starter-app-PRO-version-6.0.0.zip
- ionic-6-full-starter-app-ELITE-version-0.2.0.zip
- deluxe-angular-bundle_02-2023.zip
Fresh start
In case you are starting your project from the ground up using this template, just re-download the code, extract the zip, open a terminal and run npm install.
That's it, then you can build and run your Ionic app and start changing the template to fit your needs.
Existing project
If you already started building your app using this template and don't want to re-download all the code, you will need to apply the following changes into your existing project. If you have any issues, please contact us.
To ease the update process, as requested by many of you, we published a visual comparison tool so you can easily see what changed from the last version of the template file by file.
BASIC version DIFF
PRO version DIFF
ELITE version DIFF
- Update to latest Capacitor 4
- Update to Ionic 6.5.0
- Update to Angular 15
- Update Capacitor plugins
- Update project dependencies
- Improve the Firebase auth implementation
- Update Capacitor Preferences plugin
The plugin changed its name (previously known as Storage) but maintained the same API
- Add Capacitor Preferences plugin
To show the walkthrough component just the first time the user interacts with the app
- Update CapacitorHttp plugin
Same API, changed library maintainer
- Add Capacitor Preferences plugin
To show the walkthrough component just the first time the user interacts with the app
- Remove Bootstrap dependency
I added a
custom-progress-bar
directive that works on top of the Ionic progress bar component and adds chart progress bar visualization features.Compared to previous upgrades, the breaking changes between Capacitor 3 and 4 are fairly minimal.
The upgrade is straightforward and you can rely on the Capacitor CLI to handle the migration for you.
- Install the latest version of the Capacitor CLI to your project
npm i -D @capacitor/cli@latest
- Use the CLI to perform the migration
npx cap migrate
The migration should be smooth, and all the steps required both for iOS and Android are handled by the CLI. However, you can check both iOS and Android specific migration steps here:
The update is really simple, just run these commands:
- Update to Ionic 6.5.0
ng update @ionic/[email protected] @ionic/[email protected] --create-commits
- Update Ionic dev dependencies
ng update @ionic/angular-toolkit @ionic/cli --create-commits
- Before starting the update, make sure the Angular CLI is up to date
npm install -g @angular/cli
You may need to update your Node.js version
- Before upgrading to Angular 15, we first need to upgrade from Angular 13 to Angular 14
ng update @angular-eslint/schematics@14 @angular/core@14 @angular/cli@14 --create-commits
- PRO and ELITE versions also need to update Server Side Rendering libraries
ng update @nguniversal/express-engine@14 @nguniversal/builders@14 --create-commits
- ELITE version also needs to update Angular CDK library
ng update @angular/cdk@14 --create-commits
- Upgrade to Angular 15
ng update @angular/fire @angular-eslint/schematics@15 @angular/core@15 @angular/cli@15 --create-commits
- PRO and ELITE versions also need to update Server Side Rendering libraries
ng update @nguniversal/express-engine@15 @nguniversal/builders@15 --create-commits
- ELITE version also needs to update Angular CDK library
ng update @angular/cdk@15 --create-commits
- In order to continue using the CLI generators (both Angular and Ionic), please remember to add the correct schematics to the
angular.json
file:
...
"cli": {
"schematicCollections": [
"@ionic/angular-toolkit",
"@angular-eslint/schematics"
]
},
...
Most of the Capacitor plugins were updated when running the migration tool in the Capacitor 4 update procedure described above.
However, you can check if there are pending updates of the different plugins by running this command:
npx cap doctor
This plugin is only part of the ELITE version
This plugin was part of the Capacitor Community plugins repository, but now is part of the official plugins
@capacitor/core
Just uninstall the old plugin:
npm uninstall --save @capacitor-community/http
The Capacitor community plugins need to be updated manually.
npm install --save @capacitor-firebase/[email protected]
Make sure you run this command after updating the Capacitor plugins
npx cap sync
First check outdated dependencies by running this command:
npm outdated --depth=0 --long
Keep in mind that sometimes although there's new versions of some libraries, we cannot update them because other libraries depend on older versions or they don't support the latest versions yet.
We are constantly checking this and we strive to keep the templates up to date always.
npm install --save firebase
npm install --save core-js
npm install --save dayjs
npm install --save google-libphonenumber
npm install --save [email protected]
npm install --save swiper
npm install --save tslib
npm install --save zone.js
PRO and ELITE dependencies
npm install --save @videogular/ngx-videogular@7
npm install --save date-fns
npm install --save express
ELITE dependencies
npm install --save @swimlane/[email protected]
npm install --save-dev @commitlint/cli @commitlint/config-angular
npm install --save-dev @types/node
npm install --save-dev @webcomponents/webcomponentsjs
npm install --save-dev ts-node
PRO and ELITE dev dependencies
npm install --save-dev @types/express
Also, I performed an audit fix to clean warning messages:
npm audit fix
createSignInResult()
method on thefirebase-auth.service.ts
overrides theproviderId
to 'firebase'.
The solution was to use
user.providerData.providerId
instead of user.providerId
.photoUrl
fromfirebase-auth.service.ts
don't get updated.
After performing the Firebase authentication for the first time with the different auth providers (Google, Facebook, Twitter, Apple, etc), we get back a profile image from the provider. It then gets stored in Firebase so the next time we authenticate we get this image directly from Firebase instead of the auth provider.
It may happen that in the period of time between the first authentication ever occurred and now, the user updated their profile image in the auth provider (Google, Facebook, Twitter, Apple, etc).
If we want to always keep the profile image up to date, we should update the user stored in Firebase after each authentication.
This features is not included in the template but you can learn more here: https://firebase.google.com/docs/auth/admin/manage-users#update_a_user
- Firebase Auth Helper
I added a new
FirebaseAuthHelper
service to improve code readability and improve separation of concerns.I also added the ability to add auth scopes to the authentication feature.
This is an old bug that unfortunately keeps showing up in Ionic
- 0.0.1 ELITE Release 🥳
- 5.0.0 BASIC
- 5.0.0 PRO
This update affects three of our products: Ionic 6 Full Starter App BASIC and PRO versions, and Deluxe Angular Bundle (that includes Ionic 6 Full Starter App PRO).
Just to make sure you downloaded the latest version of the templates, here are the updated names of these files:
- ionic-6-full-starter-app-BASIC-version-5.0.0.zip
- ionic-6-full-starter-app-PRO-version-5.0.0.zip
- deluxe-angular-bundle_06-2022.zip
In case you are starting your project from the ground up using this template, just re-download the code, extract the zip, open a terminal and run
npm install
.That's it, then you can build and run your Ionic app and start changing the template to fit your needs.
If you already started building your app using this template and don't want to re-download all the code, you will need to apply the following changes into your existing project. If you have any issues, please contact us.
To ease the update process, as requested by many of you, we published a visual comparison tool so you can easily see what changed from the last version of the template file by file.
- Update to latest modular Firebase v9
- Update @angular/fire implementation to match new Firebase 9 API
- Replaced Firebase Capacitor plugin with an improved one that supports the latest Firebase features
- Update underlying platforms (Android Studio, XCode)
- Update Capacitor plugins
- Update to Ionic 6.1.x
- Updated the
ion-slides
with the newSwiper.js
implementation
- Update project dependencies
- Add visual comparison tool to help migrate from previous versions of the template
The Capacitor plugin we were using to interact with the native Firebase SDK was getting behind in terms of support (
baumblatt/capacitor-firebase-auth
). It was not compatible with the latest version of Firebase v9 and when users updated their dependencies on local installations of our templates they were experiencing build errors on both iOS and Android.In order to get rid of these issues and take advantage of the new modular Firebase library, we decided to change the underlying Capacitor Firebase plugin we were using.
Tasks to be done:
Capacitor is a bit different compared to Cordova. It doesn’t compile the platform (ios, android) everytime a build is made. Capacitor compiles the platforms once, and further changes can be simply copied into the platforms using
npx cap sync
.Plugins are installed as
npm
or yarn
packages in Capacitor.To remove them, run
npm uninstall --save capacitor-firebase-auth
.This will remove the package from
node_modules
and also update the package.json
. You will also need to undo specific plugin configurations on the different platforms to completely uninstall the plugin.Most of the configurations remain the same from the old Capacitor Firebase plugin to the new one, as they use the same social auth providers native SDKs (Facebook and Google).
Please check the visual comparison tool to help you migrate the plugin configuration.
npm install --save @capacitor-firebase/[email protected]
npm install --save firebase@9
- Update
@angular/fire
library
ng update @angular/fire
- Adjust the Firebase implementation in the template
Please check the visual comparison tool to help you with the migration.
I also perform some updates on the underlying platform artifacts.
These updates may not be necessary for you. I just like to keep the tech stack updated.
I upgraded
Gradle
after the Android Studio suggestion.Previous
Gradle
version was 4.2.2
and now it's 7.2.0
.This caused some issues, I added some references in case you find them useful:
The RepositoryHandler.jcenter() method has been deprecated.
I also enabled Gradle warnings before solving the issue to get more info on what was happening.
Also, in the process of upgrading
Gradle
some references broke up:android gradle plugin requires java 11 to run. you are currently using java 1.8
The root of this issue seems to be that the terminal uses a different
JAVA_HOME
path than the one that uses Android Studio. So you may face this issue when running your Android Capacitor app from the terminal.Adding this line to the
gradle.properties
file fixed the issue:org.gradle.java.home=/Applications/Android Studio.app/Contents/jre/Contents/Home
These posts helped me find the issue:
For iOS I just updated CocoaPods by running
sudo gem install cocoapods
I updated all Capacitor dependencies and plugins by running these commands:
npx cap doctor
npm install --save @capacitor/core@latest
npm install --save @capacitor/ios@latest
npm install --save @capacitor/android@latest
npm install --save @capacitor-firebase/[email protected]
npm install --save @capacitor/[email protected]
npm install --save @capacitor/[email protected]
npm install --save @capacitor/[email protected]
npm install --save @capacitor/[email protected]
npm install --save @capacitor/[email protected]
npm install --save @capacitor/[email protected]
npm install --save @capacitor/[email protected]
npm install --save-dev @capacitor/cli@latest
Only for BASIC version
npm install --save @capacitor/[email protected]
In order to update Ionic to the latest version (6.1.x), run the following commands:
npm install --save @ionic/angular@6
npm install --save @ionic/angular-server@6
Also, I performed an audit fix to clean warning messages:
npm audit fix
npm install --save-dev @ionic/[email protected]
And finally, I checked all the outdated libraries:
npm outdated --depth=0 --long
And proceeded to update them:
npm install --save dayjs@latest
npm install --save google-libphonenumber@latest
npm install --save firebase@9
npm install --save-dev @typescript-eslint/eslint-plugin@5
npm install --save-dev @typescript-eslint/parser@5
npm install --save-dev eslint@8
npm install --save-dev @commitlint/cli@latest
npm install --save-dev @commitlint/config-angular@latest
Be careful when updating libraries as they may have breaking changes. I always check the GitHub or npm repository to make sure they are still compatible with the project codebase.
With the release of Ionic v6, the
ion-slides
and ion-slide
components have been deprecated in favor of using the official framework integrations provided by Swiper
.Since the underlying technology that powers your slides is the same, the migration process is easy!
Install the new dependency:
npm install --save swiper
Import the new module:
import { SwiperModule } from 'swiper/angular';
@NgModule({
imports: [..., SwiperModule]
});
...y
Update the imports in your component:
import { Component } from '@angular/core';
import SwiperCore, { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
SwiperCore.use([Autoplay, Keyboard, Pagination, Scrollbar, Zoom]);
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage {
...
}
Remove
<ion-slides>
and <ion-slide>
in favor of the new <swiper>
component:<ion-content>
<swiper [autoplay]="true" [keyboard]="true" [pagination]="true" [scrollbar]="true" [zoom]="true">
<ng-template swiperSlide>Slide 1</ng-template>
<ng-template swiperSlide>Slide 2</ng-template>
<ng-template swiperSlide>Slide 3</ng-template>
</swiper>
</ion-content>
In some cases you may need to update the implementation of some events of the Swiper component.
Please read the official Swiper documentation, the list of available parameters to configure it, the different methods and properties, and a complete list of events available.
Regarding
RxJs
, both the subscribe method and tap operator changed their signature a bit in favor of having just one argument instead of three (onNext, onError, onComplete).This is a minor change and very easy to update. Please read the official documentation about the deprecation warning.
All signatures of subscribe that take more than 1 argument have been deprecated.
For example signatures that just pass the complete callback:
import { of } from 'rxjs';
// deprecated
of([1,2,3]).subscribe(null, null, console.info); // difficult to read
// suggested change
of([1,2,3]).subscribe({complete: console.info});
Signatures for solely passing the error callback:
import { throwError } from 'rxjs';
// deprecated
throwError('I am an error').subscribe(null, console.error);
// suggested change
throwError('I am an error').subscribe({error: console.error});
And in general it is recommended only to use the anonymous function if you only specify the next callback otherwise we recommend to pass an Observer:
import { of } from 'rxjs';
// recommended
of([1,2,3]).subscribe((v) => console.info(v));
// also recommended
of([1,2,3]).subscribe({
next: (v) => console.log(v),
error: (e) => console.error(e),
complete: () => console.info('complete')
});
Due to the default Chrome browser cookie settings in incognito mode, Firebase authentication using cookies is not working as expected.
- 4.0.0 BASIC
- 4.0.0 PRO
In case you re-download the code, you are ready to go, just run
npm install
and your Ionic app will be ready. If you already started building your app using this template and don't want to re-download all the code, you will need to apply the following changes into your existing project. If you have any issue, please contact us.
- Update to Ionic 6
- Update to Angular 13
- Update all project dependencies
- Added the new
ion-datetime
component (just in PRO version)
// update Angular
npx @angular/cli@13 update @angular/core@13 @angular/cli@13 --force
ng update @angular-eslint/schematics --allow-dirty
// update Ionic
npm install @ionic/angular@6
// update project dependencies
npm i rxjs@~6.6.6
npm i capacitor-firebase-auth@latest
npm i google-libphonenumber@latest
npm i @ionic/angular-toolkit@latest
// Update Capacitor
npm i @capacitor/core@latest @capacitor/android@latest @capacitor/app@latest @capacitor/geolocation@latest @capacitor/haptics@latest @capacitor/ios@latest @capacitor/status-bar@latest @capacitor/splash-screen@latest @capacitor/share@latest @capacitor/keyboard@latest
npm i eslint@latest
npm i dayjs@latest
npm i @webcomponents/webcomponentsjs@latest
npm i @types/node@latest
npm i @types/core-js@latest
npm audit fix
Copy or update the files
src/polyfills.ts
and src/zone-flags.ts
in your project.
// update Angular
npx @angular/cli@13 update @angular/core@13 @angular/cli@13 --force
ng update @angular-eslint/schematics --allow-dirty
// update Ionic
npm install @ionic/angular@6 @ionic/angular-server@6
// update project dependencies
npm i rxjs@~6.6.6
npm i capacitor-firebase-auth@latest
npm i @videogular/ngx-videogular@latest
npm i @ngx-translate/core@latest
npm i @nguniversal/express-engine@latest
npm i google-libphonenumber@latest
npm i @ionic/angular-toolkit@latest
// Update Capacitor
npm i @capacitor/core@latest @capacitor/android@latest @capacitor/app@latest @capacitor/geolocation@latest @capacitor/haptics@latest @capacitor/ios@latest @capacitor/status-bar@latest @capacitor/splash-screen@latest @capacitor/share@latest @capacitor/keyboard@latest
npm i express@latest
npm i eslint@latest
npm i dayjs@latest
npm i @webcomponents/webcomponentsjs@latest
npm i @types/node@latest
npm i @types/express@latest
npm i @types/core-js@latest
npm i @nguniversal/builders@latest
npm i @commitlint/cli@latest @commitlint/config-angular@latest
npm i @ngx-translate/http-loader@latest
npm i @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
npm i core-js@latest
npm i jetifier@latest
npm i rxjs@latest
npm i ts-node@latest
npm audit fix
Copy or update the files
src/polyfills.ts
and src/zone-flags.ts
in your project.Install the following library:
npm i date-fns
- 3.1.0 BASIC
- 3.0.0 PRO
We are happy to be releasing these new versions of the templates. Remember that you can re-download the code of the project from your IonicThemes' account.
In case you re-download the code, you are ready to go, just run
npm install
and your Ionic app will be ready. If you already started building your app using this template and don't want to re-download all the code, you will need to apply the following changes into your project in order to get the updates. If you have any issue, please contact us.
- Update to Angular 12
- Migrate project to ESLint
- Update to Capacitor 3🎉
- Update to Firebase 8
- Update all project dependencies
- Add Apple Sign In
- Fix walkthrough sliders bug
// update angular
ng update @angular/core @angular/cli --create-commits
// update dependecies
npm install @ionic/angular-toolkit@latest
npm install -g @angular/cli
npm install -g @angular-devkit/schematics-cli
npm install --save @angular/[email protected]
npm install --save @ionic/[email protected]
npm install --save [email protected]
npm install --save [email protected]
npm install --save [email protected]
npm install --save @types/[email protected]
npm install --save @ionic/[email protected]
npm install --save @types/[email protected]
npm install --save [email protected]
npm install --save @videogular/[email protected]
ng update @nguniversal/builders@12 --create-commits
ng update @nguniversal/express-engine@12 --create-commits
npm install --save-dev @commitlint/[email protected]
npm install --save-dev @commitlint/[email protected]
npm install --save-dev @types/[email protected]
Linting is the process of analyzing your code for bugs, warnings, style and consistency changes, and more. In early 2019, TSLint was officially deprecated and the community centered around ESLint as it’s replacement. Since then, there’s been a lot of development in ESLint in order to support TypeScript as well as Angular. Now, we finally have TypeScript-ESLint and Angular-ESLint.
In order to migrate our existing project we run the following commands:
ng add @angular-eslint/schematics
ng g @angular-eslint/schematics:convert-tslint-to-eslint
The migration command will create a new
.eslintrc.json
file. Go to this file and add the following code inside the rules
object..eslintrc.json
"rules": {
"@angular-eslint/component-class-suffix": [
"error",
{
"suffixes": ["Page", "Component"]
}
],
...
}
After running these commands and trying to commit these changes, the linter showed the following syntax errors that we had to fix.
- Change '==' for '===' and '!=' for '!=='
- Erase an unnecessary coma in the angular.json file, closing the
app
object - Add an
app
prefix to theforms-validations-page
andforms-filters-page
components selectors. - Add a
Page
orComponent
suffix to thePageNotFound
component.
In order to update Firebase run:
npm install [email protected] --save
To support Firebase 8, there are some minor changes that you need to make in
FirebaseAuthService
src/app/firebase/auth/firebase-auth.service.ts
// BEFORE
import { User, auth } from 'firebase/app';
// NOW
import firebase from 'firebase/app';
// BEFORE
currentUser: User;
// NOW
currentUser: firebase.User;
// BEFORE
auth.UserCredential
// NOW
firebase.auth.UserCredential
The ion-slides had this bug. In order to fix it we added the following line inside the
ngAfterViewInit
from the WalkthroughPage
this.slides.ionSlidesDidLoad.subscribe(() => this.slides.update());
We are happy to release this version of the template with Capacitor 3. It brings crucial updates to the ecosystem and exciting new features. 🎉You can read the full announcement here.
To update this project we carefully following the Capacitor Migration guide. So you should do the same.
Our migration process was flawless and we didn't have any problems, so don't be afraid! If you have any issue, please contact us.
Apple sign in doesn't work on android devices if you are using Capacitor 2. However, it does work in Capacitor 3.
- 2.3.0 PRO
Libraries Updates:
- Update to Angular 11
- Update to @ionic/angular latest version (5.6.0)
- Run:
npm install --save @ionic/angular@latest @ionic/angular-toolkit@latest
- Update to Capacitor latest version (2.4.6)