IonicThemesBuy NOWLive Preview

🧐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

[BASIC] /src files visual comparison

[BASIC] specific /android configuration files comparison

[BASIC] specific /ios configuration files comparison

PRO version DIFF

[PRO] /src files visual comparison

[PRO] specific /android configuration files comparison

[PRO] specific /ios configuration files comparison

ELITE version DIFF

[ELITE] /src files visual comparison

[ELITE] specific /android configuration files comparison

[ELITE] specific /ios configuration files comparison

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.

npm i -D @capacitor/cli@latest
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:

ng update @ionic/angular@6.5 @ionic/angular-server@6.5 --create-commits
ng update @ionic/angular-toolkit @ionic/cli --create-commits

Angular 15 update

npm install -g @angular/cli

You may need to update your Node.js version

ng update @angular-eslint/schematics@14 @angular/core@14 @angular/cli@14 --create-commits
ng update @nguniversal/express-engine@14 @nguniversal/builders@14 --create-commits
ng update @angular/cdk@14 --create-commits
ng update @angular/fire @angular-eslint/schematics@15 @angular/core@15 @angular/cli@15 --create-commits
ng update @nguniversal/express-engine@15 @nguniversal/builders@15 --create-commits
ng update @angular/cdk@15 --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/authentication@1.3.0

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 rxjs@7.8.0
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/ngx-charts@20.1.2

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

[BASIC] /src files visual comparison

[BASIC] specific /android configuration files comparison

[BASIC] specific /ios configuration files comparison

PRO version DIFF

[PRO] /src files visual comparison

[PRO] specific /android configuration files comparison

[PRO] specific /ios configuration files comparison

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/authentication@0.3.1

npm install --save firebase@9

ng update @angular/fire

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.

Solution: Show gradle warnings

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/core@latest
npm install --save @capacitor/ios@latest
npm install --save @capacitor/android@latest

Here’s the list of Capacitor plugins available and their latest versions.

npm install --save @capacitor-firebase/authentication@0.3.1
npm install --save @capacitor/app@1.1.1
npm install --save @capacitor/geolocation@1.3.1
npm install --save @capacitor/haptics@1.1.4
npm install --save @capacitor/keyboard@1.2.2
npm install --save @capacitor/share@1.1.2
npm install --save @capacitor/splash-screen@1.2.2
npm install --save @capacitor/status-bar@1.0.8
npm install --save-dev @capacitor/cli@latest

Only for BASIC version

npm install --save @capacitor/storage@1.2.5

Ionic updates

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/angular-toolkit@6.1.0

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.

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

PRO version

Update dependencies 

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

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/angular-toolkit@latest
npm install -g @angular/cli 
npm install -g @angular-devkit/schematics-cli
npm install --save @angular/fire@6.1.5
npm install --save @ionic/angular@5.6.10
npm install --save capacitor-firebase-auth@2.4.0
npm install --save google-libphonenumber@3.2.21
npm install --save dayjs@1.10.5
npm install --save @types/node@12.20.15

Just for the PRO version:

npm install --save @ionic/angular-server@5.6.10
npm install --save @types/express@4.17.12
npm install --save mobile-detect@1.4.5
npm install --save @videogular/ngx-videogular@4.0.0

ng update @nguniversal/builders@12 --create-commits
ng update @nguniversal/express-engine@12 --create-commits

npm install --save-dev @commitlint/cli@12.1.4
npm install --save-dev @commitlint/config-angular@12.1.4
npm install --save-dev @types/node@14.17.1

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 firebase@8.6.8 --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.

[2021-03-08] - Update

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

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

[2021-02-15] - Update

  • 3.0.0 BASIC

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.

[2020-09-30] - Update

  • 2.2.0 BASIC

  • 2.2.0 PRO

Libraries Updates:

  • Update to Angular 10

  • Update to @ionic/angular latest version (5.3.3)

    • Run: npm install --save @ionic/angular@latest @ionic/angular-toolkit@latest

  • Update to Capacitor latest version (2.4.1)

  • Update Firebase and AngularFire

    • Run: npm install @angular/fire@latest firebase@latest --save

  • Update all dependencies to its latest version.

    • npm install --save google-libphonenumber@latest

    • npm install --save dayjs@latest

    • npm install --save-dev @commitlint/cli@11

    • npm install --save-dev @commitlint/config-angular@11

    • npm install --save-dev husky@4.3

    • npm install --save-dev codelyzer@latest

    • npm install --save @ngx-translate/core@latest

    • npm install --save @ngx-translate/http-loader@latest

  • 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/angular@latest @ionic/angular-toolkit@latest

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/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest
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/cli@latest
npm install @capacitor/core@latest

Next, update each Capacitor library in use:

npm install @capacitor/ios@latest
npx cap sync ios

npm install @capacitor/android@latest
npx cap copy android 
# Within Android Studio, click “Sync Project with Gradle Files” button

cd electron
npm install @capacitor/electron@latest

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.

[2020-05-18] - Update

  • 2.1.0 BASIC

  • 2.1.0 PRO

Updates

  • 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/cli@latest
npm install @capacitor/core@latest

Next, update each Capacitor library in use:

npm install @capacitor/ios@latest
npx cap sync ios

npm install @capacitor/android@latest
npx cap copy android 
# Within Android Studio, click “Sync Project with Gradle Files” button

cd electron
npm install @capacitor/electron@latest

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:

  • ng update @angular/core @angular/cli

  • npm install @ionic/angular@latest --save

  • npm install @angular-devkit/architect@latest --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 angular-pipes@10.0.0 --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 husky@4.2.5 --save-dev

    • npm install tslint@6.1.2 --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.

[2020-02-14] - Update

  • 2.0.0 BASIC

  • 2.0.0 PRO

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.

    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>

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:

[2019-11-05] - Update

  • 1.2.1 PRO

Updates

  • Fixed typos

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

[2019-08-12] - Update

  • 1.2.0 BASIC

  • 1.2.0 PRO

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:

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

    $ npm install @ionic/angular@4.7.0
$ npm install @ionic/angular-toolkit@2.0.0 -D

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

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

  3. Update @angular-devkit dependencies:

    $ npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest

  4. Also, we had to run the following commands to apply the migration changes:

$ npx ng update @angular/core
$ npx ng update --allow-dirty @angular/core --from 7 --to --migrate-only
$ ng update @angular/cli --allow-dirty
$ ng update @angular/cli --allow-dirty --from 7 --to 8 --migrate-only

If you find any issue please check the Ionic's Changelog documentation or contact us.

[2019-06-24] - Update

  • PRO version release 🥳

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

[2019-06-21] - Update

  • 1.1.1 BASIC

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:

[2019-06-13] - Update

  • 1.1.0 BASIC

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.

[2019-05-09] - Update

  • 1.0.3 BASIC

Updates

  • 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

[2019-03-18] - Update

  • 1.0.2 BASIC

Updates

  • 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

[2019-02-28] - Update

  • 1.0.1 BASIC

Updates

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

  • Clean code

  • Added more examples to the showcase section

[2019-02-22] - Release

  • 1.0.0 BASIC

First release 🎉

PreviousUpcoming featuresNextReviews / Testimonials ⭐️⭐️⭐️⭐️⭐️

Last updated