nativescript-angular: Very slow bootstrap after Angular RC-5 upgrade (>3 seconds)

I have detected that since the last update of angular (NG 2.0) the bootstrap of the application slows down dramatically (about 3 second of white screen after the splash screen on my laptop and even worse on the devices). Check out the log/code below running on the emulator.

I’m wondering which alternatives do I have to improve the startup speed ?

Check this log fragment:

Found peer TypeScript 1.8.10
5:59:11 AM - Compilation complete. Watching for file changes.

Sep 27 05:59:12 MacBook-Pro-de-Ignacio gyntoclient[45420]: CONSOLE LOG file:///app/main.js:4:12: Bootstrap started: Tue Sep 27 2016 05:59:12 GMT-0300 (UYT)
Sep 27 05:59:12 MacBook-Pro-de-Ignacio gyntoclient[45420]: assertion failed: 16A323 13B143: libxpc.dylib + 58126 [0F47719F-3076-3664-A64B-CEB6901B254D]: 0x7d
Sep 27 05:59:15 --- last message repeated 1 time ---
Sep 27 05:59:15 MacBook-Pro-de-Ignacio gyntoclient[45420]: CONSOLE LOG file:///app/app.component.js:31:20: Init started: Tue Sep 27 2016 05:59:15 GMT-0300 (UYT)
Sep 27 05:59:15 MacBook-Pro-de-Ignacio gyntoclient[45420]: CONSOLE LOG file:///app/app.component.js:52:20: Verificating device existence.
Sep 27 05:59:15 MacBook-Pro-de-Ignacio gyntoclient[45420]: Could not locate configuration file: 'GoogleService-Info.plist'.
Sep 27 05:59:15 MacBook-Pro-de-Ignacio gyntoclient[45420]: CONSOLE LOG file:///app/app.component.js:38:20: Init finished: Tue Sep 27 2016 05:59:15 GMT-0300 (UYT)

The bootstrapping took 3 seconds:

  • Bootstrap started: Tue Sep 27 2016 05:59:12 GMT-0300 (UYT)
  • Init started: Tue Sep 27 2016 05:59:15 GMT-0300 (UYT)

Basically here is the code that produce the log:

import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
import { AppModule } from "./app.module";

console.log("Bootstrap started: " + new Date());
platformNativeScriptDynamic().bootstrapModule(AppModule);
export class AppComponent implements OnInit {

    constructor(private _router: Router ....) {
        _translateService.setDefaultLang("en");

         // the lang to use, if the lang isn't available, it will use the current loader to get them
        _translateService.use(AppConfig.USER_LANGUAGE);
    }

    ngOnInit() {
        console.log("Init started: " + new Date());
        this.registerUserIfNotExists();
        ...
        console.log("Init finished: " + new Date());
    }

And here the the current module (as an example of dimension of the app):

import { NgModule } from "@angular/core";
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from "ng2-translate/ng2-translate";
import { NativeScriptModule } from "nativescript-angular/platform";
import { NativeScriptFormsModule } from "nativescript-angular/forms"
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { TNSTranslateLoader } from "nativescript-ng2-translate/nativescript-ng2-translate";
import { appRoutes } from "./app.routing";
import { AppContext } from "./app.context";
import { PhoneDirective } from "./shared/directives";
import { AppComponent } from "./app.component";
import {
    /* Client Pages */
    MainPage, OrderProductsPage, OrderItemPage, OrderCheckoutPage, OrderPage, UserPage, UserReviewsPage,
    UserAddressesPage, AssociateCompanyPage, CompanyReviewPage, CompanyReviewsPage,
    /* Company Pages  */
    CompaniesPage, CompanyCreationPage, CompanyPage, CompanyOpenTimesPage, CompanyDeliveryPage,
    CompanyProductsPage, CompanyOrdersPage, CompanyFeaturesPage, CompanyUsersPage, UserReviewPage,
    /* Auxiliar Pages */
    CountrySelectorPage, OpenTimePage, TimeZoneSelectorPage, GroupEditorPage, ProductEditorPage } from "./pages";
import { MenuComponent, HelpBoxComponent, ReviewBadgeComponent, CompanyHeaderComponent,
    UserEditorComponent, ProcessingDialog, ActionBarComponent } from "./pages/util";
import { CompanyService, ProductService, GroupService, CountryService, TimeZoneService,
    UserService, AddressService, OrderService, GoogleService, SearchService,
    ImageService, PurchaseService, UserReviewService, CompanyReviewService } from "./shared/services";
import { DeliveryComponent } from "./pages/main/delivery/delivery.component";
import { PickupComponent } from "./pages/main/pickup/pickup.component";
import { FavoritesComponent } from "./pages/main/favorites/favorites.component";
import { OrdersComponent } from "./pages/main/orders/orders.component";
import { ItemComponent } from "./pages/main/item/item.component";
import { TimePipe } from "./shared/pipes";
import { AuthHttp } from "./shared/util/auth-http";
import { IdentifiedHttp } from "./shared/util/identified-http";
import { GlobalEventsUtilities } from "./shared/util/global-events-utilities";
import { setStatusBarColors } from "./shared/util/status-bar";

setStatusBarColors();

@NgModule({
    imports: [
        NativeScriptModule,
        NativeScriptFormsModule,
        NativeScriptRouterModule,
        NativeScriptHttpModule,
        NativeScriptRouterModule.forRoot(appRoutes),
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: () => {
                // pass in the path to your locale files
                return new TNSTranslateLoader("i18n");
            }
        }) ],
    declarations: [
        AppComponent,
        /* Client Pages */
        MainPage, OrderProductsPage, OrderItemPage, OrderCheckoutPage, OrderPage, UserPage, UserReviewsPage,
        UserAddressesPage, AssociateCompanyPage, CompanyReviewPage, CompanyReviewsPage,
        /* Company Pages  */
        CompaniesPage, CompanyCreationPage, CompanyPage, CompanyOpenTimesPage, CompanyDeliveryPage,
        CompanyProductsPage, CompanyOrdersPage, CompanyFeaturesPage, CompanyUsersPage, UserReviewPage,
        /* Auxiliar Pages */
        CountrySelectorPage, OpenTimePage, TimeZoneSelectorPage, GroupEditorPage, ProductEditorPage,
        /* Auxiliar Components */
        MenuComponent, HelpBoxComponent, ReviewBadgeComponent, CompanyHeaderComponent, UserEditorComponent,
        DeliveryComponent, PickupComponent, FavoritesComponent, OrdersComponent, ItemComponent, ProcessingDialog,
        ActionBarComponent,
        /* Pipes */
        TimePipe,
        /* Directives */
        PhoneDirective
    ],
    providers: [
        AuthHttp,
        IdentifiedHttp,
        GlobalEventsUtilities,
        AppContext,
        CompanyService,
        CompanyReviewService,
        ProductService,
        GroupService,
        CountryService,
        TimeZoneService,
        UserService,
        UserReviewService,
        AddressService,
        OrderService,
        SearchService,
        GoogleService,
        ImageService,
        PurchaseService
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

Let me add that I packaged the application with webpack recently (expecting this might cause an improvement) but basically remains the same.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 2
  • Comments: 21 (2 by maintainers)

Most upvoted comments

I confirm slow bootstrap time with many components even on iOS…

Hi, just updated to 2.4…

On iOS it works (almost) ok: Startup time on iPhone 6 Plus: 5.76s

On Android the startup time is still a problem: P9 Lite: 10s Nexus 7 (2013): 17.40s

Same app in pure nativescript:

Startup time on iPhone 6 Plus: 2,45s P9 Lite: 3.26s Nexus 7 (2013): 5.21s

Stefano

The team is working on providing a solution here. There are several initiatives going on at the moment:

  • enabling AoT compilation, so that app startup doesn’t have to wait for the template compiler
  • reducing bundle JS size by getting rid of unnecessary code (Angular compiler (see, AoT above), RxJS, etc)
  • evaluating the move to ES6 modules that can be tree-shaken.
  • enabling router lazy loads, so that you don’t load your entire app up front.

I can’t say much about the release schedule for the improvements above yet. We’ll track them in separate issues.

I’m going to rewrite my app to use “simple” nativescript because startup time (a complex app with more than 20 pages) on devices is more than 10s on iOS and more than 20s on Android where the sluggishness is unbearable expecially on Android… I think this is a SERIOUS problem that prevents nativescript-angular to be used in production…