Application startup delay

Question

Application startup delay

Navigation

#1 by (4 votes)

2

I created a multiplatform application using Ionic 2 + Angular 2 according to Get started from Ionic documentation . The basic command to create a side menu project is as follows:

$ionic start myApp sidemenu

There is something that is bothering a lot that is the initialization of the application, in the Android platform, which today is taking around 14 (mega, master, hyper, ultra) seconds (Rubens Barrichello would give 5 laps in the Circuit of Monaco ).

I did a little research and I found something by saying that this happens when the app is in debug mode, but I ran a version of release and it continues slow on startup. I tested it on IOS and the loading speed is very fast, which would be normal. Has anyone ever come across this? Is there a configuration that needs to be performed to solve the problem?

android typescript angular ionic2

asked by anonymous 06.12.2017 / 16:38

1 answer

How to call a function in javascript through a text box? Declaration of Variable with Default Value in Procedures

score 4 · Accepted Answer

To improve the performance of your application you can use a millennial secret technique called LazyLoading (lazy load). In ionic the application of this model is to load the modules needed to every page at the time of loading it, avoiding loading all modules, providers, etc. at the beginning of the app.

Let's say you have a component/page called home , I would have the following file structure:

home.ts
home.scss
home.html

To implement lazy you need to create another file, which is the file that will import whatever you need.

home.module.ts

To use lazy you also need to make some adjustments, in your home.ts file you need to use the @IonicPage() decorator. Example:

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class Home {}

Already in your home.module.ts file:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Home } from './home';

@NgModule({
  declarations: [
    Home,
  ],
  imports: [
    IonicPageModule.forChild(Home),
  ],
  exports: [
    Home
  ]
})
export class HomeModule {}

When you call your page Home , consecutively HomeModule will be called and it will load its components.

One important thing, you no longer need to use the imported component to do the routing, you just need to pass the string with the name of the same, eg: this.nav.push('Home');

Note, you can import your tbm providers in home.module.ts, just add the providers: [] attribute in the NgModule