Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.