Angular Best Practices with Ionic

Angular is a fully supported framework for Ionic app development. Given the unique nature and constraints of mobile app development, there are some best practices to keep in mind as you build out your app.

Note: This guide is not meant as a reference on general Angular best practices which have been written about extensively (though the team here at Ionic is well equipped to consult with customers on general Angular best practices). Instead, this guide documents Ionic or mobile-specific best practices in Angular.

OnPush

With large component trees, using the default Change Detection strategy can result in performance issues.

Because of this, we strongly recommend using the OnPush Change Detection strategy in all components. This is made much easier when using a State Management library which centralizes application state into a global store and makes one-way data binding feasible.

Here's a good article to learn more about the two change detection strategies in Angular.

Virtual scrolling

For building large, performant lists, a virtual scrolling solution should be utilized. We strongly recommend Angular's CDK Scrolling library. Here's an example of using CDK Scrolling in an Ionic Angular app.

Lazy loading

For teams building apps that need to provide a fast initial load experience, lazy loading is critical. Lazy Loading in Angular boils down to configuring the routing for each module in your app to use loadChildren which allows Angular to defer the loading of the children in your NgModule until they are needed by the application.

For Progressive Web Apps, lazy loading is a must in order to reach performance standards and expectations. See the Lighthouse Metrics guide for a list of which metrics are important to optimize. The process of optimization involves whittling down the first set of modules your app will need immediately, and lazy loading all the rest.

Consult the Lazy Loading Guide on the Angular docs and apply these lessons to your Ionic app.

Pick lightweight libraries

The libraries developers choose use in their apps can be the greatest source of code bloat and reduced loading performance if not careful.

Every library used in the app should be carefully considered. A few to watch out for:

Moment

Moment is one of the most popular date/time libraries, but it's also a major source of bloat as it is currently not built to be tree shaken so will add considerable weight to your final JavaScript bundles.

One alternative to try is date-fns.

Keep native dependencies up to date

Mobile is a unique environment in that it moves very quickly as new devices and operating systems are released yearly and mobile vendors push upgrades aggressively. For many enterprise teams this can come as a shock, especially relative to desktop or web. One consequence of this rapid upgrade pace is that classic approaches to software stability can actually worsen it as dependencies go stale or new operating system and device requirements force developers to upgrade frequently.

Constantly evaluate the status of every native Capacitor or Cordova plugin used in the app and adopt new iOS and Android releases often to ensure compatibility with app store submission requirements and supported versions of the native toolchains.

Don't store sensitive values in insecure locations

When working with Auth tokens (JWTs/etc), encryption keys, or other highly sensitive information, do not store these values in insecure locations such as LocalStorage or IndexedDB. Instead, use specific mobile APIs for secure storage. We strongly recommend Identity Vault which is an officially supported Ionic solution providing easy access to these complex, low-level security APIs and hardware.

Consult the Biometrics and Token Storage Guide for more information on how these values should be stored.