2.2.0 - 2020-09-30

Libraries Updates:

• ​Update to Angular 10​

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

  • Run: npm install --save @ionic/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.

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.

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

ng add @nguniversal/express-engine
​
npm install --save @ionic/angular-server
​
npm install --save @angular/animations
# Required by @angular/platform-server (from @ionic/angular-server)

​Learn more about SSR in this project.​

2.1.0 - 2020-05-18

• We now use swipeable modals

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

• Update to Capacitor 2.1

• Update to Angular 9.1

• Update to @angular/fire 6.0.0 and firebase 7.14.2

• Fix for Menu Toggle Bug

• Fix 'real state' typo (now is real estate, sorry about that!)

• Unsubscribe from nested subscriptions

• Provide resolvers without App Shell so you can chose

• Firebase Authentication with different providers [only for PRO version]

  • Facebook Sign In

  • Google Sign In

  • Twitter Sign In

  • Email/Password Sign In

• Route Guard for Firebase profile page [only for PRO version]

• New profile page for the Firebase logged user [only for PRO version]

Swipeable Modals

Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. Learn more about Ionic Swipeable Modals.

Before:

async showTermsModal() {
  const modal = await this.modalController.create({
    component: TermsOfServicePage
  });
  return await modal.present();
}

After:

constructor(
...
  public modalController: ModalController,
  private routerOutlet: IonRouterOutlet
) {
​
...
​
async showTermsModal() {
  const modal = await this.modalController.create({
    component: TermsOfServicePage,
    swipeToClose: true,
    presentingElement: this.routerOutlet.nativeEl
  });
  return await modal.present();
}

Update to Capacitor 2.1

​More information about Capacitor 2. Below are the steps to update your existing project.

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:

• ​iOS​

• ​Android​

• ​Electron​

• ​Breaking Changes​

Upgrade to Angular 9.1.4 and Ionic 5.1.0

Angular 9 and its new rendering engine (Ivy renderer) are officially supported in Ionic 5.

Although it may not seem a big deal to upgrade from Angular 8 to Angular 9, the new rendering engine is a complete rewrite from the previous one (view engine) so the implications are substantial.

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 want to disable Ivy in Ionic 5 Full Starter App BASIC version, you need to add the following entryComponents in src/app/signup/signup.module.ts:

signup.module.ts
... 
@NgModule({
  imports: [
    ...
  ],
  entryComponents: [TermsOfServicePage, PrivacyPolicyPage],
  ...
})
​
...

​

In case you are wondering, the procedure we followed to update this template to Angular 9, it was the following:

• ng update @angular/core @angular/cli

  • According to this official guide is the only step required

  • Double check with the Angular official update guide​

• npm install @ionic/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.

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.

2.0.0 - 2020-02-14 (BASIC and PRO versions) 🎉

Ionic 5 is here with amazing improvements. Read more in https://ionicframework.com/blog/announcing-ionic-5/.

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

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

• The list header has been redesigned to match the latest iOS spec so now any text content inside of an <ion-list-header> should be wrapped in an <ion-label> in order to get the proper styling of the new design.

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

Before
​
<ion-header text-center></ion-header>
<ion-content padding></ion-content>
<ion-label text-wrap></ion-label>
<ion-item wrap></ion-item>
​
After
​
<ion-header class="ion-text-center"></ion-header>
<ion-content class="ion-padding"></ion-content>
<ion-label class="ion-text-wrap"></ion-label>
<ion-item class="ion-wrap"></ion-item>

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

  • You need to do a find and replace looking for [mode] and replacing it for [display]. Example:

  Before
  ​
  <app-image-shell animation="spinner" [mode]="'cover'" [src]="">
    ...
  </app-image-shell>
  ​
  After
  ​
  <app-image-shell animation="spinner" [display]="'cover'" [src]="">
    ...
  </app-image-shell>

• ​Segment component was completely revamped to use the new iOS design including an all new gesture that applies for both Material Design and iOS. Due to these changes we updated Friends Segment (you can find it under Profile section).

• ​There were some changes on Menu component. Ionic 5 removed the main attribute and introduced contentId instead.

  • The same applies to Split Pane component.

  Example for <ion-menu>:

Before
​
<ion-menu>...</ion-menu>
<ion-content main>...</ion-content>
​
After
​
<ion-menu content-id="main"></ion-menu>
<ion-content id="main">...</ion-content>

• ​Ionicons 5.0: some icons changed their name and others were removed. Check the list.

• ​Check this post to see all improvements introduced in Ionic 5.

Bug fixes and improvements:

• Change tabs and most menu icons for the new Ionicons (instead of using custom icons).

• Renamed some files from assets folder.

• Deleted unnecessary imports of IonicModule.forRoot(), we should only call IonicModule.forRoot() once in our main app module.

• Changes all references to .plt-mobile.md for just .md. Same for .plt-mobile.ios

• Updated Android target version to API 29.

• Fixed active color in counter input component

For Capacitor projects:

• Updated Capacitor to 1.5.0

• Updated iOS and Android projects to latest versions.

For Cordova projects:

• Update Web View Cordova Plugin to latest version. Check https://github.com/ionic-team/cordova-plugin-ionic-webview#migrating-to-4x​

1.2.1 - 2019-11-05 (PRO version)

• Fixed typos

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

1.2.0 - 2019-08-12

Update project to Angular 8.2.1 and to Ionic 4.7.4

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 - New product variant release: PRO VERSION

Today we are releasing a new product variant with more features and screens than the current BASIC version. The new features include:

• Firebase CRUD & filters

  • simple and advanced queries

  • related models

  • advanced usage of rxjs

  • Firestore database

• Maps & geolocation

• Video playlist

• Multi language

• Capacitor plugins

About Capacitor

Currently, we only released the PRO version with Capacitor, while in the BASIC version you can choose to use Capacitor or Cordova (there are 2 separate projects). However, if you feel that you aren't ready for Capacitor, we explain how to remove it from your project and switch to Cordova.​

Because the PRO version has plugins integrations, we had to choose a path and we chose Capacitor because we really think is the future of Native Cross-platform Web Apps. You can learn more about capacitor in our guide. However, if you don't feel comfortable using Capacitor, you are free to remove it and add Cordova.

If you have any question regarding this or need help removing Capacitor and adding Cordova please ask for help.

​

1.1.1 - 2019-06-21

Restructured the App Shell section from the Showcase to provide more examples and use cases. You can check the live demo in https://ion4fullpwa.firebaseapp.com/showcase/app-shell​

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

• ​Infinite scroll ​

• ​Pagination​

• ​Multiple data sources​

• ​Dependant data sources​

1.1.0 - 2019-06-13

Want to use Capacitor?

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

Improved App Shell solution 🎉

Based on the feedback from our clients, we improved and simplified the ShellProvider component. Also we added more examples to the showcase section such as retrieving dynamic data from an API. If you need more examples please contact us.

The new Shell solution relies in data stores and data sources.

DataStore

• Has a Subject (named timeline) which holds a reference to the state emitted by the DataSource.

• It has a mechanism to append a Shell (empty model with skeleton components) before the DataSource emits the real data.

• State management can become a though task thus why we relay heavily in rxjs to handle the states. If you don't have experience in rxjs I strongly recommend you to read https://www.learnrxjs.io/​

DataSource is a simple Observable to get your data.

What changed from the previous implementation of the App Shell?‌

• Renamed ShellProvider class to DataStore

• Renamed utils/shell-provider.ts to shell/data-store.ts

• Shell configs are now located in src/assets/config and not in src/environments.

• Page components have a more straight forward way to access route resolved data. This reduced considerable the amount of boilerplate with the new implementation of the DataStore.

• You need to update the Services and Resolvers to match the new implementation of the DataStore.

• This new implementation is much more flexible than the previous one enabling you much more use cases for the Shell feature. You can new examples in the Showcase section.

• Shell elements such as Image shell and text shell are now located inside the shell folder but they remained the same without any modification.

1.0.3 - 2019-05-09

• Refactor

  • Removed husky pre commit lint and commit messages from package.json and defined them in a separated file .huskyrc.json. If you don't want to use this you can remove it.​

• Bug fixing

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

    • We solved it doing what is explained here.

• New features

  • Food category now shows a different details page for each restaurant.

• Update project dependencies

1.0.2 - 2019-03-18

• App Shell

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

    • (text-shell): change 'masked' for 'gradient' animation name

    • (image-shell): now supports standalone mode (without aspect-ratio wrapper)

  • As a consequence of the previous upgrade, we updated the text-shell and image-shell references across the project (these are minimal changes).

    • (image-shell): spinner animation is now a property (animation=”spinner”) not a class (class=”add-spinner”)

• Side Menu

  • Fix status bar issue on iPhoneX

    • src/app/app.component.html and src/app/side-menu/styles/side-menu.scss have minimal changes

• Update npm Dependencies

  • [@angular/cli] 7.2.3 -> 7.3.6

    • ng update @angular/cli

  • [@angular/core] 7.2.2 -> 7.2.9

    • ng update @angular/core

  • [rxjs] 6.3.3 -> 6.4.0

    • ng update rxjs

  • [ionic] 4.10.2 -> 4.12.0

    • npm i -g ionic (Remember the Ionic CLI is a global npm package)

  • [@ionic/angular] 4.0.0 -> 4.1.1

    • npm install @ionic/angular --save

  • Removed deprecated deps (@ionic/ng-toolkit, @ionic/schematics-angular) in favor of @ionic/angular-toolkit (see: https://github.com/ionic-team/starters/pull/487#issue-220835980)

    • npm uninstall @ionic/ng-toolkit

    • npm uninstall @ionic/schematics-angular

1.0.1 - 2019-02-28

• add splash screen and icons for the PWA

• move global app styles to separate file:src/theme/app-defaults.scss

• fix styles for walkthrough on multiple devices (now it's responsive)

• improved code readability by isolating usage of custom CSS variables from Ionic UI Components CSS Custom Properties. Now every stylesheet has the following structure:

• improved code readability by extracting page, shell, responsive and platform specific styles to different files. The new structure looks like this:

• code cleaning

• added more examples to the showcase section

1.0.0 - 2019-02-22

• First release 🎉

​