Changelog

Template changelog
2.3.0 - 2021-03-08
PRO VERSION
Libraries Updates:
Update to Angular 11
Update to @ionic/angular latest version (5.6.0)
Run: npm install --save @ionic/[email protected] @ionic/[email protected]
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. 
Learn more about Handling Data in Ionic with Angular Resolvers.
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:
​Update to Angular 10​
Update to @ionic/angular latest version (5.3.3)
Run: npm install --save @ionic/[email protected] @ionic/[email protected]
​Update to Capacitor latest version (2.4.1)​
Update Firebase and AngularFire
Run: npm install @angular/[email protected] [email protected] --save
Update all dependencies to its latest version.
npm install --save [email protected]
npm install --save [email protected]
npm install --save-dev @commitlint/[email protected]
npm install --save-dev @commitlint/[email protected]
npm install --save-dev [email protected]
npm install --save-dev [email protected]
npm install --save @ngx-translate/[email protected]
npm install --save @ngx-translate/[email protected]
Changed the library used for the video player. Follow the steps from the migration guide.
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)
​Learn more about SSR in this project.​
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:
​iOS​
​Android​
​Electron​
​Breaking Changes​
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:
ng update @angular/core @angular/cli
According to this official guide is the only step required
Double check with the Angular official update guide​
npm install @ionic/[email protected] --save
npm install @angular-devkit/[email protected] --save-dev
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
As you may know, in our most recent releases we included a simple helper class that handles resolving a mock of the data while real data get’s fetched from the backend. You can read more about DataStore in our documentation.
We decided to use this approach on almost every page of the template, as we believe that the improvements in user experience are worth it.
However, based on users feedback, we know there are some users that are hesitant about using anything but plain Observables (the Angular route resolvers default approach).
In the past, we included a complete showcase section explaining the different ways to resolve data with plenty of examples on how to use or not the DataStore.
We also included some pages with default resolvers (Notifications page) and pages with no resolvers at all (Contact Card page) in an attempt to cover a broad range of use cases.
In this update we added an even effortless way to switch between resolvers using DataStore or resolvers using plain Observables.
The main difference in terms of reactive programming between the DataStore and a plain Observable is that the former stores the propagation of change in a chained observable inside the DataStore class (using the state property).
To seamlessly switch between DataStore and plain Observables resolvers, in this version we added a really simple helper class (ResolverHelper inside utils/resolver-helper.ts) to abstract the procedure of extracting the data source. 
If we are dealing with an instance of a DataStore, then return its state property, and if we are dealing with a plain observable, just return itself.
This way you can choose the resolver approach that best suits your needs without having to edit every page component file.
We included both DataStore and plain Observables examples for the Travel listing and details pages.
Just go to the travel-listing.module.ts or travel-details.module.ts and switch between resolvers. No need to update code in any other file.

travel-listing.module.ts
const routes: Routes = [
  {
    path: '',
    component: TravelListingPage,
    resolve: {
      data: TravelListingResolver
      // data: TravelListingPlainResolver
    }
  }
];
Outdated npm dependencies
To ensure being up to date with latest releases and bug fixes, we also updated some of the outdated npm dependencies.
The procedure we followed was:
run npm outdated and update your outdated libraries:
npm install [email protected] --save
npm install dayjs --save
npm install core-js --save
Prev was 2.5.7, current should be 2.6.11
npm install google-libphonenumber --save
npm install npm --save
npm install tslib --save
npm install @ionic/angular-toolkit --save-dev
npm install @webcomponents/webcomponentsjs --save-dev
npm install codelyzer --save-dev
npm install ts-node --save-dev
npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm install @types/node --save-dev
Regarding Angular Universal (Server Side Rendering) support in Ionic 5 apps
Although there's an official guide on how to add support for server side rendering with Angular 9 in Ionic 5 apps, while testing the procedure, we found a minor issue that made it impossible to ship SSR support for the Ionic 5 Full App in this update.
It's worth mentioning that the future looks bright in this regard and that we are confident that in the next update we will be able to ship this feature.
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
You can either re download all the project files from your account at https://ionicthemes.com or follow the steps below.
To update your existing project to Angular 8 you need to follow these steps:
Update @ionic/angular and @ionic/angular-toolkit to the latest releases:
$ npm install @ionic/[email protected]
$ npm install @ionic/[email protected] -D
Update @angular/core and @angular/cli:
$ npx ng update @angular/core @angular/cli
Update @angular-devkit dependencies:
$ npm i @angular-devkit/[email protected] @angular-devkit/[email protected] @angular-devkit/[email protected] @angular-devkit/[email protected]
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
If you find any issue please check the Ionic's Changelog documentation or contact us.
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.
If you already bought the BASIC version and want to do the upgrade contact us and we will send you the instructions to upgrade by just paying the difference between BASIC and PRO version (which are just $10).
​
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 🎉
​