Ionic app structure & performance

This is also cross-posted to

Intent of this app is to be a eBook with rich content on each page. Currently structure is to have a page template with 100+ <ng-template> structures - 1 for each page and with embedded components & html. A different <ng-template> is select to display for each page.

I am very open to other structures but I have not found another way to do this with the rich component content in each <ng-template>. I don’t think the right way is to build an Ionic page component for each page.

When run with ionic serve, the app runs as expected and navigation & buttons are responsive.

When run in debug mode on a iPad Mini, The app does not make it past the splash screen. The last console messages are:

(lldb)     connect
(lldb)     run
(lldb)     safequit
Process 272 detached

I’m looking for additional ways to debug this and get more information.

When built with --prod the webpack build takes 44 minutes.

[16:13:06]  webpack started ... 
[16:57:04]  webpack finished in 2637.25 s

When this build is run on the iPad Mini, the only result is the famous white screen. The last console message is (run from Xcode)

Ionic Native: deviceready event fired after 443 ms
Any help on app design and/or debugging this greatly appreciated.
ionic info
cli packages: (/Users/phil/Documents/ionic/dbp/node_modules)
    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1
global packages:
    cordova (Cordova CLI) : 7.1.0 
    Gulp CLI              : CLI version 3.9.1 Local version 3.9.1
local packages:
    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : ios 4.5.3
    Ionic Framework    : ionic-angular 3.6.1
    ios-deploy : 1.9.2 
    ios-sim    : 5.0.8 
    Node       : v8.9.1
    npm        : 4.6.1 
    OS         : macOS High Sierra
    Xcode      : Xcode 9.2 Build version 9C40b 
Environment Variables:
    ANDROID_HOME : not set
    backend : pro

I have an app that sounds similar to yours (interactive eBook with audio, tappable elements, etc.).

I didn’t use ng-template but each page has custom html and ts and there’s a navbar and swipe gestures to navigate between pages.

It took a long time to generate all of the pages and write all of the html, but performance is good and with lazy loading the app boots up in around 3 seconds.

I’m not very familiar with angular but what are the benefits or reasons for trying to use ng-templates?

Also, production builds of my app take around 2 hours but I think that’s fairly normal for projects with 200+ pages… you’ll just have to do production builds only when preparing to upload to iTunes or google play.

The <ng-template> allows me to define with an outer border that I want and then select the page content for the page being read. Each <ng-template> corresponds to one page, so they all have the same look. Do you do a separate page component for each page? I have a single page component with all the templates.

I generated 300+ pages and all of my content is contained in each .html file with the matching .ts file handling audio and tap events.

I’m fairly certain that this isn’t the fastest or best solution to creating an app like this, but performance is good (around 10% CPU max when changing/rendering the page, 1% while on a page, and a consistent 60 MB memory use while the app is in use). So far none of my users have complained and I have around 1500 android installs and 1500 iOS installs since launching a few months ago and almost entirely 5-star reviews.