Ionic 6 Full Starter App
IonicThemesBuy NOWLive Preview
  • What is Ionic 6 Full Starter App?
  • About this Ionic template
  • Template versions
  • Set up the development environment
  • Running the Ionic app
  • How to use this template?
  • Ionic Capacitor
  • Ionic Code Structure
  • Ionic Data Integration
  • Theming
  • Ionic Progressive Web App
  • Ionic Navigation
  • Ionic Server Side Rendering (SSR)
  • Ionic Splash Screens and Icons
  • App Shell
    • Image Shell
    • Text Shell
    • Aspect Ratio
  • Ionic Custom Components
    • Checkbox Wrapper
    • Countdown timer
    • Ionic Show/Hide Password
  • Ionic Walkthrough (or tutorial)
  • Categories
  • Ionic Firebase Integration
    • Firebase Authentication
    • Firebase CRUD
    • Firebase Hosting
    • Push Notifications
  • Google Maps & Geolocation
  • Ionic Video Playlist
  • Ionic Multi Language
  • Getting Started
  • Ionic Authentication
  • Ionic Side Menu
  • Ionic Profile
  • Contact Card
  • Social Sharing
  • Ionic Notifications
  • Forms and Validations
  • Filters
  • FAQs
  • Common Errors and Solutions
  • Glossary
  • Upcoming features
  • 🧐Changelog
  • Reviews / Testimonials ⭐️⭐️⭐️⭐️⭐️
Powered by GitBook
On this page
  • [2023-02-01] - Update
  • Updates
  • Capacitor 4 update
  • Ionic 6.5.0 update
  • Angular 15 update
  • Other Capacitor plugins updates
  • Other project dependencies updates
  • Bug fixes
  • Known issues
  • [2022-11-23] - Update
  • [2022-06-21] - Update
  • Updates
  • Firebase update
  • Platform updates
  • Other Capacitor plugins updates
  • Ionic updates
  • Known issues
  • [2021-12-22] - Update
  • Updates
  • BASIC version
  • PRO version
  • [2021-07-05] - Update
  • Updates
  • Angular 12 Update
  • Update project dependencies
  • ESLint Migration
  • Firebase update
  • Fix walkthrough sliders bug
  • Update to Capacitor 3
  • Apple Sign In
  • [2021-03-08] - Update
  • [2021-02-15] - Update
  • [2020-09-30] - Update
  • Update to Angular 10
  • Update to Capacitor 2.4
  • Add Server Side Rendering to your existing project
  • [2020-05-18] - Update
  • Updates
  • Swipeable Modals
  • Update to Capacitor 2.1
  • Upgrade to Angular 9.1.4 and Ionic 5.1.0
  • Clean up Observables
  • DataStore opt-out
  • Outdated npm dependencies
  • Regarding Angular Universal (Server Side Rendering) support in Ionic 5 apps
  • [2020-02-14] - Update
  • [2019-11-05] - Update
  • Updates
  • [2019-08-12] - Update
  • [2019-06-24] - Update
  • About Capacitor
  • [2019-06-21] - Update
  • [2019-06-13] - Update
  • Want to use Capacitor?
  • Improved App Shell solution 🎉
  • [2019-05-09] - Update
  • Updates
  • [2019-03-18] - Update
  • Updates
  • [2019-02-28] - Update
  • Updates
  • [2019-02-22] - Release

Was this helpful?

Changelog

Product Updates Changelog

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

Last updated 2 years ago

Was this helpful?

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

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

To ease the update process, as requested by many of you, we published a visual comparison tool so you can easily see what changed from the last version of the template file by file.

BASIC version DIFF

PRO version DIFF

ELITE version DIFF

Updates

  • Update to latest Capacitor 4

  • Update to Ionic 6.5.0

  • Update to Angular 15

  • Update Capacitor plugins

  • Update project dependencies

  • Improve the Firebase auth implementation

Updates just for the BASIC version

  • Update Capacitor Preferences plugin

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

Updates just for the PRO version

  • Add Capacitor Preferences plugin

To show the walkthrough component just the first time the user interacts with the app

Updates just for the ELITE version

  • Update CapacitorHttp plugin

Same API, changed library maintainer

  • Add Capacitor Preferences plugin

To show the walkthrough component just the first time the user interacts with the app

  • Remove Bootstrap dependency

I added a custom-progress-bar directive that works on top of the Ionic progress bar component and adds chart progress bar visualization features.

Capacitor 4 update

Compared to previous upgrades, the breaking changes between Capacitor 3 and 4 are fairly minimal.

The upgrade is straightforward and you can rely on the Capacitor CLI to handle the migration for you.

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

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.

  • 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

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

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

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

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.

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

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.

[2021-12-22] - Update

  • 4.0.0 BASIC

  • 4.0.0 PRO

In case you re-download the code, you are ready to go, just run npm install and your Ionic app will be ready.

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

Install the following library:

npm i date-fns

[2021-07-05] - Update

  • 3.1.0 BASIC

  • 3.0.0 PRO

In case you re-download the code, you are ready to go, just run npm install and your Ionic app will be ready.

Updates

  • Update to Angular 12

  • Migrate project to ESLint

  • 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

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

this.slides.ionSlidesDidLoad.subscribe(() => this.slides.update());

Update to Capacitor 3

Apple Sign In

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

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

Also, we removed Server side rendering from BASIC version and added a basic Firebase Integration.

[2020-09-30] - Update

  • 2.2.0 BASIC

  • 2.2.0 PRO

Libraries Updates:

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

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

  • 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

New Features:

  • Enable Ivy render

    • Go to src/tsconfig.app.json and set "angularCompilerOptions": { "enableIvy": true }

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

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

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)

[2020-05-18] - Update

  • 2.1.0 BASIC

  • 2.1.0 PRO

Updates

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

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

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.

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.

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

DataStore opt-out

We added more flexibility to opt-out from DataStore resolvers

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.

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.

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

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

This release includes the update of the template to Ionic 5.0.0.

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

    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

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

[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

[2019-06-21] - Update

  • 1.1.1 BASIC

We added examples of data binding for common use cases such as:

[2019-06-13] - Update

  • 1.1.0 BASIC

Want to use Capacitor?

Improved App Shell solution 🎉

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.

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

  • Bug fixing

    • Some users reported the following error message when building the app:Failed to construct 'HTMLElement': Please use the 'new' operator

  • 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

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

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

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.

Here’s the and their latest versions.

This features is not included in the template but you can learn more here:

You can download the updated source code of the project from your .

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 .

The Capacitor plugin we were using to interact with the native Firebase SDK was getting behind in terms of support (). 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.

Uninstall old Capacitor Firebase plugin ()

Undo

Install new Capacitor Firebase plugin ()

Make sure your /android and /ios configurations follow the

Upgrade Firebase from version 8 to the new

I solved it by following

Solution:

Here’s the and their latest versions.

For more details, follow .

Please read the , the to configure it, the , and a .

This is a minor change and very easy to update. Please read the .

has already been reported in the Firebase JS SDK GitHub page.

You can re-download the code of the project from your .

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 .

Follow step #1 from the .

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 .

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 .

Update to Capacitor 3

In case you have any issue with the ESLint migration please refer to .

The ion-slides had. In order to fix it we added the following line inside the ngAfterViewInit from the WalkthroughPage

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 .

To update this project we carefully following the . 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 .

Follow very carefully this and from our documentation.

If you have any questions don't hesitate to .

Learn more about .

You can see all the features of BASIC and PRO versions .

Changed the library used for the video player. Follow the steps from the .

Add support for Server Side Rendering 🤩.

Add SEO Service to support dynamic meta tags.

Add to check if user is already logged before navigating to a route

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

Install latest

Then, follow the regular .

We now use modals

Fix for

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 .

. Below are the steps to update your existing project.

On one hand, Mike Hartington (from the Ionic team) mentions in 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 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."

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 library to display videos and the library didn't updated to Angular 9 yet. As we write this (May 13, 2020), there is an 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 in Angular 9 by just changing the following line in src/tsconfig.app.json

According to is the only step required

Double check with the Angular

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 for more information).

In traditional Angular apps this would be in the component ngOnDestroy() method, but 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.

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 .

However, based on users feedback, we know there are some users that are hesitant about using anything but plain (the Angular route resolvers default approach).

In the past, we included a explaining the different ways to resolve data with plenty of examples on how to use or not the DataStore.

The main difference in terms of 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).

Although there's an on how to add support for server side rendering with Angular 9 in Ionic 5 apps, while testing the procedure, we found that made it impossible to ship SSR support for the Ionic 5 Full App in this update.

Ionic 5 is here with amazing improvements. Read more in .

Ionic 5 introduced some minor . The following are the changes that affected this starter app:

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

: Ionic 5 changes the CSS attributes from its components to CSS classes. For example:

is now cascaded from the parent to the child component and that affected our ImageShellComponent mode property so we renamed it to display.

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

. Ionic 5 removed the main attribute and introduced contentId instead.

The same applies to .

: some icons changed their name and others were removed. Check the .

to see all improvements introduced in Ionic 5.

Update Web View Cordova Plugin to latest version. Check

You can either re download all the project files from your account at or follow the steps below.

If you find any issue please check the or contact us.

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,

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

If you already bought the BASIC version and want to do the upgrade and we will send you the instructions to upgrade by just paying the difference between BASIC and PRO version (which are just $10).

Restructured the App Shell section from the Showcase to provide more examples and use cases. You can check the live demo in

We added an optional project configured with Capacitor instead of Cordova. You are free to choose which one you want to use.

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 .

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

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

We solved it doing what is explained .

Upgrade <app-text-shell> and <app-image-shell> components. Added new animations options and simplified it’s usage. (Also added in the showcase section)

Removed deprecated deps (@ionic/ng-toolkit, @ionic/schematics-angular) in favor of @ionic/angular-toolkit (see: )

Improved code readability by isolating usage of custom CSS variables from . Now every stylesheet has the following structure:

🧐
🎉
IonicThemes' account
contact us
[BASIC] /src files visual comparison
[BASIC] specific /android configuration files comparison
[BASIC] specific /ios configuration files comparison
[PRO] /src files visual comparison
[PRO] specific /android configuration files comparison
[PRO] specific /ios configuration files comparison
[ELITE] /src files visual comparison
[ELITE] specific /android configuration files comparison
[ELITE] specific /ios configuration files comparison
https://capacitorjs.com/docs/updating/4-0#ios
https://capacitorjs.com/docs/updating/4-0#android
list of Capacitor plugins available
https://firebase.google.com/docs/auth/admin/manage-users#update_a_user
bug: angular, cannot read property of 'whenDefined' with ssr
IonicThemes' account
contact us
[BASIC] /src files visual comparison
[BASIC] specific /android configuration files comparison
[BASIC] specific /ios configuration files comparison
[PRO] /src files visual comparison
[PRO] specific /android configuration files comparison
[PRO] specific /ios configuration files comparison
baumblatt/capacitor-firebase-auth
baumblatt/capacitor-firebase-auth
old plugin configuration
[BASIC] specific /android configuration files comparison
[BASIC] specific /ios configuration files comparison
[PRO] specific /android configuration files comparison
[PRO] specific /ios configuration files comparison
robingenz/capacitor-firebase
new plugin configuration
v9 modular web SDK
[BASIC] /src files visual comparison
[PRO] /src files visual comparison
this StackOverflow answer
Show gradle warnings
https://stackoverflow.com/a/71783168/1116959
https://stackoverflow.com/a/70380788/1116959
list of Capacitor plugins available
this guide
official Swiper documentation
list of available parameters
different methods and properties
complete list of events available
official documentation about the deprecation warning
This issue
IonicThemes' account
contact us
migration guide
IonicThemes' account
contact us
this guide
this bug
here
Capacitor Migration guide
contact us
contact us
Handling Data in Ionic with Angular Resolvers
here
migration guide
Learn more about SSR.
Angular 10
Capacitor Development Workflow
Learn more about SSR in this project.
swipeable
Menu Toggle Bug
Ionic Swipeable Modals
More information about Capacitor 2
iOS
Android
Electron
Breaking Changes
this
official Angular Ivy documentation
videogular2
open issue
opt-out or opt-in of Ivy renderer
this official guide
official update guide
this issue
Ionic apps
DataStore in our documentation
complete showcase section
reactive programming
official guide
a minor issue
https://ionicframework.com/blog/announcing-ionic-5/
breaking changes
list header has been redesigned
CSS Utilities
Mode
Segment component
There were some changes on Menu component
Split Pane component
Ionicons 5.0
list
Check this post
https://github.com/ionic-team/cordova-plugin-ionic-webview#migrating-to-4x
https://ionicthemes.com
Ionic's Changelog documentation
learn more about capacitor in our guide
ask for help
contact us
https://ion4fullpwa.firebaseapp.com/showcase/app-shell
Infinite scroll
Pagination
Multiple data sources
Dependant data sources
Learn more about capacitor.
contact us
https://www.learnrxjs.io/
remove it.
here
new demos
https://github.com/ionic-team/starters/pull/487#issue-220835980
Ionic UI Components CSS Custom Properties
Update to Angular 10
Update to Capacitor latest version (2.4.1)
configuration steps
Observables
this section
AngularFire guards
Learn more about this feature
Learn more about SEO meta tags.
we explain how to remove it from your project and switch to Cordova.