Ionic app boot time is very long after upgrade RC4&RC5

[brandyscarney]

From @iraychen on January 17, 2017 6:46

Since upgrade to the RC4 version, I found that the app boot time is very long in true device, often can not load the page. Whether or not the --prod command is used, the situation is always the same.

I use the command to create a default empty project, the time to enter the page will be relatively fast, probably around 2-3s.

But my project contains page about 300 or so, compiled main.js in about 7M, the final result is not able to load page over 20s.

Even if I upgrade to the RC5 version, this situation will still occur, and no improvement.

Regardless of whether or not to use the --prod command, and even use the --prod command causes the page can not be loaded.

Ionic version: Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.5 Ionic CLI Version: 2.1.18 Ionic App Lib Version: 2.1.9 Ionic App Scripts Version: 1.0.0 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 10 Node Version: v6.2.0 Xcode version: Not installed

Copied from original issue: driftyco/ionic#10066

[brandyscarney]

From @graphefruit on January 17, 2017 8:11

@iraychen Did you have a look if your main.js is minified? (If its not minified something went wrong during build process)

[brandyscarney]

From @yargomascarenhas on January 17, 2017 12:23

I haver the same problem, my app boot time is in 9~14 seconds

[brandyscarney]

From @unfg on January 17, 2017 12:27

@iraychen @yargomascarenhas try to use both --release and --prod tags. For example:

ionic build android --release --prod

[brandyscarney]

From @Malkiat-Singh on January 17, 2017 12:39

@unfg still same with node 6.9.2 and 0.0.48 for app-scripts

[Malkiat-Singh]

@unfg Thanks its working after update app-scripts to 1.0.0 @iraychen @yargomascarenhas Please update "@ionic/app-scripts": "1.0.0", then ionic build android --release --prod this will build for production

[yargomascarenhas]

@Malkiat-Singh I try this and now i have "error packet analysis" when install the apk in phone.

[vzharkov]

@yargomascarenhas make sure that you correct update app-scripts from the following instructions https://github.com/driftyco/ionic-app-scripts/blob/master/CHANGELOG.md

[Malkiat-Singh]

for any one came to this issue try without --release ionic build android --prod test apk http://cdn.malkiatms.in/poc/test.apk https://github.com/driftyco/ionic/issues/10066

[Malkiat-Singh]

@brandyscarney Now you can close issue this is resolved :)

[ishanambade]

the command ionic build android --prod is throwing error ....i have shared code about the same but no reply to sort it out....app is taking over 20 sec to load......Please Guide !!!

[graphefruit]

@ishanambade Without any error and any information in this thread noone can realy help you. So please give detailed information about which ionic version, which error is thrown and maybe try to set up a starter-project to see if you have the problems there aswell.

[vzharkov]

@ishanambade have you update "@ionic/app-scripts" to "1.0.0" version ?

[ishanambade]

Error while using --prod

ionic run android --prod

ionic-hello-world@ ionic:build D:\AraIonicApp ionic-app-scripts build "--prod" [10:40:28] ionic-app-scripts 1.0.0 [10:40:28] build prod started ... [10:40:29] clean started ... [10:40:29] clean finished in 15 ms [10:40:29] copy started ... [10:40:29] ngc started ... [10:40:34] build prod failed: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 94:19 in the original .ts file), resolving symbol AppModule in D:/AraIonicApp/src/app/app.module.ts [10:40:34] ionic-app-script task: "build" [10:40:34] Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 94:19 in the original .ts file), resolving symbol AppModule in D:/AraIonicApp/src/app/app.module.ts Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exporte d function (position 94:19 in the original .ts file), resolving symbol AppModule in D:/AraIonicApp/src/app/app.module.ts at positionalError (D:\AraIonicApp\node_modules\@angular\compiler-cli\src\static_reflector.js:595:18) at simplifyInContext (D:\AraIonicApp\node_modules\@angular\compiler-cli\src\static_reflector.js:473:27) at StaticReflector.simplify (D:\AraIonicApp\node_modules\@angular\compiler-cli\src\static_reflector.js:478:22) at StaticReflector.annotations (D:\AraIonicApp\node_modules\@angular\compiler-cli\src\static_reflector.js:60:36) at NgModuleResolver.resolve (D:\AraIonicApp\node_modules\@angular\compiler\bundles\compiler.umd.js:14261:46) at CompileMetadataResolver.loadNgModuleMetadata (D:\AraIonicApp\nodemodules\@angular\compiler\bundles\compiler.umd.js:14646:45) at CompileMetadataResolver.getUnloadedNgModuleMetadata (D:\AraIonicApp\node_modules\@angular\compiler\bundles\compiler.umd.js:14636:23) at addNgModule (D:\AraIonicApp\node_modules\@angular\compiler\bundles\compiler.umd.js:12944:43) at D:\AraIonicApp\node_modules\@angular\compiler\bundles\compiler.umd.js:12957:16 at Array.forEach (native)

npm ERR! Windows_NT 6.2.9200 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\om\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "ionic:build" "--" "--prod" npm ERR! node v6.9.1 npm ERR! npm v3.10.7 npm ERR! code ELIFECYCLE npm ERR! ionic-hello-world@ ionic:build: ionic-app-scripts build "--prod" npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ionic-hello-world@ ionic:build script 'ionic-app-scripts build "--prod"'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the ionic-hello-world package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! ionic-app-scripts build "--prod" npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs ionic-hello-world npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls ionic-hello-world npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! D:\AraIonicApp\npm-debug.log

why am i getting this error

Below is my Module.ts file FEW PAGE IMPORTS NOT COPIED HERE

import { NgModule, ErrorHandler } from '@angular/core'; import { RequestOptions, XHRBackend } from '@angular/http'; import { IonicApp, IonicModule, IonicErrorHandler ,InfiniteScroll} from 'ionic-angular'; import { MyApp } from './app.component'; // import { HttpModule} from '@angular/http';

import {Storage} from '@ionic/storage';

import { Focuser } from '../components/focuser/focuser';

@NgModule({ declarations: [ MyApp, ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, ], providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},Storage, { provide: HttpInterceptor, useFactory: (backend: XHRBackend, options: RequestOptions) => { return new HttpInterceptor(backend, options); }, deps: [XHRBackend, RequestOptions] }] }) export class AppModule {}

[vzharkov]

@ishanambade have you made needed changes from this instructions https://github.com/driftyco/ionic-app-scripts/blob/master/CHANGELOG.md#0047-2016-12-12 ?

[ishanambade]

Changes mentioned in the above link:

Entry Point Changes Delete main.dev.ts and main.prod.ts and create a main.ts file with the following content: import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);

I couldnt find main.dev.ts and main.prod.ts but i have main.ts and its the same as above mentioned main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);

Also Make sure the scripts section of package.json looks like this:

"scripts": { "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }

AND MY PACKAGE.JSON LOOKS LIKE THIS: "scripts": { "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" },

I COULDNT FIND THIS IN MY PACKAGE.JSON

Source Map Changes

Change ionic_source_map to ionic_source_map_type in package.json if it is overridden.

AND LAST CHANGE WHICH HAVE ASKED TO DO IS VALIDATING TSCONFIG.JSON WHICH IS SAME AS SHOWN. @brandyscarney @unfg

[danbucholtz]

Please install the latest ionic cli.

npm uninstall -g ionic
npm install -g ionic

It may require sudo depending on your set-up.

Then run ionic serve and ionic run ios --prod. In the output for the prod build, you should see a reference to ngc. This is running AoT compilation.

This is the best way to create a fast build. We're working on ways to speed up app start-up times too.

Please let me know how it goes.

Thanks, Dan