Ionic 6 Full Starter App
IonicThemesBuy NOWLive Preview
Search
⌃K
Links
🧐

Changelog

Product Updates Changelog

[2023-02-01] - Update

  • 6.0.0 BASIC
  • 6.0.0 PRO
  • 0.2.0 ELITE
You can download the updated source code of the project from your IonicThemes' account.
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
​

Updates

  • 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

Updates just for the BASIC version

  • Update Capacitor Preferences plugin
The plugin changed its name (previously known as Storage) but maintained the same API

Updates just for the PRO version

  • Add Capacitor Preferences plugin
To show the walkthrough component just the first time the user interacts with the app

Updates just for the ELITE version

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

Capacitor 4 update

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/[email protected]
  • 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:

Ionic 6.5.0 update

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

Angular 15 update

  • 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/[email protected] @angular/[email protected] @angular/[email protected] --create-commits
  • PRO and ELITE versions also need to update Server Side Rendering libraries
ng update @nguniversal/[email protected] @nguniversal/[email protected] --create-commits
  • ELITE version also needs to update Angular CDK library
ng update @angular/[email protected] --create-commits
  • Upgrade to Angular 15
ng update @angular/fire @angular-eslint/[email protected] @angular/[email protected] @angular/[email protected] --create-commits
  • PRO and ELITE versions also need to update Server Side Rendering libraries
ng update @nguniversal/[email protected] @nguniversal/[email protected] --create-commits
  • ELITE version also needs to update Angular CDK library
ng update @angular/[email protected] --create-commits

Gotchas

  • 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"
]
},
​
...

Other Capacitor plugins updates

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
Here’s the list of Capacitor plugins available and their latest versions.

CapacitorHttp

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

@capacitor-firebase/authentication

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

Other project dependencies updates

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.

Update dependencies

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/[email protected]
npm install --save date-fns
npm install --save express
ELITE dependencies
npm install --save @swimlane/[email protected]

Update dev dependencies

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

Audit fix

Also, I performed an audit fix to clean warning messages:
npm audit fix

Bug fixes

Firebase Auth issue

  • createSignInResult() method on the firebase-auth.service.ts overrides the providerId to 'firebase'.
The solution was to use user.providerData.providerId instead of user.providerId.
  • photoUrl from firebase-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.

Known issues

Angular Universal (Server Side Rendering)

This is an old bug that unfortunately keeps showing up in Ionic

[2022-11-23] - Update

  • 0.0.1 ELITE Release 🥳

[2022-06-21] - Update

  • 5.0.0 BASIC
  • 5.0.0 PRO
You can download the updated source code of the project from your IonicThemes' account.
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

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

Updates

  • 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 new Swiper.js implementation
  • Update project dependencies
  • Add visual comparison tool to help migrate from previous versions of the template

Firebase update

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 [email protected]
  • 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.

Platform updates

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.

Android

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 solved it by following this StackOverflow answer​
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:

iOS

For iOS I just updated CocoaPods by running sudo gem install cocoapods

Other Capacitor plugins updates

I updated all Capacitor dependencies and plugins by running these commands:
npx cap doctor
​
npm install --save @capacitor/[email protected]
npm install --save @capacitor/[email protected]
npm install --save @capacitor/[email protected]
Here’s the list of Capacitor plugins available and their latest versions.
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/[email protected]
Only for BASIC version
npm install --save @capacitor/[email protected]

Ionic updates

In order to update Ionic to the latest version (6.1.x), run the following commands:
npm install --save @ionic/[email protected]
npm install --save @ionic/[email protected]
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 [email protected]
npm install --save [email protected]
npm install --save [email protected]
npm install --save-dev @typescript-eslint/[email protected]
npm install --save-dev @typescript-eslint/[email protected]
npm install --save-dev [email protected]
npm install --save-dev @commitlint/[email protected]
npm install --save-dev @commitlint/[email protected]
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.

Ionic slides - Swiper update

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!
For more details, follow this guide.
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.

RxJs update

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')
});

Known issues

Firebase Auth is no longer working in Chrome incognito mode

Due to the default Chrome browser cookie settings in incognito mode, Firebase authentication using cookies is not working as expected.
​This issue has already been reported in the Firebase JS SDK GitHub page.

[2021-12-22] - Update

  • 4.0.0 BASIC
  • 4.0.0 PRO
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 existing project. If you have any issue, please contact us.

Updates

  • Update to Ionic 6
  • Update to Angular 13
  • Update all project dependencies
  • Added the new ion-datetime component (just in PRO version)

BASIC version

Update dependencies

// update Angular
npx @angular/[email protected] update @angular/[email protected] @angular/[email protected] --force
ng update @angular-eslint/schematics --allow-dirty
​
// update Ionic
npm install @ionic/[email protected]
​
​
// update project dependencies
npm i [email protected]~6.6.6
npm i [email protected]
npm i [email protected]
npm i @ionic/[email protected]
​
// Update Capacitor
npm i @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected]
​
npm i [email protected]
npm i [email protected]
npm i @webcomponents/[email protected]
npm i @types/[email protected]
npm i @types/[email protected]
​
npm audit fix
Copy or update the files src/polyfills.ts and src/zone-flags.ts in your project.
​

PRO version

Update dependencies

// update Angular
npx @angular/[email protected] update @angular/[email protected] @angular/[email protected] --force
ng update @angular-eslint/schematics --allow-dirty
​
// update Ionic
npm install @ionic/[email protected] @ionic/[email protected]
​
// update project dependencies
npm i [email protected]~6.6.6
npm i [email protected]
npm i @videogular/[email protected]
npm i @ngx-translate/[email protected]
npm i @nguniversal/[email protected]
npm i [email protected]
npm i @ionic/[email protected]
​
// Update Capacitor
npm i @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected] @capacitor/[email protected]
​
npm i [email protected]
npm i [email protected]
npm i [email protected]
npm i @webcomponents/[email protected]
npm i @types/[email protected]
npm i @types/[email protected]
npm i @types/[email protected]
npm i @nguniversal/[email protected]
npm i @commitlint/[email protected] @commitlint/[email protected]
npm i @ngx-translate/[email protected]
npm i @typescript-eslint/[email protected] @typescript-eslint/[email protected]
npm i [email protected]
npm i [email protected]
npm i [email protected]
npm i [email protected]
​
npm audit fix
Copy or update the files src/polyfills.ts and src/zone-flags.ts in your project.

Ionic 6 Date time

Follow step #1 from the migration guide.
Install the following library:
npm i date-fns

[2021-07-05] - Update

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

Updates

  • 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

Angular 12 Update

// update angular
ng update @angular/core @angular/cli --create-commits

Update project dependencies

// update dependecies
npm install @ionic/[email protected]
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]

Just for the PRO version:

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/[email protected] --create-commits
ng update @nguniversal/[email protected] --create-commits
​
npm install --save-dev @commitlint/[email protected]
npm install --save-dev @commitlint/[email protected]
npm install --save-dev @types/[email protected]

ESLint Migration

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
In case you have any issue with the ESLint migration please refer to this guide.
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 the forms-validations-page and forms-filters-pagecomponents selectors.
  • Add a Page or Component suffix to the PageNotFound component.

Firebase update

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