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

Changelog

Product Updates Changelog

2022-06-21- 5.0.0 PRO and BASIC

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- 4.0.0 PRO and BASIC

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

Fix walkthrough sliders bug

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());

Update to Capacitor 3

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

Follow very carefully this configuration steps and this section from our documentation.
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 - 2021-03-08 - PRO VERSION

Libraries Updates:
  • Update to Angular 11
  • Update to @ionic/angular latest version (5.6.0)
  • Update to Capacitor latest version (2.4.6)
  • Update @videogular/ngx-videogular to latest version (3.0.1)
Check the package.json for more details.
Minor update to Firebase Authentication flow
We found an issue related to Firebase Authentication, so we did some minor adjustments to the code.
In FirebaseAuthService we changed a bit this code inside the service constructor.
if (!this.platform.is('capacitor')) {
// when using signInWithRedirect, this listens for the redirect results
this.angularFire.getRedirectResult()
.then((result) => {
// result.credential.accessToken gives you the Provider Access Token. You can use it to access the Provider API.
const user: any = result.user || this.currentUser;
​
if (user) {
this.redirectResult.next(user);
}
}, (error) => {
this.redirectResult.next({error: error.code});
});
}
Also, in FirebaseSignInPage we did some minor changes in the following code.
// Get firebase authentication redirect result invoked when using signInWithRedirect()
// signInWithRedirect() is only used when the client is on the web but not on desktop
this.authRedirectResult = this.authService.getRedirectResult()
.subscribe(result => {
if (result.error) {
this.manageAuthWithProvidersErrors(result.error);
} else {
this.redirectLoggedUserToProfilePage();
}
});
If you have any questions don't hesitate to contact us.

3.0.0 - 2021-02-15

BASIC VERSION
Based on user feedback, we created a simplified version of the template, more suitable for Ionic and Angular beginners.
We love the App Shell solution we created for this template, and we highly recommend using it because it improves the perceived performance of the app; however, we recognize it's an advanced feature and not all developers may want to work with it.
In this update we released a simplified version without app shell, data sources and data stores. Now, the resolvers are plain angular resolvers. By design, Angular route resolvers won't transition to the page until the resolved Observable completes, this means that the route transition gets blocked until all the route data is ready.
Also, we removed Server side rendering from BASIC version and added a basic Firebase Integration.
You can see all the features of BASIC and PRO versions here.

2.2.0 - 2020-09-30

Libraries Updates:
New Features:
  • Add support for Server Side Rendering 🤩. Learn more about SSR.​
  • Add SEO Service to support dynamic meta tags. Learn more about SEO meta tags.​
  • Enable Ivy render
    • Go to src/tsconfig.app.json and set "angularCompilerOptions": { "enableIvy": true }
  • Add AngularFire guards to check if user is already logged before navigating to a route
  • Add lazy loading capabilities to image-shell component as well as image load error handler and stylings.
  • Add new showcases
  • Improve documentation (SSR and Firebase Hosting guides)
  • Add Firebase Authentication State Persistence.
    • This means that once the user signed in to the app, we redirect them to the profile page until there is an explicit sign out action. Learn more about this feature.
Refactors:
  • Refactor Sass include paths.
    • Add extra config to the angular.json file to ease the developer experience when importing shared Sass mixins and files.
  • Fix RxJs nested subscriptions.
    • Following best practices.
  • Moved all HttpClientModule imports from lazy modules to the AppModule.
    • Following best practices.
  • Add missing redirects.
    • For example /app should redirect to /app/categories instead of showing a blank screen.
  • Adjust some component styles for SSR scenarios.
    • counter-input
  • Improve transitions between pages with colored ion-toolbars
  • Move App Shell Configs into src/environments/environment.ts
Breaking Changes:
Output Folder
After configuring Angular Universal (SSR), the output folder will no longer be /www, the compilation process will generate outputs both for browser and server environments. You will find those outputs under /dist/app/browser and /dist/app/server.
  • If you are using Capacitor, remember to update the capacitor.config.json and change the webDir property from 'www' to 'dist/app/browser'
capacitor.config.json
{
...
"webDir": "dist/app/browser",
...
}
  • If you are using Firebase Hosting to deploy your browser targets, remember to update the firebase.json and change the hosting public property from 'www' to 'dist/app/browser'
firebase.json
{
"hosting": {
"public": "dist/app/browser",
...
}
}
​

Update to Angular 10

Below are the steps to update your existing project.
If you re-download the files from your IonicThemes account you don't need to do this because the template is already updated.
These steps are only needed if you want to update your existing Ionic Full Starter App project.

Install latest Ionic/Angular

Update @ionic/angular and @ionic/angular-toolkit to the latest release
npm install --save @ionic/[email protected] @ionic/[email protected]

Install latest Angular 10​

ng update @angular/core @angular/cli --create-commits
Now most packages should be updated, just to be sure, we also need to update these
Install the latest angular devkit updates by running:
npm install --save-dev @angular-devkit/[email protected] @angular-devkit/[email protected] @angular-devkit/[email protected] @angular-devkit/[email protected]
ng update rxjs --create-commits

Update to Capacitor 2.4

Below are the steps to update your existing project.
If you re-download the files from your IonicThemes account you don't need to do this because the template is already updated.
These steps are only needed if you want to update your existing Ionic Full Starter App project.
First, update Capacitor Core and the CLI:
cd your-app-folder
npm install @capacitor/[email protected]
npm install @capacitor/[email protected]
Next, update each Capacitor library in use:
npm install @capacitor/[email protected]
npx cap sync ios
​
npm install @capacitor/[email protected]
npx cap copy android
# Within Android Studio, click “Sync Project with Gradle Files” button
​
cd electron
npm install @capacitor/[email protected]
Then, follow the regular Capacitor Development Workflow.

Add Server Side Rendering to your existing project

If you re-download the files from your IonicThemes account you don't need to do this because the template is already updated.
These steps are only needed if you want to update your existing Ionic Full Starter App project.
ng add @nguniversal/express-engine
​
npm install --save @ionic/angular-server
​
npm install --save @angular/animations
# Required by @angular/platform-server (from @ionic/angular-server)

2.1.0 - 2020-05-18

  • We now use swipeable modals
  • Update to @ionic/angular latest version (5.1.0)
  • Update to Capacitor 2.1
  • Update to Angular 9.1
  • Update to @angular/fire 6.0.0 and firebase 7.14.2
  • Fix for Menu Toggle Bug
  • Fix 'real state' typo (now is real estate, sorry about that!)
  • Unsubscribe from nested subscriptions
  • Provide resolvers without App Shell so you can chose
  • Firebase Authentication with different providers [only for PRO version]
    • Facebook Sign In
    • Google Sign In
    • Twitter Sign In
    • Email/Password Sign In
  • Route Guard for Firebase profile page [only for PRO version]
  • New profile page for the Firebase logged user [only for PRO version]

Swipeable Modals

Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. Learn more about Ionic Swipeable Modals.
Before:
async showTermsModal() {
const modal = await this.modalController.create({
component: TermsOfServicePage
});
return await modal.present();
}
After:
constructor(
...
public modalController: ModalController,
private routerOutlet: IonRouterOutlet
) {
​
...
​
async showTermsModal() {
const modal = await this.modalController.create({
component: TermsOfServicePage,
swipeToClose: true,
presentingElement: this.routerOutlet.nativeEl
});
return await modal.present();
}

Update to Capacitor 2.1

​More information about Capacitor 2. Below are the steps to update your existing project.
If you re-download the files from your IonicThemes account you don't need to do this because the template is already updated.
First, update Capacitor Core and the CLI:
cd your-app-folder
npm install @capacitor/[email protected]
npm install @capacitor/[email protected]
Next, update each Capacitor library in use:
npm install @capacitor/[email protected]
npx cap sync ios
​
npm install @capacitor/[email protected]
npx cap copy android
# Within Android Studio, click “Sync Project with Gradle Files” button
​
cd electron
npm install @capacitor/[email protected]
Then, follow these update instructions which cover one-time manual steps:

Upgrade to Angular 9.1.4 and Ionic 5.1.0

Angular 9 and its new rendering engine (Ivy renderer) are officially supported in Ionic 5.
Although it may not seem a big deal to upgrade from Angular 8 to Angular 9, the new rendering engine is a complete rewrite from the previous one (view engine) so the implications are substantial.
The main concern that may arise is due to third party libraries being incompatible with the Ivy renderer.
Researching on this particular topic, we found a gap between Ionic decision on sticking with Angular 8 by default and the official Angular Ivy documentation.
On one hand, Mike Hartington (from the Ionic team) mentions in this Github issue that they currently default to Angular 8 because v9 enables Ivy by default, "which could affect other libraries or packages in a project. Instead of providing the latest which the ecosystem is still updating to, we provide at least something we know for a fact will workout."
On the other hand, the official Angular Ivy documentation clearly states that, "Ivy applications can be built with libraries that were created with the View Engine compiler. This compatibility is provided by a tool known as the Angular compatibility compiler (ngcc). CLI commands run ngcc as needed when performing an Angular build."

Enable Ivy or not enable Ivy?

In this Ionic 5 Full App template, by design, we try to rely on very few third party libraries as we believe relying on libraries without guaranteed maintenance opens the door for future headaches. One of the main advantages of both Ionic and Angular is that they have official functionality and APIs for almost any use case you may come up with.
In the BASIC version of this template we enabled Ivy by default, however, in the PRO version, we didn't. This is because PRO version uses videogular2 library to display videos and the library didn't updated to Angular 9 yet. As we write this (May 13, 2020), there is an open issue and people working on it. Once the library supports Angular 9, we will release an update to our template and enable Ivy by default.
Having said that, you can always opt-out or opt-in of Ivy renderer in Angular 9 by just changing the following line in src/tsconfig.app.json
src/tsconfig.app.json
"angularCompilerOptions": {
"enableIvy": false
}
If you enable Ivy you need to remove entryComponents property from @NgModule. In BASIC version, Ivy is enabled by default, so there are not entryComponents. In PRO Ivy isn't enabled so we have entryComponents in the following modules: SignupPageModule, FirebaseUserDetailsPageModule and FirebaseListingPageModule
If you want to disable Ivy in Ionic 5 Full Starter App BASIC version, you need to add the following entryComponents in src/app/signup/signup.module.ts:
signup.module.ts
...
@NgModule({
imports: [
...
],
entryComponents: [TermsOfServicePage, PrivacyPolicyPage],
...
})
​
...
​
In case you are wondering, the procedure we followed to update this template to Angular 9, it was the following:

Clean up Observables

In order to properly clean up observables (for example: route params and data store observables) we need to store a reference to the subscriptions we made in the component and unsubscribe from them upon component disposal (see this issue for more information).
In traditional Angular apps this would be in the component ngOnDestroy() method, but Ionic apps only call ngOnDestroy() if the page was popped (ex: when navigating back). Since ngOnDestroy() might not fire when you navigate from the current page, we will use ionViewWillLeave() to cleanup Subscriptions.

DataStore opt-out

We added more flexibility to opt-out from DataStore resolvers<