Posts about Ionic 4

Forcing Reload of Root Page in Ionic 4

February 14th 2020 Ionic 4 Angular

Angular based routing in Ionic 4 introduces some gotchas if you're used to navigation in Ionic 3. Reinitializing the navigation stack by setting the root to the same page as it was before is one of those gotchas.

Testing Ionic Apps on iOS with Serve

January 31st 2020 Ionic 4 Windows iOS

The Safari browser has a tendency to render pages differently than Chrome. Troubleshooting such cases in Ionic apps and testing potential fixes can be time consuming, especially when developing on Windows. Building the app on the build server and having it deployed via TestFlight can make the feedback loop really long. I managed to make it shorter by opening the page served from my development machine in the mobile Safari browser.

Mocking Fetch Calls with Jasmine

January 10th 2020 Unit Testing Ionic 4 Angular

After getting asset loading working in Ionic unit tests, I wanted to also test the error handling in case an asset fails to load. Mocking the fetch call would be the easiest way to do that.

Assets Not Loading in Ionic Unit Tests

December 27th 2019 Ionic 4 Unit Testing Angular

Recently I had to embed a JSON file as an asset in my Ionic 4 project. When I tried to test the code accessing the asset, I was unpleasantly surprised. The asset failed to load with a 404 error. The body of the response was "NOT FOUND".

Pop Multiple Pages in Ionic 4

December 20th 2019 Ionic 4

In Ionic 3, navigation was stack based. NavController was used for controlling the navigation stack (i.e. for pushing pages onto the stack and popping them of the stack). Fortunately, there's still a NavController in Ionic 4. It's built on top of Angular routing and makes navigation more similar to how it worked in Ionic 3.

Fix for Ionic 4 Side Menu Freezing

December 13th 2019 Ionic 4

After upgrading our Ionic application to Ionic 4, testers started reporting that the side menu randomly froze in place when an item inside it was clicked. The problem could only be resolved by restarting the application. We tracked it down to two lines of code but unfortunately we didn't have a reliable way to reproduce the issue and the code seemed perfectly valid.

Convert Custom Ionic 3 Transitions to Ionic 4

November 29th 2019 Ionic 4 Ionic 3

Support for custom transitions between pages in Ionic framework (e.g. when opening a modal page) has never been well documented. Fortunately, there are blog posts for both Ionic 3 and Ionic 4 which provide more information and can serve as a good starting point for creating your own custom transitions. But even with all that, it can be tricky to convert existing custom Ionic 3 transitions to Ionic 4 when upgrading an application.

Customizing Android Back Button in Ionic 4

November 22nd 2019 Ionic 4 Android

Android hardware back button is something one can easily forget about but must in the end be properly supported in any mobile application. Unfortunately, built-in support in Ionic 4 is less than perfect. Many scenarios are still not properly supported as documented in a GitHub issue which hasn't been resolved for almost a year.

Ionic 4: Pinned Certificates in Output Folder

November 15th 2019 Ionic 4 Angular

If you want to use certificate pinning in Ionic 4 applications, the Cordova Advanced HTTP plugin is your best option. There's even an Ionic Native wrapper available for it to make it easier to use. In this post I'm focusing on how to put the certificates into the output folder as required by the certificate pinning functionality despite that folder being deleted at the beginning of every build.

Repeating Same Ionic 4 Page in History

November 8th 2019 Ionic 4 Angular

In Ionic 3, there was no need to pay any attention which pages you navigate to and how. This made it easy to create pages for navigating hierarchical structure, e.g. a catalog. In Ionic 4, the same route can't repeat in the history stack.

Opening Ionic 4 Modals from a Common Service

October 11th 2019 Ionic 4 TypeScript

In Ionic 4, even for lazy-loaded modal pages the component must be specified using the type. There's nothing wrong with that. Enforcing strong typing is usually a good idea. However, it can potentially cause a circular dependency, especially if you move the code for creating and opening modal pages to a separate service to avoid repeating the same boilerplate code and make testing easier.

Ionic 4 Modals in Lazy-Loaded Modules

October 4th 2019 Ionic 4

When creating pages using the Ionic CLI, by default each one of them is placed in its own module to enable lazy loading. However, if you want to display such a page as a modal instead of navigating to it, it won't work without some modifications. Although lazy-loaded modal pages are supported in Ionic 4, the documentation isn't all that detailed about it.

NavParams Alternatives in Ionic 4

September 27th 2019 Ionic 4

Ionic 3 provided a unified way for passing parameters to newly opened pages - the NavParams object. In the target page constructor, it could be used to get any parameters passed to that page. Ionic 4 doesn't have a universal NavParams object anymore, therefore other approaches must be used to achieve the same.

Hyperlinks in Ionic Checkbox Labels

September 20th 2019 Ionic 4 Ionic 3

Including a hyperlink in a checkbox label is a common way to provide more information about the choice the user is making. Unfortunately, in Ionic such a hyperlink doesn't work out of the box because the whole label acts as toggle for the checkbox. There's an easy way to make it work, though.

Making a Menu Work in Ionic 4

September 6th 2019 Ionic 4

Creating a menu in Ionic 4 should be simple and the process seems to be well documented but I struggled with it longer than I should have. Therefore, I decided to share my findings for my future self and for everyone else who might find this helpful.

View Encapsulation After the Ionic 4 Upgrade

August 30th 2019 Ionic 4 Angular

Angular supports several different modes of encapsulating styles in components so that styles from one component don't affect elements in other components. By default, Angular uses ViewEncapsulation.Emulated to emulate native Shadow DOM behavior without actually using Shadow DOM. Ionic 4 uses the same default which can cause problems when upgrading applications from Ionic 3 where ViewEncapsulation.None was used.

Swipeback Gesture Configuration in Ionic 4

August 23rd 2019 Ionic 4

Ionic has built-in support for navigating back using the swipe gesture. If you want to disable it for the whole application, you can pass a configuration option to IonicModule. Alternatively, you can disable and re-enable swipeback navigation ar runtime. In Ionic 3, NavController exposed a property for that. In Ionic 4, NavController doesn't provide such a property anymore. Instead, IonRouterOutlet now has an equivalent swipeGesture property.

Dismissing All Loading Overlays in Ionic 4

August 16th 2019 Ionic 4 Async

In Ionic 4, the dismissAll method for closing all currently open loading overlays has been removed. This might not be such a bad idea since it could cause problems when used carelessly. Still, when porting an existing Ionic 3 app to Ionic 4 not having an equivalent for it available can be a problem. I created my own replacement to make porting easier and minimize the required code changes.

Dismiss Loader on Page Change in Ionic 4

August 9th 2019 Ionic 4

In Ionic 3, there was an easy way to automatically dismiss a loading overlay when the navigation to a new page completed - you only had to set the dismissOnPageChange flag when creating the overlay. There's no such flag available in Ionic 4.

Inspecting Angular Apps from Browser Console

July 19th 2019 Angular Ionic 2/3 Ionic 4

Many JavaScript developers are used to inspecting the web page and the state of JavaScript variables using the browser developer tools. The browser console window can even be used for executing arbitrary JavaScript code to affect the web page/application at runtime. However, when using a SPA framework like Angular instead of vanilla JavaScript it's not as easy anymore to access the JavaScript objects of interest such as components and services. Fortunately, Angular provides means to access them, although they aren't documented well.

Returning Results from Alerts in Ionic 4

June 28th 2019 Ionic 4 Async

Last year I wrote a blog post about making code for displaying alerts reusable and testable by wrapping it into a function which returns the user's response as a promise. The sample was written in Ionic 3. The code doesn't work in Ionic 4 without modifications. Since I recently received a request for an Ionic 4 version of the code, I decided to write this follow-up post.

Issues with Initializing a New Ionic 4 Android App

February 22nd 2019 Ionic 4 Cordova Android

The final release of Ionic 4 is a good incentive for migrating existing Ionic 2/3 applications to Ionic 4. The official documentation lists the required steps for creating a new Ionic 4 project and adding Android support to it. If you're using Cordova 8+, then the application will run fine. But if you're still using Cordova 7.1.0, you'll only be greeted by a white screen when the application starts.